@font-face{font-family:'Roboto Condensed';src:url('/assets/fonts/RobotoCondensed-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto Condensed';src:url('/assets/fonts/RobotoCondensed-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
:root{--dqk-text:#0b1220;--dqk-muted:#64748b;--dqk-blue:#2563eb;--dqk-blue2:#1d4ed8;--dqk-cyan:#38bdf8;--dqk-green:#16a34a;--dqk-green2:#15803d;--dqk-border:#86efac;--dqk-shadow:0 18px 45px rgba(15,23,42,.08);--dqk-shadow2:0 22px 55px rgba(37,99,235,.18)}
body{margin:0;overflow-x:hidden}
.site-header,.site-header *{box-sizing:border-box;font-family:'Roboto Condensed',system-ui,-apple-system,'Segoe UI',Arial,sans-serif!important}

.site-header{position:sticky;top:0;left:0;right:0;z-index:1000;width:100%;padding:9px 0;border-bottom:1px solid rgba(134,239,172,.55);background:radial-gradient(circle at 8% 0%,rgba(37,99,235,.16),transparent 30%),radial-gradient(circle at 96% 12%,rgba(22,163,74,.14),transparent 28%),linear-gradient(135deg,rgba(255,255,255,.90),rgba(239,246,255,.78));box-shadow:0 12px 32px rgba(15,23,42,.08);backdrop-filter:blur(18px)}
.site-header:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.55),transparent),linear-gradient(180deg,rgba(255,255,255,.28),transparent 70%)}
.site-header:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(37,99,235,.30),transparent);pointer-events:none}

.header-inner{position:relative;z-index:1;width:100%;max-width:100%;margin:0 auto;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:14px}

.logo-box{min-width:0;display:flex;align-items:center;gap:10px;text-decoration:none!important;color:var(--dqk-text)}
.logo{flex:0 0 auto;width:48px;height:48px;padding:0;border:1px solid var(--dqk-border);border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 14px 28px rgba(37,99,235,.16),inset 0 1px 0 rgba(255,255,255,.95);display:block}
.brand-text{min-width:0;padding:8px 15px;border:1px solid var(--dqk-border);border-radius:18px;background:linear-gradient(180deg,rgba(248,251,255,.95),rgba(255,255,255,.92));box-shadow:0 10px 22px rgba(15,23,42,.045);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.logo-box:hover .brand-text{border-color:rgba(37,99,235,.28);box-shadow:0 14px 26px rgba(37,99,235,.10)}
.logo-box:active .brand-text{transform:translateY(1px)}
.brand-title{display:flex;align-items:center;gap:7px;color:var(--dqk-green2);font-size:12px;line-height:1.15;font-weight:700;letter-spacing:.55px;text-transform:uppercase;white-space:nowrap}
.brand-title:before{content:"";width:8px;height:8px;flex:0 0 auto;border-radius:999px;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.14)}
.brand-sub{margin-top:4px;color:#1e3a8a;font-size:12px;line-height:1.1;font-weight:700;white-space:nowrap}
.menu-pc{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:0}
.site-header .btn{position:relative;overflow:hidden;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border:1px solid var(--dqk-border);border-radius:17px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,246,255,.88));color:#1e3a8a!important;text-decoration:none!important;white-space:nowrap;font-size:13px;line-height:1;font-weight:700;letter-spacing:.16px;box-shadow:0 8px 18px rgba(37,99,235,.08),inset 0 1px 0 rgba(255,255,255,.9);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease,color .14s ease,filter .14s ease}
.site-header .btn:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-115%);transition:transform .48s ease;pointer-events:none}
.site-header .btn:hover:before{transform:translateX(115%)}
.site-header .btn:hover{transform:translateY(-2px);color:#fff!important;border-color:rgba(37,99,235,.28);background:linear-gradient(135deg,#38bdf8,#2563eb,#1d4ed8);box-shadow:0 13px 24px rgba(37,99,235,.22)}
.site-header .btn:active{transform:translateY(1px);box-shadow:0 7px 14px rgba(37,99,235,.16)}
.site-header .btn.is-static,.site-header .btn.balance-only,.site-header .btn.user-balance,.site-header .btn.user-static{overflow:hidden;color:var(--dqk-green2)!important;border-color:rgba(34,197,94,.24)!important;background:linear-gradient(180deg,rgba(240,253,244,.95),rgba(255,255,255,.86))!important;box-shadow:0 8px 18px rgba(22,163,74,.08),inset 0 1px 0 rgba(255,255,255,.9)!important;cursor:default!important}
.site-header .btn.is-static:before,.site-header .btn.balance-only:before,.site-header .btn.user-balance:before,.site-header .btn.user-static:before{display:none!important}
.site-header .btn.is-static:hover,.site-header .btn.balance-only:hover,.site-header .btn.user-balance:hover,.site-header .btn.user-static:hover,.site-header .btn.is-static:active,.site-header .btn.balance-only:active,.site-header .btn.user-balance:active,.site-header .btn.user-static:active{transform:none!important;color:var(--dqk-green2)!important;border-color:rgba(34,197,94,.24)!important;background:linear-gradient(180deg,rgba(240,253,244,.95),rgba(255,255,255,.86))!important;box-shadow:0 8px 18px rgba(22,163,74,.08),inset 0 1px 0 rgba(255,255,255,.9)!important;filter:none!important}
.hamburger{flex:0 0 auto;width:42px;height:42px;display:none;align-items:center;justify-content:center;position:relative;border:1px solid var(--dqk-border);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,246,255,.88));box-shadow:0 10px 22px rgba(15,23,42,.08);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}
.hamburger:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(37,99,235,.12)}
.hamburger span{position:absolute;left:50%;width:18px;height:2px;border-radius:999px;background:#1d4ed8;transform:translateX(-50%);transition:top .18s ease,transform .18s ease,opacity .18s ease}
.hamburger span:nth-child(1){top:14px}
.hamburger span:nth-child(2){top:20px}
.hamburger span:nth-child(3){top:26px}
.hamburger.open span:nth-child(1){top:20px;transform:translateX(-50%) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){top:20px;transform:translateX(-50%) rotate(-45deg)}
.hamburger.bounce{animation:btnBounceSoft .22s ease-out}

.menu-mobile {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden;
    gap: 8px;
    padding: 0 6px !important;
    border-top: 1px solid rgba(134,239,172,.4) !important;
    border-bottom: 1px solid var(--dqk-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 0 24px 24px !important;
    background: radial-gradient(circle at 12% 0%,rgba(37,99,235,.13),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.95)) !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.14) !important;
    backdrop-filter: blur(18px) !important;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: max-height .3s ease, padding .3s ease, transform .3s ease, opacity .2s ease, visibility .2s ease;
}

