/* TLTD layout fix - blue Tinh Kiem theme, no overlap */

:root{
    --bg:#031020;
    --bg2:#06182c;
    --panel:#06192d;
    --panel2:#08213c;
    --blue:#1d4ed8;
    --blue2:#38bdf8;
    --gold:#e8c66b;
    --gold2:#fff0ad;
    --line:rgba(232,198,107,.42);
    --text:#f9e7b0;
    --muted:#b8c8df;
    --max:1500px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    background:
        radial-gradient(circle at 50% 0%, rgba(37,99,235,.32), transparent 34%),
        linear-gradient(180deg,#031225 0%,#020815 58%,#02050c 100%);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.45;
    overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

img{display:block;max-width:100%}

.wrap{
    width:min(var(--max), calc(100% - 40px));
    margin:0 auto;
}

/* Header */

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(2,8,20,.94);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 38px rgba(0,0,0,.42);
    backdrop-filter:blur(8px);
}

.header-inner{
    min-height:82px;
    display:grid;
    grid-template-columns:310px minmax(0,1fr) 150px 44px;
    align-items:center;
    gap:14px;
}

.brand{
    min-width:0;
    display:flex;
    align-items:center;
}

.brand img{
    width:auto;
    max-width:300px;
    max-height:72px;
    object-fit:contain;
}

.main-nav{
    display:flex;
    justify-content:center;
    align-items:stretch;
    min-width:0;
    gap:2px;
}

.main-nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:82px;
    padding:0 18px;
    color:var(--gold2);
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    border-left:1px solid rgba(232,198,107,.09);
    white-space:nowrap;
}

.main-nav a:hover,
.main-nav a.active{
    background:linear-gradient(180deg,rgba(30,64,175,.75),rgba(2,20,48,.25));
    box-shadow:inset 0 -3px 0 var(--gold),0 0 22px rgba(59,130,246,.35);
}

.login-link{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    color:var(--gold2);
    font-weight:800;
    white-space:nowrap;
}

.nav-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--line);
    background:#06182c;
    color:var(--gold2);
    border-radius:8px;
}

/* Hero */

.hero{
    position:relative;
    min-height:640px;
    padding:42px 0 36px;
    background-size:cover;
    background-position:center top;
    border-bottom:1px solid rgba(232,198,107,.25);
    isolation:isolate;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(circle at 51% 20%,rgba(191,219,254,.32),transparent 17%),
        linear-gradient(90deg,rgba(2,8,20,.40),rgba(2,8,20,.07) 42%,rgba(2,8,20,.45)),
        linear-gradient(180deg,rgba(3,16,32,.20),rgba(2,5,12,.92));
}

.hero-mask{
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.22) 60%,rgba(3,8,16,.88));
    pointer-events:none;
}

.hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 315px;
    gap:28px;
    align-items:start;
}

.hero-grid > div:first-child{
    display:none;
}

.hero-title{
    min-height:548px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px 78px;
}

.hero-title h1{
    margin:0;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(58px,7vw,104px);
    line-height:.9;
    letter-spacing:.5px;
    color:var(--gold2);
    text-shadow:0 4px 0 #3b2105,0 0 28px rgba(59,130,246,.45);
}

.hero-title h2{
    margin:16px 0 0;
    font-family:Georgia, "Times New Roman", serif;
    font-style:italic;
    font-size:clamp(34px,4.2vw,62px);
    line-height:1;
    color:#dbeafe;
    text-shadow:0 0 18px rgba(56,189,248,.95),0 3px 0 #061326;
}

.open-time{
    margin-top:26px;
    width:min(560px,100%);
    padding:18px 30px;
    border:2px solid rgba(232,198,107,.68);
    border-radius:20px;
    background:
        radial-gradient(circle at 50% 0%,rgba(56,189,248,.22),transparent 48%),
        linear-gradient(180deg,rgba(8,47,73,.88),rgba(3,16,32,.9));
    box-shadow:0 0 38px rgba(59,130,246,.35), inset 0 0 30px rgba(232,198,107,.08);
}

.open-time span{
    display:block;
    font-weight:900;
    color:var(--gold2);
    text-transform:uppercase;
    letter-spacing:1px;
}

.open-time strong{
    display:block;
    margin-top:4px;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(30px,4vw,54px);
    color:var(--gold2);
    line-height:1;
}

/* right side panel */

.side-panel{
    width:100%;
    align-self:start;
    padding:12px;
    border:1px solid var(--line);
    background:rgba(2,12,27,.78);
    box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 0 36px rgba(37,99,235,.16);
}

.side-panel a,
.side-panel .qr{
    position:relative;
    z-index:1;
}

.topup{
    display:block;
    padding:18px 16px;
    border:1px solid rgba(232,198,107,.65);
    background:linear-gradient(180deg,rgba(30,64,175,.88),rgba(7,27,55,.9));
    text-align:center;
    color:var(--gold2);
}

.topup strong{
    display:block;
    font-family:Georgia, "Times New Roman", serif;
    font-size:32px;
    line-height:1;
    text-transform:uppercase;
}

.topup span{font-size:14px;color:#dbeafe}

.social{
    display:block;
    margin-top:10px;
    padding:13px 16px;
    border:1px solid rgba(232,198,107,.34);
    background:linear-gradient(90deg,rgba(2,8,20,.62),rgba(8,47,73,.55));
    color:var(--gold2);
    font-weight:900;
    text-transform:uppercase;
}

.qr{
    margin-top:12px;
    padding:12px;
    border:1px solid rgba(232,198,107,.42);
    background:rgba(1,10,22,.82);
    text-align:center;
}

.qr img{
    width:190px;
    max-width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    margin:0 auto;
    background:#fff;
    padding:8px;
}

.qr span{
    display:block;
    margin-top:8px;
    color:var(--gold2);
    font-size:13px;
    font-weight:800;
}

/* Three action cards: now normal flow, not negative/absolute */

.top-actions{
    position:relative;
    z-index:5;
    margin-top:24px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.action-card{
    min-height:182px;
    padding:24px;
    border:1px solid var(--line);
    background-color:var(--panel);
    background-size:cover;
    background-position:center;
    text-align:center;
    box-shadow:0 14px 38px rgba(0,0,0,.38), inset 0 0 36px rgba(59,130,246,.18);
}

.action-card::before{
    content:"";
    position:absolute;
}

.action-card h3{
    margin:0;
    font-family:Georgia, "Times New Roman", serif;
    font-size:44px;
    line-height:1;
    color:var(--gold2);
    text-transform:uppercase;
    text-shadow:0 3px 0 #061225;
}

.action-card > span{
    display:block;
    margin-top:3px;
    color:#dbeafe;
}

.action-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:28px;
}

.action-buttons a{
    display:flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:10px;
    border:1px solid rgba(232,198,107,.48);
    background:rgba(2,12,27,.8);
    color:var(--gold2);
    font-weight:900;
    text-transform:uppercase;
    font-size:14px;
}

.action-buttons a:hover{background:rgba(30,64,175,.65)}

/* Content grid */

.content-grid{
    margin-top:22px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr);
    gap:18px;
    align-items:start;
}

.panel{
    min-width:0;
    border:1px solid var(--line);
    background:rgba(2,12,27,.86);
    box-shadow:0 14px 38px rgba(0,0,0,.35), inset 0 0 34px rgba(37,99,235,.12);
}

.panel-head{
    min-height:54px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid rgba(232,198,107,.25);
}

.panel-head h3{
    margin:0;
    font-family:Georgia, "Times New Roman", serif;
    color:var(--gold2);
    text-transform:uppercase;
    font-size:22px;
    white-space:nowrap;
}

.panel-head a{
    flex:0 0 auto;
    color:var(--gold);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
}

/* News list: fixed columns to stop overlapping */

.news-list,
.event-list{
    list-style:none;
    margin:0;
    padding:12px 14px 14px;
}

.news-list li{
    display:grid;
    grid-template-columns:96px minmax(0,1fr) 48px;
    gap:12px;
    align-items:center;
    min-height:72px;
    padding:9px 0;
    border-bottom:1px solid rgba(232,198,107,.14);
}

.news-list li:last-child{border-bottom:0}

.news-list img{
    width:96px;
    height:56px;
    object-fit:cover;
    border:1px solid rgba(232,198,107,.38);
}

.news-list a{
    min-width:0;
    color:#eef6ff;
    font-size:14px;
    font-weight:700;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.news-list em{
    display:inline-block;
    margin-left:4px;
    padding:2px 5px;
    border-radius:3px;
    background:#dc2626;
    color:#fff;
    font-size:10px;
    font-style:normal;
    vertical-align:middle;
}

.news-list span{
    text-align:right;
    color:var(--gold);
    font-size:12px;
    white-space:nowrap;
}

/* Video */

.video-panel{padding-bottom:14px}

.video-thumb{
    position:relative;
    display:grid;
    place-items:center;
    height:245px;
    margin:14px;
    border:1px solid rgba(232,198,107,.32);
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.video-thumb::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(2,8,20,.08),rgba(2,8,20,.44));
}

.video-thumb span{
    position:relative;
    display:grid;
    place-items:center;
    width:76px;
    height:76px;
    border-radius:50%;
    border:2px solid var(--gold);
    background:rgba(2,8,20,.72);
    color:var(--gold2);
    font-size:34px;
    box-shadow:0 0 24px rgba(56,189,248,.28);
}

.video-mini{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:0 14px;
}

.video-mini img{
    height:58px;
    width:100%;
    object-fit:cover;
    border:1px solid rgba(232,198,107,.32);
}

/* Events */

.event-main{
    display:block;
    min-height:165px;
    margin:14px;
    padding:26px;
    border:1px solid rgba(232,198,107,.36);
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
}

.event-main::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(2,8,20,.8),rgba(2,8,20,.28));
}

.event-main strong,
.event-main span,
.event-main em{
    position:relative;
    z-index:1;
    display:block;
}

.event-main strong{
    font-family:Georgia, "Times New Roman", serif;
    font-size:38px;
    line-height:1;
    color:var(--gold2);
    text-transform:uppercase;
    max-width:72%;
}

