.site-layout .dashboard-main { margin-left: 0; min-height: calc(100svh - 74px); }
.site-layout .main-content, .site-layout.guest-layout .main-content { width: 100%; max-width: 1260px; padding: 38px 26px 62px; margin: 0 auto; }
.site-layout.guest-auth .main-content { justify-content: center; align-items: center; }
.site-header { position: sticky; top: 0; z-index: 30; background: #ffffffed; border-bottom: 1px solid #e2eaf2; backdrop-filter: blur(12px); }
.site-header-inner { max-width: 1260px; min-height: 74px; padding: 8px 26px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-brand { flex: none; display: inline-flex; align-items: center; gap: 7px; color: #25547f; font-size: 13px; font-weight: 600; line-height: 1.15; text-decoration: none; }
.site-brand:hover { text-decoration: none; }.site-brand small { display: block; color: #8153b4; font-size: 8px; letter-spacing: .8px; margin-top: 4px; }
.site-brand-icon { display: grid; place-items: center; color: #8a56ca; width: 39px; height: 39px; border-radius: 12px; border: 1px solid #dfd5f6; background: linear-gradient(140deg, #f7edff, #e8f8ff); box-shadow: 0 3px 12px #a762c42c; }
.site-nav { display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid #e1e8f1; background: #fff; border-radius: 999px; box-shadow: 0 2px 6px #183a5c0b; min-width: 0; }
.site-nav-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; position: relative; white-space: nowrap; color: #51627a; font-size: 12px; font-weight: 500; padding: 10px 11px; min-height: 43px; border-radius: 99px; }
.site-nav-link:hover { color: #0874b3; background: #f2f9fe; text-decoration: none; }.site-nav-link.active { color: #0874b3; }.site-nav-link.active::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 2px; height: 3px; background: #087fc4; border-radius: 3px; }
.commission-chip, .news-chip { color: #fff; background: linear-gradient(100deg, #ed4741, #f66d2b); border-radius: 30px; padding: 2px 7px; font-size: 9px; }
.site-header-actions { display: flex; align-items: center; gap: 10px; flex: none; }.site-login { width: auto; border-radius: 99px; white-space: nowrap; padding: 9px 18px; min-height: 42px; box-shadow: 0 3px 10px #0873b42b; }
.account-menu { position: relative; }.account-menu summary { list-style: none; cursor: pointer; }.account-menu summary::-webkit-details-marker { display: none; }.account-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: 0 12px 30px #24456324; }.account-dropdown strong { color: #263752; font-size: 13px; overflow-wrap: anywhere; }.account-dropdown small { color: var(--muted); padding-bottom: 8px; }.account-dropdown a, .account-dropdown button { display: block; border: 0; background: none; text-align: left; color: #3d566e; font-size: 12px; width: 100%; padding: 8px 0; }
.admin-navigation { max-width: 1208px; display: flex; gap: 9px; margin: 16px auto 0; padding: 0 10px; overflow-x: auto; }.admin-navigation a { flex: none; padding: 8px 12px; background: #fff; border: 1px solid #dce7f0; border-radius: 8px; color: #355a74; font-size: 12px; }
.site-footer { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; padding: 36px max(26px, calc((100% - 1208px) / 2)) 18px; background: #fff; border-top: 1px solid var(--line); color: #5c7188; font-size: 12px; }.site-footer p { margin-top: 14px; max-width: 300px; }.site-footer strong, .site-footer a:not(.site-brand) { display: block; margin-bottom: 10px; }.site-footer strong { color: #263752; }.site-footer a:not(.site-brand) { color: #586f88; }.footer-copyright { grid-column: 1 / -1; padding-top: 15px; border-top: 1px solid #e5edf5; }
.auth-modal { width: min(420px, calc(100vw - 30px)); max-height: min(90vh, 850px); overflow-y: auto; border: 0; border-radius: 18px; background: #fff; color: #263752; box-shadow: 0 24px 80px #1f2d4538; padding: 28px 30px; margin: auto; }.auth-modal::backdrop { background: #19243b7a; backdrop-filter: blur(4px); }.auth-modal [hidden] { display: none !important; }.modal-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; border: 0; background: transparent; color: #657c93; width: 36px; height: 36px; border-radius: 8px; }.modal-close:hover { background: #f0f6fa; }.modal-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 5px 0 22px; color: #285c8f; text-align: left; }.modal-brand strong, .modal-brand small { display: block; }.modal-brand small { font-size: 8px; color: #7850ad; letter-spacing: 1px; }.modal-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 8px; background: #eef3f8; margin-bottom: 20px; }.modal-tabs button { min-height: 38px; border: 0; color: #65758b; background: transparent; border-radius: 6px; }.modal-tabs button[aria-selected=true] { background: #fff; color: #0874b3; box-shadow: 0 2px 5px #294a6615; }.modal-errors { padding: 10px 14px; font-size: 12px; }.auth-modal .field { margin-bottom: 15px; }.auth-modal .helper-text { font-size: 11px; line-height: 1.5; margin-top: 5px; }.auth-modal .divider { margin: 16px 0; }
.modal-tabs button { color: #4f6177; }
.site-layout .reference-hero-grid { grid-template-columns: minmax(0, 2.7fr) minmax(230px, 1fr); gap: 0; }
.site-layout .reference-hero { min-height: 390px; border-radius: 15px; background-position: center; }.site-layout .reference-hero-content { padding: 40px; }.site-layout .reference-hero h1 { font-size: clamp(36px, 4.4vw, 62px); text-shadow: 0 3px 20px #2c1558; }.site-layout .reference-hero p { font-size: 15px; }
.site-layout .hero-side { gap: 12px; border-radius: 15px; padding: 27px; background: radial-gradient(ellipse at 50% 0%, #d69df4 0%, #f4d6ff 38%, #eefaff 100%); }.site-layout .hero-side-label { display: inline-block; padding: 5px 12px; background: #fff; border: 1px solid #9acded; border-radius: 30px; color: #0875ad; letter-spacing: 0; }.hero-feature { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 11px; background: #fff; color: #3a5168; border: 1px solid #d5e8f4; border-radius: 8px; font-size: 12px; }.hero-feature svg { color: #8a58c6; }.site-layout .hero-side .button { margin-top: 15px; }
.site-layout .intro-card { margin-top: 28px; padding: 34px; }.intro-badge { display: inline-block; color: #9a5b12; background: #fff7e9; border: 1px solid #f3d8ae; padding: 4px 14px; border-radius: 25px; margin-top: 10px; font-size: 10px; }.intro-columns ul { margin: 10px 0 0; padding-left: 20px; color: #596f85; font-size: 12px; line-height: 2; }.community-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; margin-top: 22px; color: #086b9f; background: #e4f4ff; border-radius: 99px; font-size: 12px; }
.site-notice { display: flex; align-items: center; gap: 12px; margin: 22px 0 30px; padding: 8px 12px; background: #fff; border: 1px solid #b9e2f8; border-radius: 99px; color: #3c5570; font-size: 12px; }.site-notice-icon { display: grid; place-items: center; background: #087fbe; color: #fff; width: 34px; height: 34px; border-radius: 50%; }.notice-hot { border-radius: 20px; padding: 4px 10px; background: #e7f6ff; color: #086da5; font-size: 10px; white-space: nowrap; }
.featured-section .section-heading h2, .activity-section .section-heading h2, .affiliate-home .section-heading h2 { display: flex; align-items: center; gap: 9px; }.featured-section .section-heading svg { color: #087fbe; }.featured-label { color: #0871aa; background: #e2f4ff; border-radius: 20px; font-size: 10px; padding: 5px 10px; }.featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 800px; }.feature-tile { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 3px 12px #29415d0d; }.feature-tile > header, .activity-card > header { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: #17243d; color: #fff; font-size: 13px; font-weight: 500; }.feature-tile-art { min-height: 150px; padding: 20px; color: #fff; display: flex; flex-direction: column; justify-content: end; background: linear-gradient(90deg, #241655cc, #49257440), url('../images/chung-suc-hero.png') center / cover; }.feature-tile-art span { font-size: 11px; }.feature-tile-art strong { font-size: 25px; line-height: 1.2; }.feature-tile-body { padding: 18px; }.feature-tile-body > p { margin: 0 0 8px; color: #536c7e; font-size: 12px; }.feature-tile-body > .button { margin-top: 18px; }.guide-card { background: #fcf8ff; border: 1px solid #eadbf7; border-radius: 9px; padding: 15px; }.guide-card > span { color: #0872a9; font-size: 10px; }.guide-card h3 { margin: 8px 0; }.guide-card p { color: var(--muted); font-size: 12px; margin-bottom: 10px; }.guide-row { display: flex; justify-content: space-between; padding: 12px; margin-top: 10px; background: #f6f9fc; border: 1px solid #e1e9f1; border-radius: 7px; font-size: 12px; color: #4b627b; }
.activity-section, .affiliate-home { margin-top: 34px; }.activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.activity-card { border: 1px solid var(--line); overflow: hidden; background: #fff; border-radius: 11px; }.activity-card > header { background: #2e266c; }.deposit-activity > header { background: #08684f; }.activity-content { padding: 20px; color: #5b6e83; font-size: 12px; }.activity-content a { display: inline-block; margin-top: 10px; }.affiliate-home-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }.affiliate-home-stats > div { display: flex; flex-direction: column; gap: 5px; padding: 18px; border: 1px solid var(--line); background: #fff; border-radius: 10px; }.affiliate-home-stats span { color: #657991; font-size: 12px; }.affiliate-home-stats strong { color: #8853bb; font-size: 19px; }.affiliate-home-link { margin-top: 16px; }.affiliate-home-link p { margin: 8px 0 16px; color: var(--muted); }.affiliate-home-link .button { width: auto; }
.preview-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; }.preview-heading-icon { color: #8b54c7; padding: 10px; background: #f0eaff; border-radius: 10px; }.preview-heading h1 { font-size: 23px; }.preview-heading p { color: var(--muted); margin-top: 5px; }.guest-order-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 20px; }.preview-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.preview-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin: 18px 0; }.preview-product { display: flex; flex-direction: column; gap: 5px; padding: 13px; background: #f7faff; border: 1px solid #dce9f3; border-radius: 9px; color: #425a71; font-size: 12px; }.preview-product strong { color: #7851b8; }.preview-product small { color: #64798e; }.preview-amount { display: inline-block; padding: 8px 12px; background: #eef7fe; border: 1px solid #d4e9f7; border-radius: 6px; color: #37617d; }.guest-callout { text-align: center; margin: 20px 0 0; padding: 20px; background: #fff9eb; border: 1px dashed #e6bd6a; border-radius: 8px; color: #80551c; }.guest-callout .button { width: auto; margin: 12px auto 0; }.guest-locked { text-align: center; padding: 42px; }.guest-locked .panel-icon { margin: 0 auto 15px; }.guest-locked p { color: var(--muted); margin: 10px 0 20px; }.guest-locked .button { width: auto; margin: auto; }.guest-table-empty { text-align: center; padding: 35px 20px; color: #667d94; }.guest-summary-row { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 14px 0; color: #586f85; }
.affiliate-home-stats span, .preview-product small, .guest-table-empty { color: #4c6075; }.guest-table-empty a { color: #075c8e; text-decoration: underline; }
@media(max-width: 1100px) { .site-header-inner { flex-wrap: wrap; gap: 8px; }.site-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; border-radius: 12px; }.site-header-actions { margin-left: auto; }.site-nav-link { flex: none; }.site-layout .reference-hero { min-height: 320px; } }
@media(max-width: 760px) { .site-header-inner { padding: 8px 16px; }.site-header { position: relative; }.site-layout .main-content, .site-layout.guest-layout .main-content { padding: 22px 16px 44px; }.site-nav-link { font-size: 12px; }.site-layout .reference-hero-grid { grid-template-columns: 1fr; gap: 12px; }.site-layout .reference-hero { min-height: 290px; }.site-layout .reference-hero-content { padding: 26px; }.site-layout .reference-hero h1 { font-size: 36px; }.site-layout .hero-side { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; text-align: center; padding: 15px; }.site-layout .hero-side-label { display: block; grid-column: 1 / -1; }.hero-feature { font-size: 11px; min-height: 64px; }.hero-feature svg { display: none; }.site-layout .hero-side .button { grid-column: 1 / -1; margin: 3px 0 0; width: 100%; }.site-layout .intro-card { padding: 25px 18px; }.featured-grid, .guest-order-layout { grid-template-columns: 1fr; }.site-footer { grid-template-columns: 1fr 1fr; }.preview-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 480px) { .site-brand { font-size: 11px; }.site-brand small { font-size: 7px; }.site-login { font-size: 12px; min-height: 38px; }.balance-pill { gap: 4px; font-size: 10px; padding: 6px; }.hero-feature { padding: 7px; font-size: 10px; }.site-layout .intro-columns { grid-template-columns: 1fr; }.activity-grid, .affiliate-home-stats { grid-template-columns: 1fr; }.featured-label { display: none; }.site-notice p { font-size: 11px; }.auth-modal { padding: 25px 20px; }.site-footer { gap: 22px 14px; }.guest-locked { padding: 30px 20px; } }