.menu-mobile.open {
    max-height: 600px !important;
    padding: 12px 6px !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.menu-mobile .btn {
    width: 100% !important;
    min-height: 64px;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6px 4px;
    border-radius: 14px;
    font-size: 11.5px;
    line-height: 1.3;
    white-space: normal;
    gap: 4px; 
}

.menu-mobile .btn.user-profile-block {
    grid-column: span 3;
    flex-direction: row;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 14px;
}

.user-profile-block .highlight {
    color: #ea580c;
    font-weight: 700;
}

@keyframes btnBounceSoft{0%{transform:translateY(0) scale(1)}40%{transform:translateY(2px) scale(.97)}70%{transform:translateY(-1px) scale(1.01)}100%{transform:translateY(0) scale(1)}}

@media(max-width:1180px){
    .menu-pc{gap:7px}
    .site-header .btn{height:38px;padding:0 11px;font-size:12.5px}
    .brand-text{padding:8px 12px}
}

@media(max-width:992px){
    .menu-pc{display:none}
    .hamburger{display:flex}
    .menu-mobile{
        display: grid !important; 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
    .menu-mobile.guest-mode{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media(max-width:700px){
    .site-header{padding:8px 0}
    .header-inner{padding:0 10px;gap:10px}
    .logo{width:44px;height:44px}
    .brand-text{padding:7px 11px;border-radius:16px}
    .brand-title{font-size:10.5px;letter-spacing:.35px}
    .brand-sub{font-size:11px}
    .hamburger{width:40px;height:40px;border-radius:15px}
    .hamburger span:nth-child(1){top:13px}
    .hamburger span:nth-child(2){top:19px}
    .hamburger span:nth-child(3){top:25px}
    .hamburger.open span:nth-child(1),.hamburger.open span:nth-child(3){top:19px}
    
    .menu-mobile{
        border-radius:0 0 20px 20px !important;
    }
    .menu-mobile .btn {
        min-height: 50px;
        font-size: 11px;
        border-radius: 12px;
    }
    .menu-mobile .btn.user-profile-block {
        min-height: 42px;
        font-size: 13.5px;
    }
}

html{-webkit-tap-highlight-color:transparent;}


@media (max-width: 992px) {
    .menu-pc {
        display: none !important;
    }

    .hamburger {
        display: flex !important;
    }

    .menu-mobile {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .menu-mobile.guest-mode {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .menu-mobile .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        height: auto !important;
        padding: 8px 7px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        font-size: 11.5px !important;
        border-radius: 13px !important;
    }

    .menu-mobile .btn.user-profile-block {
        grid-column: 1 / -1 !important;
        min-height: 46px !important;
        padding: 0 14px !important;

        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;

        gap: 10px !important;
        font-size: 13px !important;
    }

    .user-profile-block .u-name,
    .user-profile-block .u-bal {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 700px) {
    .site-header {
        padding: 7px 0 !important;
    }

    .header-inner {
        padding: 0 10px !important;
        gap: 8px !important;
    }

    .logo-box {
        min-width: 0 !important;
        max-width: calc(100% - 50px) !important;
        gap: 7px !important;
    }

    .logo {
        width: 42px !important;
        height: 42px !important;
    }

    .brand-text {
        min-width: 0 !important;
        padding: 7px 10px !important;
        border-radius: 15px !important;
    }

    .brand-title {
        max-width: 190px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 10px !important;
        letter-spacing: .25px !important;
    }

    .brand-sub {
        max-width: 190px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        font-size: 10.5px !important;
    }

    .hamburger {
        width: 40px !important;
        height: 40px !important;
        border-radius: 14px !important;
    }

    .hamburger span:nth-child(1) {
        top: 13px !important;
    }

    .hamburger span:nth-child(2) {
        top: 19px !important;
    }

    .hamburger span:nth-child(3) {
        top: 25px !important;
    }

    .hamburger.open span:nth-child(1),
    .hamburger.open span:nth-child(3) {
        top: 19px !important;
    }

    .menu-mobile {
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        border-radius: 0 0 18px 18px !important;
        gap: 8px !important;
    }

    .menu-mobile.open {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .menu-mobile .btn {
        min-height: 48px !important;
        padding: 8px 6px !important;
        font-size: 11.5px !important;
        border-radius: 13px !important;
    }

    .menu-mobile .btn.user-profile-block {
        min-height: 46px !important;
        padding: 0 13px !important;
        font-size: 12.5px !important;
    }
}

@media (max-width: 390px) {
    .brand-title {
        max-width: 155px !important;
        font-size: 9.5px !important;
    }

    .brand-sub {
        max-width: 155px !important;
        font-size: 10px !important;
    }

    .menu-mobile {
        gap: 7px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .menu-mobile .btn {
        min-height: 46px !important;
        padding: 7px 5px !important;
        font-size: 10.8px !important;
    }

    .menu-mobile .btn.user-profile-block {
        font-size: 11.5px !important;
    }
}
.auth-modal-overlay{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,.46);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.auth-modal-overlay.is-open{display:flex}
.auth-modal{
    position:relative;
    width:min(540px,calc(100vw - 28px));
    max-height:calc(100vh - 28px);
    overflow:visible;
    background:transparent;
    border:0;
    border-radius:24px;
    box-shadow:none;
}
.auth-modal-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:10;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(37,99,235,.12);
    border-radius:12px;
    background:rgba(255,255,255,.96);
    color:#1e3a8a;
    font-size:22px;
    line-height:1;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 7px 16px rgba(15,23,42,.10);
    transition:background .15s ease,transform .12s ease;
}
.auth-modal-close:hover{background:#eff6ff}
.auth-modal-close:active{transform:scale(.96)}
.auth-modal-frame{
    display:block;
    width:100%;
    height:540px;
    max-height:calc(100vh - 28px);
    border:0;
    border-radius:24px;
    background:transparent;
    overflow:hidden;
    transition:height .18s ease;
    box-shadow:0 28px 80px rgba(15,23,42,.24);
}
body.auth-modal-lock{overflow:hidden!important}
@media(max-width:700px){
    .auth-modal-overlay{padding:10px}
    .auth-modal{
        width:min(100%,520px);
        max-height:calc(100vh - 20px);
        border-radius:20px;
    }
    .auth-modal-frame{
        max-height:calc(100vh - 20px);
        border-radius:20px;
    }
    .auth-modal-close{
        top:8px;
        right:8px;
        width:32px;
        height:32px;
        border-radius:11px;
        font-size:21px;
    }
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}


html, body {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.site-header .btn i {
    font-size: 18px;
    transition: transform 0.2s ease;
}


.menu-pc .btn i {
    margin-top: -1px;
}


.menu-mobile .btn i {
    font-size: 22px; 
    margin-bottom: 2px;
}


.menu-mobile .btn.user-profile-block i {
    font-size: 16px;
    margin-bottom: 0;
    vertical-align: middle;
}


.site-header .btn:not(.is-static):hover i {
    transform: scale(1.2);
}

.site-header .bx,
.site-header i.bx,
.site-header i[class*="bx"] {
    font-family: 'boxicons' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
}
/* Đồng bộ màu sắc nút Menu Hamburger Mobile với giao diện mới */
.hamburger {
    border: 1px solid rgba(37,99,235,.25) !important; /* Chuyển viền xanh lá thành viền xanh dương mờ */
    box-shadow: 0 8px 18px rgba(37,99,235,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.hamburger span {
    background: #1e3a8a !important; /* Đổi màu 3 vạch thành xanh đậm (trùng màu chữ và icon) */
    border-radius: 4px !important;
}

/* Thêm hiệu ứng sáng nhẹ khi chạm vào nút trên Mobile */
.hamburger:active {
    background: #eff6ff !important;
}