.event-main span{margin-top:4px;color:#dbeafe}

.event-main em{margin-top:8px;color:var(--gold);font-style:normal}

.event-list{padding-top:0}

.event-list li{
    display:grid;
    grid-template-columns:minmax(0,1fr) 50px;
    gap:12px;
    align-items:center;
    min-height:42px;
    border-top:1px solid rgba(232,198,107,.14);
}

.event-list a{
    min-width:0;
    color:#eef6ff;
    font-size:13px;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.event-list span{
    text-align:right;
    color:var(--gold);
    font-size:12px;
}

/* Features strip */

.features{
    margin-top:22px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    border:1px solid rgba(232,198,107,.25);
    background:rgba(3,16,32,.88);
}

.features div{
    min-height:78px;
    padding:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    border-right:1px solid rgba(232,198,107,.16);
}

.features div:last-child{border-right:0}

.features strong{
    color:var(--gold2);
    text-transform:uppercase;
    font-size:14px;
}

.features span{
    color:var(--muted);
    font-size:13px;
}

/* Footer */

.site-footer{
    margin-top:0;
    border-top:1px solid rgba(232,198,107,.25);
    background:rgba(2,8,20,.95);
    padding:28px 0 14px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:28px;
}

.footer-logo{
    max-width:230px;
    max-height:90px;
    object-fit:contain;
}

.site-footer h4{
    margin:0 0 10px;
    color:var(--gold2);
    text-transform:uppercase;
}

.site-footer a{
    display:block;
    color:#dbeafe;
    font-size:14px;
    margin:6px 0;
}

.icons{display:flex;gap:10px}

.icons a{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:8px;
    background:rgba(30,64,175,.65);
    color:#fff;
    font-weight:900;
}

.site-footer p{
    margin:20px 0 0;
    text-align:center;
    color:rgba(219,234,254,.55);
    font-size:12px;
}

/* Responsive */

@media (max-width: 1280px){
    .header-inner{
        grid-template-columns:250px minmax(0,1fr) 130px 44px;
    }
    .brand img{max-width:240px}
    .main-nav a{padding:0 10px;font-size:13px}
    .hero-grid{grid-template-columns:minmax(0,1fr) 280px}
    .side-panel{padding:10px}
    .action-card h3{font-size:36px}
}

@media (max-width: 980px){
    .wrap{width:min(100% - 24px,var(--max))}
    .header-inner{
        grid-template-columns:minmax(0,1fr) 44px;
        min-height:70px;
    }
    .main-nav,
    .login-link{display:none}
    .nav-toggle{display:block}
    .brand img{max-height:62px}
    .hero{
        padding-top:20px;
        min-height:auto;
    }
    .hero-grid{
        grid-template-columns:1fr;
    }
    .hero-title{
        min-height:420px;
        padding:40px 10px;
    }
    .side-panel{
        max-width:420px;
        margin:0 auto 20px;
    }
    .top-actions,
    .content-grid{
        grid-template-columns:1fr;
    }
    .features{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 560px){
    .hero-title h1{font-size:48px}
    .hero-title h2{font-size:32px}
    .open-time{padding:16px}
    .open-time strong{font-size:30px}
    .action-buttons{grid-template-columns:1fr}
    .news-list li{grid-template-columns:78px minmax(0,1fr);gap:10px}
    .news-list img{width:78px;height:48px}
    .news-list span{grid-column:2;text-align:left}
    .video-thumb{height:190px}
    .features{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
}

/* =========================================================
   FINAL FONT / OVERLAP FIX
   Fixes duplicated background text + large font collisions.
   ========================================================= */

/* Prevent decorative background images that already contain text
   from duplicating with real HTML headings. */

.action-card{
    background-image:
        radial-gradient(circle at 18% 20%, rgba(56,189,248,.18), transparent 34%),
        linear-gradient(135deg, rgba(5,28,55,.96), rgba(2,8,20,.96)) !important;
    min-height: 170px !important;
    padding: 20px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Remove oversized title collision in the 3 top action cards */

.action-card h3{
    font-size: clamp(28px, 2.7vw, 40px) !important;
    line-height: 1.06 !important;
    margin: 0 !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 0 #000, 0 0 12px rgba(56,189,248,.32) !important;
}

.action-card > span{
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    display: block !important;
    color: #dbeafe !important;
    text-transform: none !important;
}

/* Keep buttons away from card titles */

.action-buttons{
    margin-top: 18px !important;
    gap: 10px !important;
}

.action-buttons a{
    min-height: 44px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center !important;
}

/* The event artwork often already has Bang Hoi text inside the image.
   Replace it with a clean blue panel so real text stays readable. */

.event-main{
    background-image:
        radial-gradient(circle at 70% 25%, rgba(56,189,248,.22), transparent 34%),
        linear-gradient(135deg, rgba(8,47,73,.96), rgba(2,8,20,.98)) !important;
    min-height: 150px !important;
    padding: 22px !important;
}

.event-main strong{
    max-width: 100% !important;
    font-size: clamp(26px, 2.6vw, 36px) !important;
    line-height: 1.05 !important;
    letter-spacing: .015em !important;
    text-shadow: 0 2px 0 #000, 0 0 12px rgba(56,189,248,.30) !important;
}

.event-main span,
.event-main em{
    font-size: 14px !important;
    line-height: 1.35 !important;
}

/* Panel headings: avoid broken/overlapping Vietnamese uppercase text */

.panel-head{
    min-height: 50px !important;
    padding: 0 14px !important;
}

.panel-head h3{
    font-size: clamp(18px, 1.45vw, 22px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    white-space: nowrap !important;
    text-rendering: optimizeLegibility !important;
}

/* Content text should clamp cleanly instead of pushing into date/badge */

.news-list li{
    grid-template-columns: 92px minmax(0,1fr) 48px !important;
    gap: 11px !important;
}

.news-list a{
    font-size: 13px !important;
    line-height: 1.35 !important;
    max-height: 38px !important;
}

.news-list em{
    font-size: 9px !important;
    padding: 1px 4px !important;
    margin-left: 3px !important;
}

.news-list span,
.event-list span{
    font-size: 11px !important;
}

/* Video title image had text in background too; keep only play card clean. */

.video-thumb{
    background-image:
        radial-gradient(circle at 50% 22%, rgba(96,165,250,.28), transparent 36%),
        linear-gradient(135deg, rgba(8,47,73,.95), rgba(2,8,20,.98)) !important;
}

/* Better spacing for features strip so text won't collide on 1366/1440 screens */

.features div{
    padding: 12px 8px !important;
}

.features strong{
    font-size: clamp(12px, .9vw, 14px) !important;
    line-height: 1.2 !important;
}

.features span{
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* Slightly reduce nav text on common laptop widths */

@media (max-width: 1500px){
    .wrap{ width:min(1250px, calc(100% - 32px)) !important; }
    .main-nav a{
        padding: 0 13px !important;
        font-size: 14px !important;
    }
    .header-inner{
        grid-template-columns: 270px minmax(0,1fr) 130px 44px !important;
    }
    .brand img{
        max-width: 260px !important;
    }
    .action-card h3{
        font-size: clamp(27px, 2.35vw, 36px) !important;
    }
    .event-main strong{
        font-size: clamp(25px, 2.25vw, 34px) !important;
    }
}

/* On narrower screens, action buttons stack earlier to preserve text */

@media (max-width: 1180px){
    .top-actions{
        grid-template-columns: 1fr !important;
    }
    .action-card h3{
        white-space: normal !important;
    }
    .action-buttons{
        grid-template-columns: 1fr 1fr !important;
    }
    .content-grid{
        grid-template-columns: 1fr !important;
    }
}

/* Mobile safety */

@media (max-width: 560px){
    .action-card h3{
        font-size: 30px !important;
        white-space: normal !important;
    }
    .panel-head h3{
        font-size: 18px !important;
        white-space: normal !important;
    }
    .action-buttons{
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   TLTD FINAL ACCOUNT + FONT SYNC
   Đồng bộ font/giao diện xanh Tinh Kiếm, xử lý chữ đè.
   ========================================================= */

:root{
  --font-ui: Arial, Helvetica, "DejaVu Sans", "Liberation Sans", sans-serif;
  --font-title: Georgia, "Times New Roman", serif;
}

body, button, input, select, textarea{
  font-family: var(--font-ui) !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.open-time strong,.topup strong,.panel-head h3,.action-card h3,.event-main strong{
  font-family: var(--font-title) !important;
  font-variant-ligatures: none;
}

/* Bỏ ảnh nền có chữ sẵn để không bị đè với chữ HTML */

.action-card,
.action-card.download,
.action-card.register,
.action-card.gift,
.action-card.login,
.action-card.account{
  background-image:
    radial-gradient(circle at 82% 18%, rgba(56,189,248,.20), transparent 34%),
    linear-gradient(135deg, rgba(7,35,67,.98), rgba(2,8,20,.98)) !important;
  min-height: 166px !important;
  padding: 18px 20px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.action-card h3{
  font-size: clamp(27px, 2.25vw, 38px) !important;
  line-height: 1.05 !important;
  margin:0 !important;
  letter-spacing:0 !important;
  word-spacing:0 !important;
  white-space:nowrap !important;
}

.action-card > span{
  display:block !important;
  margin-top:5px !important;
  font-size:14px !important;
  line-height:1.25 !important;
  text-transform:none !important;
}

.action-buttons{
  margin-top:17px !important;
  gap:10px !important;
}

.action-buttons a{
  min-height:42px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  padding:9px 10px !important;
  overflow:hidden !important;
  text-align:center !important;
}

/* Event/video panels also use clean backgrounds to avoid text duplicated from images */

.event-main,
.video-thumb{
  background-image:
    radial-gradient(circle at 70% 20%, rgba(56,189,248,.22), transparent 36%),
    linear-gradient(135deg, rgba(7,35,67,.98), rgba(2,8,20,.98)) !important;
}

.event-main strong{
  font-size: clamp(26px, 2.2vw, 34px) !important;
  line-height:1.05 !important;
  max-width:100% !important;
  letter-spacing:0 !important;
}

.panel-head h3{
  font-size: clamp(18px, 1.35vw, 21px) !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
  letter-spacing:0 !important;
}

.news-list a,.event-list a{
  line-height:1.32 !important;
  word-break:normal !important;
  overflow:hidden !important;
}

.news-list li{
  grid-template-columns:92px minmax(0,1fr) 48px !important;
}

@media(max-width:1500px){
  .wrap{width:min(1248px, calc(100% - 32px)) !important;}
  .main-nav a{font-size:14px !important;padding:0 12px !important;}
  .header-inner{grid-template-columns:270px minmax(0,1fr) 132px 44px !important;}
  .brand img{max-width:260px !important;}
}

@media(max-width:1180px){
  .top-actions,.content-grid{grid-template-columns:1fr !important;}
  .action-card h3{white-space:normal !important;}
}

/* =========================================================
   FINAL VIETNAMESE WUXIA FONT FIX
   Dùng font kiểu kiếm hiệp nhưng hỗ trợ tiếng Việt tốt.
   Sửa lỗi tách chữ: Đấ u / Ra Mắ t / Tinh Đấ u.
   ========================================================= */

:root{
  --font-ui: Tahoma, Arial, Helvetica, "DejaVu Sans", "Liberation Sans", sans-serif;
  --font-title: "Palatino Linotype", "Book Antiqua", Palatino, Cambria, "Times New Roman", serif;
  --font-menu: Tahoma, Arial, Helvetica, sans-serif;
}

/* Font thường: rõ, không lỗi dấu tiếng Việt */

body, button, input, select, textarea,
.main-nav a, .login-link, .action-buttons a,
.news-list a, .event-list a, .features strong, .features span{
  font-family: var(--font-ui) !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Font tiêu đề: phong cách kiếm hiệp, hỗ trợ dấu tiếng Việt */

.hero-title h1,
.hero-title h2,
.open-time strong,
.action-card h3,
.panel-head h3,
.event-main strong,
.topup strong,
.site-footer h4{
  font-family: var(--font-title) !important;
  font-variant-ligatures: none !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Hero title: giảm nhẹ cỡ chữ và khóa cách xuống dòng theo cụm từ */

.hero-title{
  max-width: 850px !important;
  margin: 0 auto !important;
}

.hero-title h1{
  font-size: clamp(54px, 6.2vw, 92px) !important;
  line-height: 1.02 !important;
  white-space: normal !important;
  max-width: 900px !important;
}

.hero-title h2{
  font-size: clamp(30px, 3.6vw, 54px) !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

/* Thẻ thời gian không ép tách dấu/chữ */

.open-time{
  width: min(520px, 100%) !important;
}

.open-time strong{
  font-size: clamp(30px, 3.2vw, 48px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

/* Card tiêu đề: không dùng font quá dày gây vỡ dấu */

.action-card h3{
  font-size: clamp(28px, 2.25vw, 38px) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(56,189,248,.38) !important;
}

/* Menu/header: dùng font UI đậm cho sạch, không lỗi dấu */

.main-nav a,
.login-link{
  font-family: var(--font-menu) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* Logo/brand không bị ép méo */

.brand img{
  object-fit: contain !important;
}

/* Panel headings */

.panel-head h3{
  font-size: clamp(18px, 1.25vw, 21px) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Mobile/laptop nhỏ: cho title xuống dòng theo từ, không tách chữ */

@media(max-width: 1366px){
  .hero-title h1{
    font-size: clamp(50px, 5.6vw, 78px) !important;
    max-width: 760px !important;
  }
  .hero-title h2{
    font-size: clamp(28px, 3.2vw, 46px) !important;
  }
  .action-card h3{
    font-size: clamp(26px, 2.05vw, 34px) !important;
  }
}

@media(max-width: 980px){
  .hero-title h1 br{
    display: initial !important;
  }
  .hero-title h1{
    font-size: clamp(42px, 9vw, 62px) !important;
  }
  .hero-title h2{
    white-space: normal !important;
  }
}

@media(max-width: 560px){
  .hero-title h1{
    font-size: 42px !important;
    line-height: 1.08 !important;
  }
  .hero-title h2{
    font-size: 28px !important;
  }
  .action-card h3{
    white-space: normal !important;
  }
}

/* FIX ALL LINKS VERSION 9: account links use internal pages only; UI links use public_url helpers. */

/* =========================================================
   SYNC WITH INTERNAL ACCOUNT UI STYLE
   Source reference: project/css/tltd-home-v3.css + base.hack.css
   ========================================================= */

:root{
  --id-bg:#040913;
  --id-panel:#020b18;
  --id-panel2:#071b32;
  --id-gold:#f2ca70;
  --id-gold2:#fff2cf;
  --id-border:rgba(193,145,58,.58);
  --id-blue:#63b0ff;
  --id-text:#f7e8bf;
  --font-ui:'Noto Sans',Tahoma,Arial,Helvetica,sans-serif;
  --font-title:Georgia,'Times New Roman',serif;
}

body.tltd-main-site{
  background:#040913 !important;
  color:var(--id-text) !important;
  font-family:var(--font-ui) !important;
}

body.tltd-main-site::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 20% 8%, rgba(99,176,255,.12), transparent 22%),
    radial-gradient(circle at 80% 0%, rgba(242,202,112,.08), transparent 24%),
    linear-gradient(180deg,#040913 0%,#020815 56%,#01040b 100%);
}

body.tltd-main-site a{ text-decoration:none; }

.site-header{
  background:linear-gradient(180deg,rgba(4,11,23,.98),rgba(2,9,18,.96)) !important;
  border-bottom:1px solid var(--id-border) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.28) !important;
}

.header-inner{ min-height:92px !important; }

.brand img{ max-height:76px !important; max-width:310px !important; object-fit:contain !important; }

.main-nav a{
  min-height:92px !important;
  color:#f4e2b0 !important;
  font-family:var(--font-ui) !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  border-left:1px solid rgba(193,145,58,.18) !important;
}

.main-nav a:hover,.main-nav a.active{
  color:#fff2cf !important;
  background:linear-gradient(180deg,rgba(31,68,139,.72),rgba(7,20,45,.35)) !important;
  box-shadow:inset 0 -3px 0 #dcae55,0 0 16px rgba(99,176,255,.26) !important;
}

.login-link{
  color:#fff2cf !important;
  font-family:var(--font-ui) !important;
  font-weight:800 !important;
}

.hero{
  min-height:620px !important;
  background-image:
    linear-gradient(90deg, rgba(2,7,16,.28), rgba(2,7,16,.08) 50%, rgba(2,7,16,.82) 78%, rgba(2,7,16,.94)),
    linear-gradient(180deg, rgba(4,10,18,.05), rgba(4,10,18,.28) 52%, rgba(4,10,18,.78)),
    url('../../project/img/tltd-home-scene.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  border-bottom:1px solid rgba(193,145,58,.38) !important;
}

.hero-mask{ background:radial-gradient(circle at 50% 25%,rgba(99,176,255,.10),transparent 24%) !important; }

.hero-title h1{
  font-family:var(--font-title) !important;
  font-size:clamp(58px,6.1vw,96px) !important;
  line-height:.95 !important;
  max-width:860px !important;
  margin:0 auto !important;
  letter-spacing:-.5px !important;
  word-break:keep-all !important;
  hyphens:none !important;
  background:linear-gradient(180deg,#fff6cc 0%,#f5cf72 44%,#b78224 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  text-shadow:none !important;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55));
}

.hero-title h1 br{ display:none !important; }

.hero-title h2{
  font-family:var(--font-title) !important;
  color:#e8f4ff !important;
  font-size:clamp(34px,3.6vw,58px) !important;
  font-style:italic !important;
  line-height:1.04 !important;
  white-space:nowrap !important;
  text-shadow:0 0 18px rgba(99,176,255,.65),0 4px 10px rgba(0,0,0,.45) !important;
}

.open-time{
  max-width:540px !important;
  border:1px solid rgba(193,145,58,.72) !important;
  background:linear-gradient(180deg,rgba(2,11,24,.82),rgba(2,8,18,.94)) !important;
  box-shadow:0 20px 36px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,214,122,.07) !important;
}

.open-time span{ color:#f6eedc !important; font-family:var(--font-ui) !important; }

.open-time strong{
  color:#f2ca70 !important;
  font-family:var(--font-title) !important;
  font-size:clamp(30px,3.1vw,48px) !important;
  line-height:1.12 !important;
}

.side-panel{
  border:1px solid rgba(195,145,58,.72) !important;
  background:linear-gradient(180deg,rgba(2,11,24,.82),rgba(2,8,18,.94)) !important;
  box-shadow:0 20px 36px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,214,122,.07) !important;
}

.topup{
  border:1px solid rgba(221,165,61,.62) !important;
  background:linear-gradient(180deg,#173970 0%,#08182e 52%,#173970 100%) !important;
  color:#fff2cf !important;
}

.topup strong{ font-size:30px !important; font-family:var(--font-title) !important; }

.social{
  border:1px solid rgba(193,145,58,.42) !important;
  background:rgba(4,13,25,.92) !important;
  color:#f5e7be !important;
}

.qr{ border:1px solid rgba(193,145,58,.42) !important; background:rgba(4,13,25,.92) !important; }

.top-actions{ gap:18px !important; }

.action-card,
.action-card.download,
.action-card.register,
.action-card.account,
.action-card.login,
.action-card.gift{
  border:1px solid rgba(195,145,58,.72) !important;
  background:
    radial-gradient(circle at 80% 0%,rgba(99,176,255,.18),transparent 30%),
    linear-gradient(180deg,rgba(2,11,24,.82),rgba(2,8,18,.96)) !important;
  box-shadow:0 20px 36px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,214,122,.07) !important;
}

.action-card h3{
  font-family:var(--font-title) !important;
  font-size:clamp(30px,2.35vw,42px) !important;
  line-height:1.04 !important;
  color:#fff2cf !important;
  text-shadow:0 3px 12px rgba(0,0,0,.45) !important;
  letter-spacing:0 !important;
}

.action-card>span{ color:#f6eed8 !important; font-family:var(--font-ui) !important; }

.action-buttons a{
  border:1px solid rgba(225,170,65,.55) !important;
  background:linear-gradient(180deg,#173970 0%,#08182e 52%,#173970 100%) !important;
  color:#fff2cf !important;
  font-family:var(--font-ui) !important;
  font-weight:800 !important;
}

.panel{
  border:1px solid rgba(195,145,58,.58) !important;
  background:linear-gradient(180deg,rgba(2,11,24,.82),rgba(2,8,18,.95)) !important;
  box-shadow:0 18px 30px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,214,122,.05) !important;
}

.panel-head{
  border-bottom:1px solid rgba(193,145,58,.38) !important;
}

.panel-head h3{
  color:#f2ca70 !important;
  font-family:var(--font-title) !important;
  font-size:clamp(19px,1.35vw,23px) !important;
}

.panel-head a{ color:#efc65c !important; }

.news-list img,.video-mini img,.video-thumb,.event-main{
  border:1px solid rgba(193,145,58,.42) !important;
}

.video-thumb,.event-main{
  background:
    radial-gradient(circle at 65% 20%,rgba(99,176,255,.18),transparent 35%),
    linear-gradient(180deg,rgba(8,35,65,.9),rgba(2,9,18,.94)) !important;
}

.event-main strong{
  font-family:var(--font-title) !important;
  color:#fff2cf !important;
  font-size:clamp(28px,2.3vw,38px) !important;
  letter-spacing:0 !important;
}

.features{
  border-color:rgba(193,145,58,.45) !important;
  background:linear-gradient(180deg,rgba(4,11,23,.96),rgba(2,9,18,.92)) !important;
}

.features strong{ color:#f2ca70 !important; }

.site-footer{
  border-top:1px solid rgba(193,145,58,.45) !important;
  background:linear-gradient(180deg,rgba(4,11,23,.98),rgba(2,9,18,.98)) !important;
}

.site-footer h4{ color:#f2ca70 !important; }

.page-hero{
  background-image:
    linear-gradient(180deg,rgba(4,10,18,.16),rgba(4,10,18,.70)),
    url('../../project/img/tltd-home-scene.jpg') !important;
  background-size:cover !important;
  background-position:center !important;
}

.page-panel,.code-card,.download-row{
  border:1px solid rgba(195,145,58,.58) !important;
  background:linear-gradient(180deg,rgba(2,11,24,.82),rgba(2,8,18,.95)) !important;
  color:#f7e8bf !important;
}

.gold-btn,.game-form button,.copy-btn{
  border:1px solid rgba(225,170,65,.65) !important;
  background:linear-gradient(180deg,#e1a437 0%,#b17016 50%,#e0a63d 100%) !important;
  color:#fff4ce !important;
}

@media(max-width:1024px){
  .hero-title h1 br{ display:initial !important; }
  .hero-title h2{ white-space:normal !important; }
}

/* =========================================================
   HERO TEXT REMOVED + CLEAR BACKGROUND
   Bỏ text: Thiên Long Tinh Đấu / Chính Thức Ra Mắt /
   Khai mở máy chủ mới / 19:00 • 24.06.2025
   Làm ảnh nền trang chủ rõ hơn.
   ========================================================= */

.hero{
  min-height: 620px !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Giảm lớp phủ tối để hình nền sáng/rõ hơn */

.hero::before{
  background:
    linear-gradient(90deg, rgba(2,7,16,.10), rgba(2,7,16,.02) 48%, rgba(2,7,16,.42) 82%, rgba(2,7,16,.62)),
    linear-gradient(180deg, rgba(4,10,18,.02), rgba(4,10,18,.10) 58%, rgba(4,10,18,.38)) !important;
}

.hero-mask{
  background:
    radial-gradient(circle at 50% 28%, rgba(99,176,255,.04), transparent 26%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.18)) !important;
}

/* Ẩn hoàn toàn cụm chữ hero để không che ảnh nền */

.hero-title-hidden,
.hero-title.hero-title-hidden{
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-title-hidden h1,
.hero-title-hidden h2,
.hero-title-hidden .open-time{
  display: none !important;
}

/* Vẫn giữ cột giữa để panel phải đứng đúng vị trí */

.hero-grid{
  align-items: stretch !important;
}

.hero-title-hidden{
  min-height: 520px !important;
}

/* Panel phải bớt che nền hơn */

.side-panel{
  background: linear-gradient(180deg, rgba(2,11,24,.62), rgba(2,8,18,.72)) !important;
  backdrop-filter: blur(2px);
}

.topup,
.social,
.qr{
  background-color: rgba(4,13,25,.72) !important;
}

/* Trường hợp trình duyệt còn cache HTML cũ: ép ẩn text cũ bằng CSS */

.hero-title h1,
.hero-title h2,
.hero-title .open-time{
  display: none !important;
}

/* =========================================================
   HERO TALLER + CLEARER BACKGROUND (v11)
   - Mở rộng khung nền hiển thị xuống thấp hơn
   - Làm ảnh nền rõ hơn thêm một chút
   ========================================================= */

.hero{
  min-height: 760px !important;
  padding-top: 22px !important;
  padding-bottom: 26px !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Hiển thị nền xuống sâu hơn bằng cách tăng chiều cao cột trái rỗng */

.hero-title-hidden{
  min-height: 660px !important;
}

/* Panel phải vẫn bám theo chiều cao mới nhưng không quá che nền */

.side-panel{
  margin-top: 10px !important;
  background: linear-gradient(180deg, rgba(2,11,24,.52), rgba(2,8,18,.64)) !important;
  box-shadow: 0 18px 30px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,214,122,.06) !important;
}

/* Giảm thêm lớp phủ để lộ chi tiết ảnh rõ hơn */

.hero::before{
  background:
    linear-gradient(90deg,
      rgba(2,7,16,.06),
      rgba(2,7,16,.01) 46%,
      rgba(2,7,16,.30) 80%,
      rgba(2,7,16,.52)
    ),
    linear-gradient(180deg,
      rgba(4,10,18,.00),
      rgba(4,10,18,.06) 56%,
      rgba(4,10,18,.26)
    ) !important;
}

.hero-mask{
  background:
    radial-gradient(circle at 46% 22%, rgba(99,176,255,.03), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.12)) !important;
}

/* Khối donate/QR nhẹ hơn để không lấn át ảnh */

.topup{
  background: linear-gradient(180deg, rgba(23,57,112,.88) 0%, rgba(8,24,46,.82) 52%, rgba(23,57,112,.88) 100%) !important;
}

.social,
.qr{
  background-color: rgba(4,13,25,.64) !important;
}

/* Cho 3 card bên dưới ăn sát hơn với vùng nền vừa mở rộng */

.top-actions{
  margin-top: 18px !important;
}

/* Subpages giữ nguyên, chỉ trang chủ hero tăng cao */

@media (max-width: 980px){
  .hero{
    min-height: 560px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  .hero-title-hidden{
    min-height: 320px !important;
  }
  .side-panel{
    margin-top: 0 !important;
  }
}

/* =========================================================
   HERO NO OVERLAY VERSION (v12)
   Bỏ che mờ hình nền trang chủ hoàn toàn.
   ========================================================= */

/* Giữ nguyên hình nền, không phủ tối/blur */

.hero{
  min-height: 760px !important;
  padding-top: 22px !important;
  padding-bottom: 26px !important;
  background-image: url('../../project/img/tltd-home-scene.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}

/* Tắt toàn bộ lớp phủ */

.hero::before,
.hero::after,
.hero-mask{
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Vùng hero trống vẫn giữ chiều cao để nhìn được nền */

.hero-title-hidden,
.hero-title.hero-title-hidden{
  min-height: 660px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-title h1,
.hero-title h2,
.hero-title .open-time,
.hero-title-hidden h1,
.hero-title-hidden h2,
.hero-title-hidden .open-time{
  display: none !important;
}

/* Khung phải vẫn giữ chức năng nhưng trong hơn, ít che nền hơn */

.side-panel{
  margin-top: 10px !important;
  background: rgba(2, 8, 18, .38) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: rgba(242, 202, 112, .55) !important;
}

.topup{
  background: rgba(15, 48, 98, .72) !important;
}

.social,
.qr{
  background: rgba(4, 13, 25, .45) !important;
}

/* Nếu muốn QR dễ đọc thì chỉ giữ nền trắng của chính ảnh QR */

.qr img{
  background: #fff !important;
}

/* Đẩy 3 card xuống ngay sau hero, không đè lên nền */

.top-actions{
  margin-top: 22px !important;
}

@media (max-width: 1400px){
  .hero{
    min-height: 720px !important;
  }
  .hero-title-hidden{
    min-height: 620px !important;
  }
}

@media (max-width: 980px){
  .hero{
    min-height: 560px !important;
  }
  .hero-title-hidden{
    min-height: 320px !important;
  }
  .side-panel{
    background: rgba(2, 8, 18, .62) !important;
  }
}

/* ===== SIDE PANEL V5 - ĐỔI QUÉT MÃ THÀNH NÚT TẢI GAME NGAY ===== */

.side-panel.wuxia-panel-v5{
    position:relative;
    overflow:hidden;
    padding:14px 14px 14px;
    border:1px solid rgba(241,199,104,.64);
    background:
        radial-gradient(circle at 12% 0%, rgba(93,150,255,.20), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(255,219,126,.10), transparent 30%),
        linear-gradient(180deg, rgba(7,21,46,.92) 0%, rgba(5,16,34,.88) 55%, rgba(4,12,24,.84) 100%);
    box-shadow:
        0 0 0 1px rgba(255,245,216,.05) inset,
        0 14px 28px rgba(0,0,0,.30),
        0 0 18px rgba(82,145,255,.10);
    backdrop-filter:blur(3px);
    isolation:isolate;
}

.side-panel.wuxia-panel-v5::before{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(241,199,104,.20);
    pointer-events:none;
    z-index:1;
}

.side-panel.wuxia-panel-v5::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 24%, transparent 72%, rgba(255,255,255,.03));
    opacity:.75;
    pointer-events:none;
    z-index:1;
}

.wuxia-corner{position:absolute;width:24px;height:24px;border-color:#efc86d;opacity:.82;z-index:3;pointer-events:none;}

.panel-aura{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;z-index:0;animation:auraPulseSoft 4.2s ease-in-out infinite;}

.aura-blue{width:80px;height:80px;top:22px;right:-12px;background:radial-gradient(circle, rgba(82,149,255,.42), rgba(82,149,255,0));}

.aura-gold{width:70px;height:70px;bottom:110px;left:-8px;background:radial-gradient(circle, rgba(255,210,105,.26), rgba(255,210,105,0));animation-delay:1.2s;}

.wuxia-ribbon.bluegold-ribbon{position:relative;z-index:4;width:max-content;margin:0 auto 10px;padding:5px 14px;border-radius:999px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#fff2cb;background:linear-gradient(90deg, rgba(22,77,181,.96), rgba(46,107,220,.92) 52%, rgba(193,143,45,.92));border:1px solid rgba(255,217,131,.50);box-shadow:0 8px 16px rgba(0,0,0,.20), 0 0 12px rgba(82,145,255,.10);}

.wuxia-topup.bluegold-topup{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:104px;margin-bottom:12px;padding:12px 12px 11px;text-align:center;overflow:hidden;border:1px solid rgba(241,199,104,.70);color:#fff3cf;background:radial-gradient(circle at 50% 0%, rgba(152,205,255,.14), transparent 44%), linear-gradient(135deg, rgba(32,86,206,.96) 0%, rgba(18,49,122,.94) 58%, rgba(169,124,33,.90) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 20px rgba(0,0,0,.26), 0 0 16px rgba(82,145,255,.12);transition:transform .22s ease, box-shadow .22s ease;}

.wuxia-topup.bluegold-topup::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,231,179,.16);}

.wuxia-topup.bluegold-topup::after{content:"";position:absolute;top:-18%;left:-38%;width:40%;height:150%;background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);transform:rotate(18deg);animation:shimmerSweepSoft 4s linear infinite;}

.wuxia-topup .topup-mark{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#ffe9ac;opacity:.92;}

.wuxia-topup strong{font-size:31px;line-height:1;text-transform:uppercase;color:#fff7de;text-shadow:0 2px 0 rgba(50,20,0,.24), 0 0 12px rgba(255,225,140,.18);}

.wuxia-topup.bluegold-topup:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px rgba(0,0,0,.30),0 0 18px rgba(82,145,255,.16);}

.panel-divider.bluegold-divider{position:relative;z-index:4;display:flex;align-items:center;gap:8px;margin:8px 0 10px;color:#ebcb82;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;}

.panel-divider.bluegold-divider::before,.panel-divider.bluegold-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg, transparent, rgba(239,201,112,.42), transparent);}

.compact-socials{display:grid;gap:8px;position:relative;z-index:4;margin-bottom:10px;}

.wuxia-social.bluegold-social{position:relative;display:flex;align-items:center;gap:10px;min-height:54px;padding:9px 12px;overflow:hidden;border:1px solid rgba(237,199,111,.30);color:#f6e7bf;background:linear-gradient(90deg, rgba(10,28,58,.78), rgba(7,18,35,.60));transition:transform .20s ease, border-color .20s ease, box-shadow .20s ease, background .20s ease;}

.wuxia-social.bluegold-social::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg, #4f96ff, #f0ca70);opacity:.90;}

.wuxia-social.bluegold-social::after{content:"";position:absolute;top:0;left:-55%;width:42%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);transform:skewX(-18deg);transition:left .38s ease;}

.wuxia-social .social-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle, rgba(255,232,182,.14), rgba(255,232,182,.03));color:#ffe2a0;font-size:13px;}

.wuxia-social .social-text b{font-size:17px;color:#fff2c9;font-weight:700;}

.wuxia-social .social-text small{display:block;max-width:130px;font-size:11px;color:#d0be98;white-space:normal;}

.wuxia-social .social-arrow{margin-left:auto;font-size:22px;line-height:1;color:#e9c36b;opacity:.80;transition:transform .20s ease, color .20s ease;}

.wuxia-social.bluegold-social:hover{transform:translateX(4px);border-color:rgba(242,203,116,.54);background:linear-gradient(90deg, rgba(18,42,83,.88), rgba(10,22,42,.68));box-shadow:0 0 14px rgba(82,145,255,.10);}

.wuxia-social.bluegold-social:hover::after{left:120%;}

.wuxia-social.bluegold-social:hover .social-arrow{transform:translateX(2px);color:#fff1ca;}

/* nút tải game hình vuông màu cam đỏ máu lửa */

.download-square-btn{
    position:relative;
    z-index:4;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    min-height:178px;
    padding:18px 14px;
    text-align:center;
    overflow:hidden;
    border:1px solid rgba(255,198,116,.60);
    background:
      radial-gradient(circle at 50% 24%, rgba(255,217,120,.28), transparent 26%),
      radial-gradient(circle at 20% 90%, rgba(255,93,30,.22), transparent 28%),
      radial-gradient(circle at 80% 6%, rgba(255,132,42,.22), transparent 24%),
      linear-gradient(180deg, rgba(211,77,22,.98) 0%, rgba(154,31,20,.96) 55%, rgba(113,18,14,.98) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,245,210,.22),
      0 14px 28px rgba(0,0,0,.28),
      0 0 18px rgba(255,95,30,.25);
    color:#fff6de;
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.download-square-btn::before{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(255,228,176,.18);
}

.download-square-btn::after{
    content:"";
    position:absolute;
    top:-24%;left:-35%;
    width:40%;height:170%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform:rotate(22deg);
    animation:shimmerSweepSoft 3.6s linear infinite;
}

.download-square-btn .btn-glow{
    position:absolute;
    inset:auto;
    width:94px;height:94px;
    top:18px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,210,114,.28), rgba(255,210,114,0));
    filter:blur(8px);
}

.download-square-btn .btn-icon{
    position:relative;
    display:grid;
    place-items:center;
    width:58px;height:58px;
    border-radius:14px;
    font-size:28px;
    line-height:1;
    color:#fff7e8;
    background:linear-gradient(180deg, rgba(255,196,95,.30), rgba(255,255,255,.06));
    border:1px solid rgba(255,224,168,.34);
    box-shadow:0 0 14px rgba(255,214,126,.18);
}

.download-square-btn .btn-label{
    position:relative;
    font-size:26px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#fff5dd;
    text-shadow:0 2px 0 rgba(92,19,0,.28), 0 0 14px rgba(255,214,125,.16);
}

.download-square-btn small{
    position:relative;
    display:block;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#ffe7bf;
    opacity:.95;
}

.download-square-btn:hover{
    transform:translateY(-2px) scale(1.01);
    filter:saturate(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,245,210,.26),
      0 18px 32px rgba(0,0,0,.32),
      0 0 22px rgba(255,95,30,.30);
}

@media (max-width:980px){
    .wuxia-topup strong{font-size:27px;}
    .wuxia-social .social-text b{font-size:15px;}
    .wuxia-social .social-text small{max-width:none;}
    .download-square-btn{min-height:156px;}
    .download-square-btn .btn-label{font-size:23px;}
}

/* ===== SIDE PANEL V6 FIXED - XANH VÀNG MÀU MÈ + HIỆU ỨNG ĐỘNG ===== */

/* ===== WUXIA TOP ACTIONS - TẢI GAME / ĐĂNG KÝ / ĐĂNG NHẬP ===== */

/* ===== WUXIA TOP ACTIONS - GỘP TRÊN BẢN SIDEPANEL V6, KHÔNG MẤT ĐOẠN CŨ ===== */

.wuxia-actions .download-card{
    background-image:
        linear-gradient(180deg, rgba(8,18,40,.42), rgba(8,18,40,.78)),
        url('assets/img/download-bg.jpg');
}

.wuxia-actions .register-card{
    background-image:
        linear-gradient(180deg, rgba(18,10,28,.34), rgba(8,18,40,.78)),
        url('assets/img/register-bg.jpg');
}

.wuxia-actions .login-card{
    background-image:
        linear-gradient(180deg, rgba(10,16,34,.34), rgba(8,18,40,.78)),
        url('assets/img/gift-bg.jpg');
}

/* ===== CARD TÂN THỦ / CODE VIP ===== */

.wuxia-actions .newbie-card{
    background-image:
        linear-gradient(180deg, rgba(14,22,45,.34), rgba(8,18,40,.78)),
        url('assets/img/gift-bg.jpg');
}

.wuxia-actions .download-card{
    background-image:
        linear-gradient(180deg, rgba(8,18,40,.42), rgba(8,18,40,.78)),
        url('assets/img/card-download-wuxia.png');
}

.wuxia-actions .register-card{
    background-image:
        linear-gradient(180deg, rgba(18,10,28,.34), rgba(8,18,40,.78)),
        url('assets/img/card-register-wuxia.png');
}

.wuxia-actions .login-card{
    background-image:
        linear-gradient(180deg, rgba(10,16,34,.34), rgba(8,18,40,.78)),
        url('assets/img/card-newbie-wuxia.png');
}

.wuxia-actions .newbie-card{
    background-image:
        linear-gradient(180deg, rgba(14,22,45,.34), rgba(8,18,40,.78)),
        url('assets/img/card-newbie-wuxia.png');
}

/* ===== TỐI ƯU HIỂN THỊ 3 ẢNH NỀN KIẾM HIỆP ===== */

/* ===== FIX HIỂN THỊ ẢNH NỀN 3 Ô - ĐÚNG PATH CHO assets/css/style.css ===== */

/* Giảm lớp phủ mặc định để hình nền hiện rõ hơn */

/* ===== CÂN BẰNG 3 CỘT: TIN TỨC / VIDEO / SỰ KIỆN + SỬA FONT ===== */

/* Dòng 5 tiện ích dưới cùng cũng cân hơn và font rõ hơn */

/* ===== FIX FONT TIẾNG VIỆT - TRÁNH LỖI DẤU / TÁCH CHỮ ===== */

/* Tiêu đề 3 ô trên */

/* Tiêu đề các panel giữa */

/* Khối sự kiện nổi bật */

/* Danh sách tin tức / sự kiện dễ đọc hơn */

/* 5 ô tính năng dưới cùng */

/* Responsive giữ chữ không vỡ */

/* ===== FONT KIẾM HIỆP HỖ TRỢ TIẾNG VIỆT - BỎ IN HOA =====
   Mục tiêu: hết lỗi nhấ t / TẢI GAME bị vỡ dấu.
   Font dùng web-safe, không cần upload font.
*/

/* Reset ép in hoa và khoảng cách chữ ở các vùng hay lỗi */

/* 3 ô Tải game / Đăng ký / Tân thủ */

/* Tiêu đề 3 panel giữa */

/* Nội dung danh sách */

/* Sự kiện nổi bật */

/* Hàng tính năng dưới cùng: không in hoa nữa */

/* Footer cũng không ép in hoa */

/* Nếu CSS cũ phía trên còn uppercase, đoạn này phải nằm cuối cùng */

/* ===== FONT KIẾM HIỆP VIẾT HOA - GIỮ UPPERCASE, KHÔNG TÁCH DẤU =====
   Sửa theo yêu cầu: vẫn viết hoa, chỉ đổi font và khóa khoảng cách chữ.
*/

/* Các tiêu đề cần giữ viết hoa */

/* 3 ô trên */

/* Tiêu đề panel giữa */

/* Nội dung vẫn dùng font dễ đọc */

/* Sự kiện nổi bật giữ chữ hoa */

/* 5 ô tính năng giữ chữ hoa */

/* ===== VIẾT HOA TIÊU ĐỀ PANEL GIỮ FONT TIẾNG VIỆT ===== */

/* ===== FIX FONT 5 Ô TÍNH NĂNG DƯỚI ===== */

/* ===== 3 HÌNH NỀN CHO TIN TỨC / VIDEO / SỰ KIỆN ===== */

.news-panel::before{
    background-image:url('assets/img/panel-news-bg.png');
    background-position:right center;
}

.video-panel::before{
    background-image:url('assets/img/panel-video-bg.png');
    background-position:center center;
}

.event-panel::before{
    background-image:url('assets/img/panel-event-bg.png');
    background-position:right center;
}

/* Làm khung trong suốt hơn để thấy hình nền */

.video-panel .video-thumb{
    background-image:
        linear-gradient(180deg, rgba(4,12,30,.28), rgba(4,12,30,.52)),
        url('assets/img/panel-video-bg.png') !important;
    background-size:cover;
    background-position:center center;
    box-shadow: inset 0 0 0 1px rgba(255,240,190,.06);
}

.event-panel .event-main{
    background-image:
        linear-gradient(180deg, rgba(4,12,30,.16), rgba(4,12,30,.54)),
        url('assets/img/panel-event-bg.png') !important;
    background-size:cover;
    background-position:center right;
}

/* sửa typo nếu còn */

.side-panel.wuxia-panel-v6{
    position:relative;
    overflow:hidden;
    padding:14px 14px 14px;
    border:1px solid rgba(247,207,112,.78);
    background:
        radial-gradient(circle at 18% 0%, rgba(82,151,255,.34), transparent 30%),
        radial-gradient(circle at 94% 12%, rgba(255,220,116,.22), transparent 30%),
        radial-gradient(circle at 50% 115%, rgba(255,105,35,.12), transparent 38%),
        linear-gradient(180deg, rgba(7,24,55,.94) 0%, rgba(5,16,36,.90) 54%, rgba(4,12,25,.86) 100%);
    box-shadow:
        0 0 0 1px rgba(255,246,214,.08) inset,
        0 18px 34px rgba(0,0,0,.34),
        0 0 24px rgba(82,145,255,.16),
        0 0 18px rgba(255,202,89,.10);
    backdrop-filter:blur(3px);
    isolation:isolate;
}

.side-panel.wuxia-panel-v6::before{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(247,207,112,.24);
    pointer-events:none;
    z-index:2;
}

.side-panel.wuxia-panel-v6::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255,255,255,.09) 18%, transparent 34%),
        repeating-linear-gradient(180deg, transparent 0 26px, rgba(255,255,255,.018) 26px 27px);
    opacity:.75;
    pointer-events:none;
    z-index:1;
    animation:panelLightMove 6s ease-in-out infinite;
}

.wuxia-corner{
    position:absolute;
    width:25px;
    height:25px;
    border-color:#ffd06f;
    opacity:.92;
    z-index:4;
    pointer-events:none;
    filter:drop-shadow(0 0 6px rgba(255,209,111,.25));
}

.corner-tl{top:7px;left:7px;border-top:2px solid;border-left:2px solid;}

.corner-tr{top:7px;right:7px;border-top:2px solid;border-right:2px solid;}

.corner-bl{bottom:7px;left:7px;border-bottom:2px solid;border-left:2px solid;}

.corner-br{bottom:7px;right:7px;border-bottom:2px solid;border-right:2px solid;}

.panel-aura,.panel-fire,.panel-spark{
    position:absolute;
    pointer-events:none;
    z-index:0;
}

.panel-aura{
    border-radius:50%;
    filter:blur(10px);
    animation:auraPulseColor 4.2s ease-in-out infinite;
}

.aura-blue{
    width:92px;
    height:92px;
    top:16px;
    right:-18px;
    background:radial-gradient(circle, rgba(72,150,255,.55), rgba(72,150,255,0));
}

.aura-gold{
    width:86px;
    height:86px;
    bottom:88px;
    left:-16px;
    background:radial-gradient(circle, rgba(255,212,95,.35), rgba(255,212,95,0));
    animation-delay:1.2s;
}

.panel-fire{
    width:54px;
    height:54px;
    border-radius:50%;
    filter:blur(8px);
    opacity:.42;
    background:radial-gradient(circle, rgba(255,111,37,.56), rgba(255,111,37,0));
    animation:firePulse 3.6s ease-in-out infinite;
}

.fire-1{right:18px;bottom:44px;}

.fire-2{left:12px;top:138px;animation-delay:1.4s;}

.panel-spark{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#ffe49c;
    box-shadow:0 0 10px rgba(255,228,156,.8);
    animation:sparkFloat 3.8s linear infinite;
}

.spark-a{top:92px;right:42px;}

.spark-b{top:232px;left:22px;animation-delay:1.1s;}

.spark-c{bottom:92px;right:58px;animation-delay:2.1s;}

.wuxia-ribbon.effect-ribbon{
    position:relative;
    z-index:5;
    width:max-content;
    margin:0 auto 10px;
    padding:5px 15px;
    border-radius:999px;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#fff5ce;
    background:
        linear-gradient(90deg, rgba(22,77,181,.98), rgba(54,116,232,.96) 48%, rgba(205,151,43,.96) 100%);
    border:1px solid rgba(255,224,139,.62);
    box-shadow:
        0 8px 16px rgba(0,0,0,.22),
        0 0 14px rgba(82,145,255,.16),
        0 0 12px rgba(255,202,89,.10);
    animation:ribbonBreath 3.4s ease-in-out infinite;
}

.wuxia-topup.effect-topup{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:108px;
    margin-bottom:12px;
    padding:12px 12px 11px;
    text-align:center;
    overflow:hidden;
    border:1px solid rgba(255,213,112,.78);
    color:#fff4cf;
    background:
        radial-gradient(circle at 50% 0%, rgba(166,215,255,.18), transparent 44%),
        linear-gradient(135deg, rgba(32,86,206,.98) 0%, rgba(18,51,126,.96) 58%, rgba(190,134,24,.94) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 10px 22px rgba(0,0,0,.28),
        0 0 18px rgba(82,145,255,.16);
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.wuxia-topup.effect-topup::before{
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid rgba(255,235,185,.18);
}

.wuxia-topup.effect-topup::after{
    content:"";
    position:absolute;
    top:-18%;
    left:-38%;
    width:40%;
    height:150%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform:rotate(18deg);
    animation:shimmerSweepSoft 3.8s linear infinite;
}

.wuxia-topup .topup-mark{
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#ffe9ac;
    opacity:.94;
}

.wuxia-topup strong{
    font-size:32px;
    line-height:1;
    text-transform:uppercase;
    color:#fff8dc;
    text-shadow:0 2px 0 rgba(50,20,0,.24), 0 0 13px rgba(255,225,140,.22);
}

.wuxia-topup em{
    font-style:normal;
    font-size:12px;
    color:#f8ebca;
}

.wuxia-topup.effect-topup:hover{
    transform:translateY(-2px) scale(1.01);
    filter:saturate(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 14px 26px rgba(0,0,0,.32),
        0 0 22px rgba(82,145,255,.22),
        0 0 18px rgba(255,202,89,.14);
}

.panel-divider.effect-divider{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    gap:8px;
    margin:8px 0 10px;
    color:#efd084;
    font-size:10px;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.panel-divider.effect-divider::before,
.panel-divider.effect-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(239,201,112,.54), transparent);
}

.compact-socials{
    display:grid;
    gap:8px;
    position:relative;
    z-index:5;
    margin-bottom:10px;
}

.wuxia-social.effect-social{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:54px;
    padding:9px 12px;
    overflow:hidden;
    border:1px solid rgba(237,199,111,.34);
    color:#f6e7bf;
    background:
        radial-gradient(circle at 8% 50%, rgba(82,145,255,.14), transparent 28%),
        linear-gradient(90deg, rgba(10,28,58,.82), rgba(7,18,35,.62));
    transition:transform .20s ease, border-color .20s ease, box-shadow .20s ease, background .20s ease;
}

.wuxia-social.effect-social::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:linear-gradient(180deg, #4f96ff, #f0ca70);
    opacity:.94;
}

.wuxia-social.effect-social::after{
    content:"";
    position:absolute;
    top:0;
    left:-55%;
    width:42%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
    transform:skewX(-18deg);
    transition:left .38s ease;
}

.wuxia-social .social-icon{
    display:grid;
    place-items:center;
    flex:0 0 29px;
    width:29px;
    height:29px;
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(255,232,182,.20), rgba(255,232,182,.03));
    color:#ffe4a4;
    font-size:13px;
    font-weight:800;
    box-shadow:0 0 10px rgba(255,222,140,.12);
}

.wuxia-social .social-text{
    display:flex;
    flex-direction:column;
    line-height:1.12;
    min-width:0;
    flex:1;
}

.wuxia-social .social-text b{
    font-size:17px;
    color:#fff3cd;
    font-weight:800;
}

.wuxia-social .social-text small{
    display:block;
    max-width:135px;
    font-size:11px;
    color:#d4c29c;
    white-space:normal;
}

.wuxia-social .social-arrow{
    margin-left:auto;
    font-size:22px;
    line-height:1;
    color:#e9c36b;
    opacity:.84;
    transition:transform .20s ease, color .20s ease;
}

.wuxia-social.effect-social:hover{
    transform:translateX(4px);
    border-color:rgba(242,203,116,.60);
    background:
        radial-gradient(circle at 10% 50%, rgba(82,145,255,.20), transparent 28%),
        linear-gradient(90deg, rgba(20,44,86,.92), rgba(10,22,42,.72));
    box-shadow:0 0 15px rgba(82,145,255,.14), 0 0 10px rgba(255,202,89,.08);
}

.wuxia-social.effect-social:hover::after{left:120%;}

.wuxia-social.effect-social:hover .social-arrow{
    transform:translateX(2px);
    color:#fff2cb;
}

.download-square-btn.effect-download{
    position:relative;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    min-height:176px;
    padding:18px 14px;
    text-align:center;
    overflow:hidden;
    border:1px solid rgba(255,198,116,.68);
    background:
      radial-gradient(circle at 50% 24%, rgba(255,224,126,.32), transparent 28%),
      radial-gradient(circle at 18% 90%, rgba(255,93,30,.24), transparent 28%),
      radial-gradient(circle at 84% 6%, rgba(255,132,42,.22), transparent 24%),
      linear-gradient(180deg, rgba(220,92,24,.98) 0%, rgba(169,39,21,.96) 55%, rgba(120,22,15,.98) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,245,210,.24),
      0 14px 28px rgba(0,0,0,.30),
      0 0 20px rgba(255,95,30,.26);
    color:#fff6de;
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.download-square-btn.effect-download::before{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(255,228,176,.20);
}

.download-square-btn.effect-download::after{
    content:"";
    position:absolute;
    top:-24%;
    left:-35%;
    width:40%;
    height:170%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
    transform:rotate(22deg);
    animation:shimmerSweepSoft 3.4s linear infinite;
}

.download-square-btn .btn-glow{
    position:absolute;
    width:96px;
    height:96px;
    top:18px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,210,114,.32), rgba(255,210,114,0));
    filter:blur(8px);
    animation:auraPulseSoft 3.4s ease-in-out infinite;
}

.download-square-btn .btn-flame{
    position:absolute;
    width:46px;
    height:46px;
    border-radius:50%;
    filter:blur(7px);
    opacity:.42;
    background:radial-gradient(circle, rgba(255,98,31,.78), rgba(255,98,31,0));
    animation:firePulse 3.4s ease-in-out infinite;
}

.download-square-btn .flame-left{left:16px;bottom:18px;}

.download-square-btn .flame-right{right:14px;top:18px;animation-delay:1.1s;}

.download-square-btn .btn-icon{
    position:relative;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:14px;
    font-size:28px;
    line-height:1;
    color:#fff7e8;
    background:linear-gradient(180deg, rgba(255,196,95,.34), rgba(255,255,255,.07));
    border:1px solid rgba(255,224,168,.38);
    box-shadow:0 0 15px rgba(255,214,126,.20);
}

.download-square-btn .btn-label{
    position:relative;
    font-size:26px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:#fff5dd;
    text-shadow:0 2px 0 rgba(92,19,0,.30), 0 0 14px rgba(255,214,125,.18);
}

.download-square-btn small{
    position:relative;
    display:block;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#ffe8bf;
    opacity:.96;
}

.download-square-btn.effect-download:hover{
    transform:translateY(-2px) scale(1.01);
    filter:saturate(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255,245,210,.28),
      0 18px 32px rgba(0,0,0,.34),
      0 0 24px rgba(255,95,30,.32),
      0 0 14px rgba(255,202,89,.12);
}

@keyframes shimmerSweepSoft{0%{left:-42%;}100%{left:130%;}}

@keyframes auraPulseSoft{0%,100%{transform:scale(1);opacity:.82;}50%{transform:scale(1.12);opacity:.52;}}

@keyframes auraPulseColor{0%,100%{transform:scale(1);opacity:.80;}50%{transform:scale(1.18);opacity:.50;}}

@keyframes firePulse{0%,100%{transform:scale(1);opacity:.42;}50%{transform:scale(1.18);opacity:.64;}}

@keyframes sparkFloat{0%{transform:translateY(0) translateX(0);opacity:0;}18%{opacity:.85;}100%{transform:translateY(-26px) translateX(10px);opacity:0;}}

@keyframes ribbonBreath{0%,100%{filter:brightness(1);}50%{filter:brightness(1.08);}}

@keyframes panelLightMove{0%,100%{opacity:.58;}50%{opacity:.86;}}

@media (max-width:980px){
    .wuxia-topup strong{font-size:27px;}
    .wuxia-social .social-text b{font-size:15px;}
    .wuxia-social .social-text small{max-width:none;}
    .download-square-btn.effect-download{min-height:156px;}
    .download-square-btn .btn-label{font-size:23px;}
}

.top-actions.wuxia-actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    margin-top:18px;
    margin-bottom:18px;
}

.wuxia-actions .wuxia-card{
    position:relative;
    min-height:196px;
    overflow:hidden;
    border:1px solid rgba(241,199,104,.55);
    background-color:#08162f;
    background-size:cover;
    background-position:center;
    box-shadow:
        0 0 0 1px rgba(255,247,223,.05) inset,
        0 16px 28px rgba(0,0,0,.28),
        0 0 18px rgba(70,130,255,.10);
    isolation:isolate;
}

.wuxia-actions .wuxia-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 22% 16%, rgba(102,171,255,.18), transparent 28%),
        linear-gradient(180deg, rgba(4,14,34,.38), rgba(4,14,34,.68)),
        linear-gradient(135deg, rgba(255,206,114,.10), transparent 35%, transparent 65%, rgba(255,206,114,.08));
    z-index:0;
}

.wuxia-actions .wuxia-card::after{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(239,201,112,.28);
    pointer-events:none;
    z-index:1;
}

.wuxia-actions .download-card{
    background-image:
        linear-gradient(180deg, rgba(8,18,40,.42), rgba(8,18,40,.78)),
        url('../img/card-download-wuxia.png');
}

.wuxia-actions .register-card{
    background-image:
        linear-gradient(180deg, rgba(18,10,28,.34), rgba(8,18,40,.78)),
        url('../img/card-register-wuxia.png');
}

.wuxia-actions .login-card{
    background-image:
        linear-gradient(180deg, rgba(10,16,34,.34), rgba(8,18,40,.78)),
        url('../img/card-newbie-wuxia.png');
}

.wuxia-actions .card-inner{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    min-height:196px;
    padding:18px 18px 16px;
}

.wuxia-actions .card-crest{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    margin-bottom:8px;
    border-radius:14px;
    border:1px solid rgba(255,224,160,.42);
    background:linear-gradient(180deg, rgba(255,209,107,.24), rgba(255,255,255,.04));
    color:#ffe7a9;
    font-size:22px;
    box-shadow:0 0 14px rgba(255,219,133,.14);
}

.wuxia-actions .wuxia-card h3{
    margin:0;
    font-size:34px;
    line-height:1;
    text-transform:uppercase;
    color:#fff0ca;
    letter-spacing:.6px;
    text-shadow:0 2px 0 rgba(0,0,0,.2), 0 0 14px rgba(255,220,139,.12);
}

.wuxia-actions .card-kicker{
    display:block;
    margin-top:8px;
    font-size:13px;
    color:#f4d584;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.wuxia-actions .card-subtitle{
    margin:8px 0 14px;
    max-width:290px;
    font-size:14px;
    line-height:1.45;
    color:#e6dcc2;
}

.wuxia-actions .action-buttons{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    width:100%;
    margin-top:auto;
}

.wuxia-actions .cta-btn{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:54px;
    padding:10px 12px;
    border:1px solid rgba(241,199,104,.42);
    background:
        linear-gradient(180deg, rgba(15,62,147,.98), rgba(10,35,84,.98));
    color:#fff2cf;
    text-decoration:none;
    overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 8px 16px rgba(0,0,0,.18);
}

.wuxia-actions .cta-btn::before{
    content:"";
    position:absolute;
    inset:3px;
    border:1px solid rgba(255,229,171,.12);
    pointer-events:none;
}

.wuxia-actions .cta-btn::after{
    content:"";
    position:absolute;
    top:-25%;
    left:-38%;
    width:42%;
    height:160%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform:rotate(20deg);
    transition:left .42s ease;
}

.wuxia-actions .cta-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(255,216,132,.66);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 12px 22px rgba(0,0,0,.24),
        0 0 14px rgba(255,207,102,.12);
    filter:saturate(1.08);
}

.wuxia-actions .cta-btn:hover::after{left:118%;}

.wuxia-actions .btn-icon{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    flex:0 0 28px;
    border-radius:8px;
    font-size:15px;
    color:#ffe7a6;
    background:linear-gradient(180deg, rgba(255,198,86,.16), rgba(255,255,255,.04));
    border:1px solid rgba(255,225,163,.22);
}

.wuxia-actions .btn-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    min-width:0;
    text-align:left;
}

.wuxia-actions .btn-copy b{
    display:block;
    font-size:18px;
    line-height:1.15;
    color:#fff1cd;
    font-weight:700;
}

.wuxia-actions .btn-copy small{
    display:block;
    font-size:11px;
    line-height:1.2;
    color:#cfc4a8;
}

.wuxia-actions .download-card .cta-btn.install,
.wuxia-actions .download-card .cta-btn.mobile{
    background:
        radial-gradient(circle at 50% 0%, rgba(255,211,112,.12), transparent 42%),
        linear-gradient(180deg, rgba(16,71,163,.98), rgba(11,40,96,.98));
}

.wuxia-actions .register-card .cta-btn.create{
    background:
        radial-gradient(circle at 50% 0%, rgba(255,214,120,.15), transparent 40%),
        linear-gradient(180deg, rgba(166,58,26,.98), rgba(109,23,18,.98));
}

.wuxia-actions .register-card .cta-btn.guide{
    background:
        radial-gradient(circle at 50% 0%, rgba(255,214,120,.12), transparent 40%),
        linear-gradient(180deg, rgba(17,88,138,.98), rgba(9,42,76,.98));
}

.wuxia-actions .login-card .cta-btn.login{
    background:
        radial-gradient(circle at 50% 0%, rgba(255,214,120,.14), transparent 40%),
        linear-gradient(180deg, rgba(22,105,176,.98), rgba(10,52,95,.98));
}

.wuxia-actions .login-card .cta-btn.secondary{
    background:
        radial-gradient(circle at 50% 0%, rgba(255,214,120,.12), transparent 40%),
        linear-gradient(180deg, rgba(111,46,127,.98), rgba(61,22,76,.98));
}

.wuxia-actions .card-particle{
    position:absolute;
    width:70px;
    height:70px;
    border-radius:50%;
    filter:blur(12px);
    opacity:.28;
    z-index:0;
    animation:wuxiaPulse 4s ease-in-out infinite;
}

.wuxia-actions .particle-1{
    top:-12px;
    left:-8px;
    background:radial-gradient(circle, rgba(74,144,255,.95), rgba(74,144,255,0));
}

.wuxia-actions .particle-2{
    right:-10px;
    top:26px;
    background:radial-gradient(circle, rgba(255,196,79,.88), rgba(255,196,79,0));
    animation-delay:1s;
}

.wuxia-actions .particle-3{
    bottom:-16px;
    right:16px;
    background:radial-gradient(circle, rgba(255,92,45,.65), rgba(255,92,45,0));
    animation-delay:2s;
}

@keyframes wuxiaPulse{
    0%,100%{transform:scale(1);opacity:.22;}
    50%{transform:scale(1.18);opacity:.38;}
}

@media (max-width: 1100px){
    .top-actions.wuxia-actions{
        grid-template-columns:1fr;
    }
    .wuxia-actions .card-inner{
        min-height:unset;
    }
}

@media (max-width: 640px){
    .wuxia-actions .wuxia-card h3{
        font-size:29px;
    }
    .wuxia-actions .action-buttons{
        grid-template-columns:1fr;
    }
    .wuxia-actions .card-subtitle{
        font-size:13px;
    }
}

.wuxia-actions .newbie-card{
    background-image:
        linear-gradient(180deg, rgba(14,22,45,.34), rgba(8,18,40,.78)),
        url('../img/card-newbie-wuxia.png');
}

.wuxia-actions .newbie-card .card-crest{
    color:#fff2b5;
    background:
        radial-gradient(circle at 50% 20%, rgba(255,232,150,.24), transparent 45%),
        linear-gradient(180deg, rgba(255,198,86,.22), rgba(255,255,255,.04));
}

.wuxia-actions .newbie-card .card-kicker{
    color:#ffd978;
}

.wuxia-actions .newbie-card .cta-btn.code-vip{
    background:
        radial-gradient(circle at 50% 0%, rgba(255,226,124,.18), transparent 40%),
        linear-gradient(180deg, rgba(192,126,26,.98), rgba(119,57,16,.98));
}

.wuxia-actions .newbie-card .cta-btn.gift-vip{
    background:
        radial-gradient(circle at 50% 0%, rgba(113,178,255,.16), transparent 40%),
        linear-gradient(180deg, rgba(21,103,176,.98), rgba(10,50,98,.98));
}

.wuxia-actions .download-card,
.wuxia-actions .register-card,
.wuxia-actions .newbie-card{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
}

.wuxia-actions .download-card::before,
.wuxia-actions .register-card::before,
.wuxia-actions .newbie-card::before{
    background:
        linear-gradient(180deg, rgba(5,12,28,.18), rgba(5,12,28,.62)),
        linear-gradient(135deg, rgba(255,206,114,.08), transparent 36%, transparent 65%, rgba(255,206,114,.06));
}

.wuxia-actions .download-card{
    background-image:
        linear-gradient(180deg, rgba(5,12,28,.16), rgba(5,12,28,.54)),
        url('../img/card-download-wuxia.png') !important;
    background-size: cover !important;
    background-position: center center !important;
}

.wuxia-actions .register-card{
    background-image:
        linear-gradient(180deg, rgba(5,12,28,.16), rgba(5,12,28,.54)),
        url('../img/card-register-wuxia.png') !important;
    background-size: cover !important;
    background-position: center center !important;
}

.wuxia-actions .newbie-card{
    background-image:
        linear-gradient(180deg, rgba(5,12,28,.16), rgba(5,12,28,.54)),
        url('../img/card-newbie-wuxia.png') !important;
    background-size: cover !important;
    background-position: center center !important;
}

.wuxia-actions .download-card::before,
.wuxia-actions .register-card::before,
.wuxia-actions .newbie-card::before{
    background:
        linear-gradient(180deg, rgba(4,14,34,.12), rgba(4,14,34,.46)),
        linear-gradient(135deg, rgba(255,206,114,.06), transparent 36%, transparent 65%, rgba(255,206,114,.05)) !important;
}

.content-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:24px;
    align-items:stretch;
    margin-top:18px;
    margin-bottom:18px;
}

.content-grid > .panel{
    display:flex;
    flex-direction:column;
    min-height:100%;
    border:1px solid rgba(233,196,107,.48);
    background:
        linear-gradient(180deg, rgba(6,17,37,.96), rgba(4,12,28,.96));
    box-shadow:
        inset 0 0 0 1px rgba(255,247,223,.04),
        0 14px 28px rgba(0,0,0,.22);
}

.content-grid .panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:64px;
    padding:14px 16px 12px;
    border-bottom:1px solid rgba(233,196,107,.22);
}

.content-grid .panel-head h3{
    margin:0;
    font-family:"Palatino Linotype","Book Antiqua","Times New Roman",serif;
    font-size:25px;
    line-height:1.1;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:#f8dfa0;
}

.content-grid .panel-head a{
    flex:0 0 auto;
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:#e7c86f;
    text-decoration:none;
}

.content-grid .panel-head a:hover{color:#fff0bf;}

.news-panel .news-list,
.event-panel .event-list{
    list-style:none;
    margin:0;
    padding:12px 14px 14px;
}

.news-panel .news-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.news-panel .news-list li{
    display:grid;
    grid-template-columns:78px 1fr auto;
    align-items:center;
    gap:10px;
    min-height:74px;
    padding:8px 0;
    border-bottom:1px solid rgba(233,196,107,.14);
}

.news-panel .news-list li:last-child{border-bottom:none;}

.news-panel .news-list img{
    width:78px;
    height:44px;
    object-fit:cover;
    border:1px solid rgba(233,196,107,.20);
}

.news-panel .news-list a{
    min-width:0;
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:16px;
    line-height:1.3;
    font-weight:600;
    color:#f6edd5;
    text-decoration:none;
}

.news-panel .news-list a:hover{color:#ffeab4;}

.news-panel .news-list a em{
    display:inline-block;
    margin-left:6px;
    padding:2px 6px;
    border-radius:3px;
    background:#d93030;
    color:#fff;
    font-style:normal;
    font-size:11px;
    line-height:1;
    font-weight:700;
    vertical-align:middle;
}

.news-panel .news-list span{
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:13px;
    font-weight:700;
    color:#e3be68;
    white-space:nowrap;
}

.video-panel{
    padding-bottom:14px;
}

.video-panel .video-thumb{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:286px;
    margin:12px 14px 12px;
    border:1px solid rgba(233,196,107,.20);
    background-size:cover;
    background-position:center;
    text-decoration:none;
}

.video-panel .video-thumb span{
    display:grid;
    place-items:center;
    width:78px;
    height:78px;
    border-radius:50%;
    border:2px solid rgba(241,205,107,.92);
    background:rgba(2,11,25,.58);
    color:#f8dfa0;
    font-size:34px;
    box-shadow:0 0 18px rgba(241,205,107,.16);
}

.video-panel .video-mini{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
    margin:0 14px;
}

.video-panel .video-mini img{
    width:100%;
    height:58px;
    object-fit:cover;
    border:1px solid rgba(233,196,107,.18);
}

.event-panel .event-main{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:182px;
    margin:12px 14px 10px;
    padding:18px;
    border:1px solid rgba(233,196,107,.20);
    background-size:cover;
    background-position:center;
    text-decoration:none;
}

.event-panel .event-main strong{
    font-family:"Palatino Linotype","Book Antiqua","Times New Roman",serif;
    font-size:29px;
    line-height:1.05;
    font-weight:700;
    text-transform:uppercase;
    color:#fff0c8;
}

.event-panel .event-main span{
    display:block;
    margin-top:8px;
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:16px;
    color:#f8efd6;
}

.event-panel .event-main em{
    display:block;
    margin-top:10px;
    font-style:normal;
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:14px;
    font-weight:700;
    color:#e8c56b;
}

.event-panel .event-list{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:auto;
}

.event-panel .event-list li{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    padding:10px 0;
    border-top:1px solid rgba(233,196,107,.14);
}

.event-panel .event-list a{
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:16px;
    line-height:1.35;
    font-weight:600;
    color:#f6edd5;
    text-decoration:none;
}

.event-panel .event-list a:hover{color:#ffeab4;}

.event-panel .event-list span{
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:13px;
    font-weight:700;
    color:#e3be68;
    white-space:nowrap;
}

.features{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:0;
    border:1px solid rgba(233,196,107,.28);
    margin-top:18px;
    margin-bottom:18px;
    background:linear-gradient(180deg, rgba(6,17,37,.96), rgba(4,12,28,.96));
}

.features > div{
    min-height:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:12px 10px;
    border-right:1px solid rgba(233,196,107,.18);
}

.features > div:last-child{border-right:none;}

.features strong{
    display:block;
    margin-bottom:4px;
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    text-transform:uppercase;
    color:#eecb72;
}

.features span{
    display:block;
    font-family:"Segoe UI",Tahoma,sans-serif;
    font-size:14px;
    line-height:1.25;
    color:#dbe3ee;
}

@media (max-width: 1180px){
    .content-grid{
        grid-template-columns:1fr;
    }
    .video-panel .video-thumb{
        min-height:240px;
    }
    .features{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 700px){
    .content-grid .panel-head h3{font-size:21px;}
    .news-panel .news-list li{
        grid-template-columns:68px 1fr;
    }
    .news-panel .news-list span{
        grid-column:2;
        justify-self:start;
    }
    .video-panel .video-mini{
        grid-template-columns:repeat(2, 1fr);
    }
    .features{
        grid-template-columns:1fr;
    }
}

:root{
    --font-vn-title: "Georgia", "Times New Roman", "DejaVu Serif", serif;
    --font-vn-ui: "Arial", "Tahoma", "Segoe UI", sans-serif;
}

.wuxia-actions .wuxia-card h3{
    font-family: var(--font-vn-title) !important;
    font-size: 30px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    font-kerning: normal;
}

.wuxia-actions .card-kicker{
    font-family: var(--font-vn-ui) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: .8px !important;
}

.wuxia-actions .card-subtitle,
.wuxia-actions .btn-copy b,
.wuxia-actions .btn-copy small{
    font-family: var(--font-vn-ui) !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.wuxia-actions .btn-copy b{
    font-size: 15px !important;
    line-height: 1.15 !important;
}

.content-grid .panel-head h3{
    font-family: var(--font-vn-title) !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    font-kerning: normal;
}

.content-grid .panel-head a,
.news-panel .news-list a,
.news-panel .news-list span,
.event-panel .event-main span,
.event-panel .event-main em,
.event-panel .event-list a,
.event-panel .event-list span,
.features strong,
.features span{
    font-family: var(--font-vn-ui) !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.event-panel .event-main strong{
    font-family: var(--font-vn-title) !important;
    font-size: 25px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    font-kerning: normal;
    overflow-wrap: anywhere;
}

.news-panel .news-list a,
.event-panel .event-list a{
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.news-panel .news-list li{
    min-height: 64px !important;
    gap: 8px !important;
}

.news-panel .news-list img{
    width: 66px !important;
    height: 38px !important;
}

.news-panel .news-list span,
.event-panel .event-list span{
    font-size: 12px !important;
}

.features strong{
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.features span{
    font-size: 13px !important;
    line-height: 1.25 !important;
}

@media (max-width: 1400px){
    .content-grid .panel-head h3{
        font-size: 20px !important;
    }
    .event-panel .event-main strong{
        font-size: 23px !important;
    }
}

:root{
    --font-wuxia-vn-title: Cambria, Constantia, "Times New Roman", "DejaVu Serif", serif;
    --font-wuxia-vn-body: Arial, Tahoma, "Segoe UI", sans-serif;
}

.wuxia-actions .wuxia-card h3,
.wuxia-actions .card-kicker,
.content-grid .panel-head h3,
.event-panel .event-main strong,
.features strong,
.site-footer h4,
.panel-head h3{
    font-family: var(--font-wuxia-vn-title) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-variant: normal !important;
    font-variant-ligatures: normal !important;
    font-kerning: normal !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
    white-space: normal !important;
}

.wuxia-actions .wuxia-card h3{
    font-size: 32px !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    color: #fff0c7 !important;
    text-shadow:
        0 2px 0 rgba(0,0,0,.34),
        0 0 12px rgba(255,218,126,.20) !important;
}

.wuxia-actions .card-kicker{
    font-family: var(--font-wuxia-vn-body) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color:#f0cf7a !important;
}

.wuxia-actions .card-subtitle,
.wuxia-actions .btn-copy b,
.wuxia-actions .btn-copy small,
.wuxia-actions .cta-btn{
    font-family: var(--font-wuxia-vn-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.wuxia-actions .btn-copy b{
    font-size: 15px !important;
    line-height: 1.16 !important;
}

.wuxia-actions .btn-copy small{
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.content-grid .panel-head h3,
.panel-head h3{
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color:#f7d890 !important;
    background: none !important;
    text-shadow:
        0 2px 0 rgba(0,0,0,.28),
        0 0 10px rgba(255,215,125,.16) !important;
}

.content-grid .panel-head a{
    font-family: var(--font-wuxia-vn-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.news-panel .news-list a,
.news-panel .news-list span,
.event-panel .event-main span,
.event-panel .event-main em,
.event-panel .event-list a,
.event-panel .event-list span{
    font-family: var(--font-wuxia-vn-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.news-panel .news-list a,
.event-panel .event-list a{
    font-size: 14px !important;
    line-height: 1.32 !important;
    font-weight: 700 !important;
}

.event-panel .event-main strong{
    font-size: 26px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    color:#fff0c7 !important;
    overflow-wrap: anywhere;
}

.features strong{
    font-family: var(--font-wuxia-vn-body) !important;
    font-size: 14px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    text-transform: none !important;
    color:#eecb72 !important;
}

.features span{
    font-family: var(--font-wuxia-vn-body) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.site-footer h4{
    font-size: 18px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

body .wuxia-actions h3,
body .content-grid h3,
body .features strong,
body .site-footer h4{
    text-transform: none !important;
}

:root{
    --font-wuxia-uppercase-title: Cambria, Constantia, "Times New Roman", "DejaVu Serif", serif;
    --font-wuxia-readable: Arial, Tahoma, "Segoe UI", sans-serif;
}

.wuxia-actions .wuxia-card h3,
.content-grid .panel-head h3,
.event-panel .event-main strong,
.features strong,
.site-footer h4,
.panel-head h3{
    font-family: var(--font-wuxia-uppercase-title) !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-variant: normal !important;
    font-variant-ligatures: normal !important;
    font-kerning: normal !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
}

.wuxia-actions .wuxia-card h3{
    font-size: 31px !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    color:#fff0c7 !important;
}

.wuxia-actions .card-kicker{
    font-family: var(--font-wuxia-readable) !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.wuxia-actions .card-subtitle,
.wuxia-actions .btn-copy b,
.wuxia-actions .btn-copy small,
.wuxia-actions .cta-btn{
    font-family: var(--font-wuxia-readable) !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.wuxia-actions .btn-copy b{
    text-transform: uppercase !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
}

.wuxia-actions .btn-copy small{
    text-transform: uppercase !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.content-grid .panel-head h3,
.panel-head h3{
    font-size: 23px !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    color:#f7d890 !important;
}

.news-panel .news-list a,
.news-panel .news-list span,
.event-panel .event-main span,
.event-panel .event-main em,
.event-panel .event-list a,
.event-panel .event-list span,
.content-grid .panel-head a{
    font-family: var(--font-wuxia-readable) !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.content-grid .panel-head a{
    text-transform: uppercase !important;
}

.event-panel .event-main strong{
    font-size: 25px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere;
}

.features strong{
    font-family: var(--font-wuxia-readable) !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color:#eecb72 !important;
}

.features span{
    font-family: var(--font-wuxia-readable) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.content-grid .panel-head h3,
.news-panel .panel-head h3,
.video-panel .panel-head h3,
.event-panel .panel-head h3{
    text-transform: uppercase !important;
    font-family: Cambria, Constantia, "Times New Roman", "DejaVu Serif", serif !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-variant: normal !important;
    font-variant-ligatures: normal !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
}

.features,
.features *{
    font-family: Arial, Tahoma, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
}

.features > div{
    min-height: 78px !important;
    padding: 12px 10px !important;
}

.features strong{
    display:block !important;
    margin-bottom: 5px !important;
    font-family: Arial, Tahoma, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    color: #f0cf73 !important;
    white-space: normal !important;
}

.features span{
    display:block !important;
    font-family: Arial, Tahoma, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    color: #dbe6f2 !important;
    white-space: normal !important;
}

.content-grid > .panel{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate;
}

.content-grid > .panel > *{
    position:relative;
    z-index:1;
}

.news-panel::before,
.video-panel::before,
.event-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    opacity:.34;
    filter:saturate(1.02) contrast(1.02);
    z-index:0;
    pointer-events:none;
}

.news-panel::after,
.video-panel::after,
.event-panel::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(2,9,23,.48) 0%, rgba(2,9,23,.62) 18%, rgba(2,9,23,.76) 55%, rgba(2,9,23,.92) 100%),
        linear-gradient(90deg, rgba(4,13,31,.84) 0%, rgba(4,13,31,.58) 42%, rgba(4,13,31,.76) 100%);
    z-index:0;
    pointer-events:none;
}

.news-panel::before{
    background-image:url('../img/panel-news-bg.png');
    background-position:right center;
}

.video-panel::before{
    background-image:url('../img/panel-video-bg.png');
    background-position:center center;
}

.event-panel::before{
    background-image:url('../img/panel-event-bg.png');
    background-position:right center;
}

.content-grid > .panel{
    background:linear-gradient(180deg, rgba(5,16,38,.78), rgba(3,10,24,.82)) !important;
}

.content-grid .panel-head{
    background:linear-gradient(180deg, rgba(8,20,45,.72), rgba(7,16,34,.36)) !important;
    backdrop-filter: blur(1px);
}

.news-panel .news-list,
.event-panel .event-list,
.video-panel .video-mini{
    background:transparent !important;
}

.news-panel .news-list li,
.event-panel .event-list li{
    background:rgba(3,10,24,.18);
}

.video-panel .video-thumb{
    background-image:
        linear-gradient(180deg, rgba(4,12,30,.28), rgba(4,12,30,.52)),
        url('../img/panel-video-bg.png') !important;
    background-size:cover;
    background-position:center center;
    box-shadow: inset 0 0 0 1px rgba(255,240,190,.06);
}

.event-panel .event-main{
    background-image:
        linear-gradient(180deg, rgba(4,12,30,.16), rgba(4,12,30,.54)),
        url('../img/panel-event-bg.png') !important;
    background-size:cover;
    background-position:center right;
}

.features span{letter-spacing:0 !important;}

/* ===== FIX DỨT ĐIỂM: ẢNH NỀN 3 PANEL BỊ LỚP KHÁC CHE =====
   Lý do bản trước có thể chưa hiện:
   - Ảnh đặt trong ::before nhưng bị ::after / background panel / overlay quá tối che.
   - Bản này gắn ảnh trực tiếp vào chính panel và tắt pseudo overlay cũ.
*/

/* Tắt 2 lớp pseudo trước đó để không che ảnh */

.content-grid .news-panel::before,
.content-grid .news-panel::after,
.content-grid .video-panel::before,
.content-grid .video-panel::after,
.content-grid .event-panel::before,
.content-grid .event-panel::after{
    display:none !important;
    content:none !important;
    background:none !important;
    opacity:0 !important;
    visibility:hidden !important;
}

/* Gắn ảnh trực tiếp vào panel */

.content-grid .news-panel{
    background-image:
        linear-gradient(180deg, rgba(2,9,22,.40), rgba(2,9,22,.72)),
        url('../img/panel-news-bg.png') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.content-grid .video-panel{
    background-image:
        linear-gradient(180deg, rgba(2,9,22,.36), rgba(2,9,22,.70)),
        url('../img/panel-video-bg.png') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

.content-grid .event-panel{
    background-image:
        linear-gradient(180deg, rgba(2,9,22,.38), rgba(2,9,22,.72)),
        url('../img/panel-event-bg.png') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

/* Cho nền bên trong trong suốt hơn để thấy hình */

.content-grid > .panel{
    background-color:transparent !important;
    overflow:hidden !important;
}

.content-grid .panel-head{
    background:rgba(2,9,22,.48) !important;
}

.news-panel .news-list,
.video-panel .video-mini,
.event-panel .event-list{
    background:transparent !important;
}

.news-panel .news-list li,
.event-panel .event-list li{
    background:rgba(2,9,22,.18) !important;
}

/* Khung video chính và event chính cũng dùng ảnh trực tiếp */

.video-panel .video-thumb{
    background-image:
        linear-gradient(180deg, rgba(2,9,22,.20), rgba(2,9,22,.42)),
        url('../img/panel-video-bg.png') !important;
    background-size:cover !important;
    background-position:center center !important;
}

.event-panel .event-main{
    background-image:
        linear-gradient(180deg, rgba(2,9,22,.18), rgba(2,9,22,.48)),
        url('../img/panel-event-bg.png') !important;
    background-size:cover !important;
    background-position:center center !important;
}

/* Tăng tương phản chữ để ảnh nền hiện nhưng chữ vẫn đọc được */

.content-grid .panel-head h3,
.news-panel .news-list a,
.event-panel .event-list a,
.event-panel .event-main strong{
    text-shadow:0 2px 4px rgba(0,0,0,.75), 0 0 12px rgba(0,0,0,.35) !important;
}

/* =====================================================================
   TLTD GLOBAL OPTIMIZE V30 - FONT TIẾNG VIỆT + BỐ CỤC ĐỒNG BỘ
   ===================================================================== */

html, body,
body *,
input, textarea, select, button{
    font-family: Tahoma, Arial, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-variant: normal !important;
    font-variant-ligatures: normal !important;
    font-kerning: normal !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
}

body{
    background:#050b16 !important;
    color:#e8dfc9 !important;
}

h1,h2,h3,h4,h5,h6,
.nav a,
.btn,
button,
.panel-head h3,
.card h3,
.site-footer h4{
    letter-spacing:0 !important;
    word-spacing:0 !important;
    text-transform:uppercase;
}

/* Chống lỗi dấu tiếng Việt khi tiêu đề viết hoa */

h1,h2,h3,h4,
.panel-head h3,
.page-panel h2,
.detail-panel h1,
.detail-panel h2{
    line-height:1.18 !important;
}

/* Đồng bộ khung trang thông thường */

.page-panel,
.detail-panel,
.tltd-page-panel{
    position:relative;
    border:1px solid rgba(239,199,103,.46) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(77,144,255,.10), transparent 30%),
        linear-gradient(180deg, rgba(6,18,40,.94), rgba(4,12,28,.96)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,247,220,.04),
        0 16px 30px rgba(0,0,0,.22) !important;
}

.page-panel::before,
.detail-panel::before,
.tltd-page-panel::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(239,199,103,.13);
    pointer-events:none;
}

.page-panel h2,
.detail-panel h1,
.detail-panel h2{
    color:#f6d58b !important;
    font-weight:900 !important;
}

.page-panel p,
.detail-panel p,
.detail-panel li{
    color:#e4dac5 !important;
    line-height:1.65 !important;
}

.nice-list,
.tltd-list{
    list-style:none !important;
    margin:14px 0 0 !important;
    padding:0 !important;
    display:grid !important;
    gap:10px !important;
}

.nice-list li,
.tltd-list li{
    position:relative !important;
    padding:11px 12px 11px 36px !important;
    border:1px solid rgba(239,199,103,.18) !important;
    background:rgba(3,10,24,.42) !important;
    color:#e9dfc6 !important;
    line-height:1.55 !important;
}

.nice-list li::before,
.tltd-list li::before{
    content:"✦";
    position:absolute;
    left:13px;
    top:11px;
    color:#f3c96d;
}

/* Nút cam chung */

.tltd-orange-btn,
a.tltd-orange-btn,
button.tltd-orange-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border:1px solid rgba(255,211,128,.68);
    background:
        radial-gradient(circle at 50% 0%, rgba(255,232,149,.22), transparent 43%),
        linear-gradient(180deg, #fb8a2e 0%, #c43a21 55%, #841b13 100%);
    color:#fff6df !important;
    text-decoration:none !important;
    font-weight:900 !important;
    text-transform:uppercase;
    overflow:hidden;
}

.tltd-orange-btn::after{
    content:"";
    position:absolute;
    top:-30%;
    left:-42%;
    width:44%;
    height:170%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
    transform:rotate(22deg);
    transition:left .42s ease;
}

.tltd-orange-btn:hover::after{left:122%;}

/* Detail article */

.detail-img{
    width:100%;
    max-height:430px;
    object-fit:cover;
    border:1px solid rgba(239,199,103,.28);
}

.detail-meta{
    color:#e8c56b !important;
    font-weight:800;
}

@media(max-width:768px){
    .page-panel,
    .detail-panel,
    .tltd-page-panel{
        padding:18px !important;
    }
}