:root{
  --bg:#0b0e0f;--bg2:#101519;--panel:rgba(20,19,16,.72);
  --gold:#d8aa58;--gold2:#f4d98f;--cream:#f7edd7;--red:#a72d20;
  --muted:#a7a097;--line:rgba(218,174,93,.22);
  --display:"Cormorant Garamond",Georgia,serif;--ui:"Be Vietnam Pro",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--ui);overflow-x:hidden}
a{text-decoration:none;color:inherit}.shell{width:min(1220px,calc(100% - 42px));margin:auto}

.hero-v5{position:relative;width:100%;background:#0c1114;overflow:hidden}
.hero-art{display:block;width:100%;height:auto;min-height:560px;object-fit:cover;object-position:center top;user-select:none;-webkit-user-drag:none}
.hero-hotspots{position:absolute;inset:0;z-index:5}
.hotspot{position:absolute;display:block;border:1px solid transparent;border-radius:8px;transition:.18s;background:transparent}
.hotspot:hover{border-color:rgba(255,220,130,.28);background:rgba(255,221,130,.045);box-shadow:0 0 22px rgba(255,196,73,.08)}
.hs-news{left:47.2%;top:1.4%;width:4.2%;height:5.2%}
.hs-activities{left:51.7%;top:1.4%;width:5.7%;height:5.2%}
.hs-features{left:57.5%;top:1.4%;width:5%;height:5.2%}
.hs-guide{left:63.3%;top:1.4%;width:5.4%;height:5.2%}
.hs-about{left:69.4%;top:1.4%;width:5.4%;height:5.2%}
.hs-login{left:76.2%;top:1.1%;width:6.1%;height:5.8%}
.hs-register{left:82.6%;top:1.1%;width:6.1%;height:5.8%}
.hs-download{left:17.0%;top:57.6%;width:14.5%;height:7.4%}
.hs-account{left:32.0%;top:57.6%;width:15.5%;height:7.4%}
.hs-center{left:17.5%;top:65.7%;width:8.8%;height:4%}
.hs-zalo{left:28.3%;top:65.7%;width:9.8%;height:4%}
.hs-act1{left:62.2%;top:40.0%;width:25.8%;height:7.1%}
.hs-act2{left:62.2%;top:47.5%;width:25.8%;height:7.1%}
.hs-act3{left:62.2%;top:55.0%;width:25.8%;height:7.1%}
.hs-act4{left:62.2%;top:62.4%;width:25.8%;height:7.1%}
.hs-actall{left:62.2%;top:69.7%;width:25.8%;height:6.3%}
.hs-scroll{left:45.2%;top:89.5%;width:9.6%;height:7%}
.mobile-cta{display:none}

.notice-strip{background:rgba(13,15,15,.97);border-top:1px solid rgba(218,174,93,.18);border-bottom:1px solid rgba(218,174,93,.18)}
.notice-inner{min-height:56px;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px}
.notice-badge{font-size:8px;letter-spacing:.12em;font-weight:700;background:var(--gold);color:#211708;border-radius:4px;padding:7px 10px}
.notice-dot{width:5px;height:5px;background:#c84431;border-radius:50%}.notice-inner div{font-size:10px;color:#c5b9a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notice-inner>a{font-size:9px;color:var(--gold2);font-weight:700}

.section{padding:88px 0;position:relative}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:32px}.section-head.centered{justify-content:center;text-align:center}.section-head.centered>div{max-width:720px}.kicker{font-size:9px;font-weight:700;letter-spacing:.18em;color:#c69b51}.section-head h2,.community h2{font:600 clamp(36px,4vw,52px)/1 var(--display);margin:8px 0;color:#f2e6d0}.section-head p{font-size:11px;color:#8f877e;margin:10px 0 0}.section-link{font-size:8px;font-weight:700;letter-spacing:.08em;color:#cda455;border:1px solid rgba(218,174,93,.22);padding:10px 14px;border-radius:7px}

.section-news{background:linear-gradient(180deg,#0b0e0f,#0d1113 70%,#0b0e0f)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.news-card{min-height:210px;padding:24px;border:1px solid rgba(218,174,93,.16);border-radius:12px;background:linear-gradient(155deg,rgba(234,194,117,.055),transparent 45%),rgba(21,23,23,.86);box-shadow:0 16px 40px rgba(0,0,0,.14);transition:.22s}.news-card:hover{transform:translateY(-4px);border-color:rgba(218,174,93,.36);background-color:rgba(27,28,27,.9)}.news-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.news-tag{font-size:7px;letter-spacing:.12em;font-weight:700;color:#d6ac62;border:1px solid rgba(218,174,93,.2);border-radius:999px;padding:4px 8px}.news-date{font-size:8px;color:#6f6a64}.news-card h3{font:600 22px/1.12 var(--display);margin:18px 0 9px;color:#f0e4ce}.news-card p{font-size:10px;line-height:1.7;color:#8e877e;min-height:52px}.readmore{font-size:8px;font-weight:700;color:#cda354}.loading-card{grid-column:1/-1;min-height:190px;display:flex;align-items:center;justify-content:center;gap:12px;color:#8c857c;font-size:10px}.loading-card i{width:24px;height:24px;border:2px solid rgba(218,174,93,.12);border-top-color:#cda455;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

.section-activities{background:radial-gradient(circle at 50% 0,rgba(73,112,123,.09),transparent 35%),#0b0e0f;border-top:1px solid rgba(218,174,93,.08);border-bottom:1px solid rgba(218,174,93,.08)}
.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.activity-card{position:relative;min-height:225px;padding:26px;border:1px solid rgba(218,174,93,.15);border-radius:12px;background:linear-gradient(145deg,rgba(221,182,109,.045),transparent 46%),rgba(20,22,21,.78);overflow:hidden;transition:.22s}.activity-card:hover{transform:translateY(-4px);border-color:rgba(218,174,93,.34)}.activity-card>span{position:absolute;right:16px;top:9px;font:600 36px var(--display);color:rgba(218,174,93,.055)}.activity-card i{display:grid;place-items:center;width:45px;height:45px;border:1px solid rgba(218,174,93,.2);border-radius:10px;color:#ddb362;background:rgba(218,174,93,.045);font-style:normal;font-size:20px}.activity-card h3{font:600 21px var(--display);margin:15px 0 7px}.activity-card p{font-size:9px;line-height:1.65;color:#817a73;min-height:48px}.activity-card b{font-size:7px;letter-spacing:.08em;color:#c49950}

.section-features{background:#0c0f10}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-card{position:relative;min-height:235px;padding:27px;border:1px solid rgba(218,174,93,.14);border-radius:12px;background:rgba(20,21,20,.78);overflow:hidden}.feature-card>strong{position:absolute;right:14px;top:-9px;font:600 95px var(--display);color:rgba(218,174,93,.045)}.feature-card>span,.feature-card div>span{font-size:7px;font-weight:700;letter-spacing:.16em;color:#c2934b}.feature-card h3{font:600 23px var(--display);margin:8px 0;color:#ebdfca}.feature-card p{font-size:9px;line-height:1.72;color:#807970}.feature-main{grid-row:span 2;min-height:484px;display:flex;flex-direction:column;justify-content:flex-end;background:radial-gradient(circle at 50% 18%,rgba(129,54,34,.17),transparent 32%),rgba(20,20,19,.82)}.feature-main h3{font-size:34px}.feature-main>strong{font-size:215px;right:-20px;top:9px}.feature-wide{grid-column:span 2;display:flex;align-items:center;justify-content:space-between}.feature-wide>strong{position:static;display:grid;place-items:center;width:118px;height:118px;border:1px solid rgba(218,174,93,.17);font-size:72px;color:#a97934;background:rgba(218,174,93,.02);transform:rotate(3deg)}

.section-guide{background:linear-gradient(180deg,#0e1112,#0b0e0f)}.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(218,174,93,.16);border-radius:12px;overflow:hidden}.steps a{position:relative;min-height:225px;padding:26px 22px;background:rgba(20,21,20,.75);border-right:1px solid rgba(218,174,93,.11);transition:.2s}.steps a:last-child{border-right:0}.steps a:hover{background:rgba(28,28,26,.9)}.steps a>span{position:absolute;right:14px;top:8px;font:600 30px var(--display);color:rgba(218,174,93,.055)}.steps i{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(218,174,93,.2);border-radius:50%;font:normal 600 22px var(--display);color:#d0a454;margin-bottom:18px}.steps h3{font:600 19px var(--display);margin:0 0 7px}.steps p{font-size:9px;line-height:1.65;color:#7f7971;min-height:46px}.steps b{font-size:7px;color:#c2954a}

.community{padding:26px 0 84px;background:#0b0e0f}.community-inner{padding:40px 42px;border:1px solid rgba(218,174,93,.18);border-radius:14px;background:radial-gradient(circle at 82% 50%,rgba(138,47,31,.14),transparent 28%),rgba(20,20,19,.8);display:flex;align-items:center;justify-content:space-between;gap:28px}.community h2{font-size:36px;margin:7px 0}.community p{font-size:9px;color:#817a72}.community-buttons{display:flex;gap:9px;flex-wrap:wrap}.btn-zalo,.btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border-radius:8px;font-size:8px;font-weight:700;letter-spacing:.05em}.btn-zalo{background:linear-gradient(135deg,#0872d6,#19a0f3);color:#fff}.btn-outline{border:1px solid rgba(218,174,93,.26);color:#d3aa62}

footer{background:#080a0b;border-top:1px solid rgba(218,174,93,.12)}.footer-inner{min-height:90px;display:flex;align-items:center;gap:18px;font-size:8px;color:#625e58}.footer-inner b{font:600 16px var(--display);color:#dec486}.footer-inner p{margin-left:auto}.footer-inner a{color:#a78043}.floating-zalo{position:fixed;z-index:30;right:17px;bottom:17px;background:linear-gradient(135deg,#075fcb,#148df7);color:#fff;border:1px solid rgba(142,210,255,.35);border-radius:999px;padding:10px 13px;font-size:8px;box-shadow:0 12px 32px rgba(0,70,150,.28)}

@media(max-width:980px){
  .hero-art{min-height:0}
  .hotspot{display:none}
  .mobile-cta{display:block;position:absolute;left:18px;right:18px;bottom:18px;z-index:8;padding:18px;border:1px solid rgba(244,217,143,.35);border-radius:12px;background:rgba(15,15,14,.68);backdrop-filter:blur(10px)}
  .mobile-brand{font:600 30px var(--display);color:#f3d48b}.mobile-cta p{margin:3px 0 12px;font-size:9px;color:#ddd0bd}.mobile-cta>div:last-child{display:flex;gap:8px}.mobile-cta a{flex:1;text-align:center;padding:11px 8px;border-radius:7px;font-size:8px;font-weight:700}.m-gold{background:#e0ae51;color:#261803}.m-red{background:#a62d20;color:#fff1df}
  .news-grid{grid-template-columns:1fr 1fr}.news-card:first-child{grid-column:1/-1}
  .activity-grid,.feature-grid{grid-template-columns:1fr 1fr}.feature-main{grid-row:auto;min-height:310px}.feature-wide{grid-column:1/-1}.steps{grid-template-columns:1fr 1fr}.steps a:nth-child(2){border-right:0}.steps a:nth-child(-n+2){border-bottom:1px solid rgba(218,174,93,.11)}
}
@media(max-width:650px){
  .shell{width:min(100% - 26px,1220px)}.notice-inner{grid-template-columns:auto auto 1fr}.notice-inner>a{display:none}.section{padding:64px 0}.section-head{align-items:flex-start;flex-direction:column}.section-head h2{font-size:36px}.news-grid,.activity-grid,.feature-grid{grid-template-columns:1fr}.news-card:first-child{grid-column:auto}.feature-wide{grid-column:auto}.feature-wide>strong{display:none}.steps{grid-template-columns:1fr}.steps a{border-right:0!important;border-bottom:1px solid rgba(218,174,93,.11)}.steps a:last-child{border-bottom:0}.community-inner{padding:28px;align-items:flex-start;flex-direction:column}.footer-inner{padding:24px 0;align-items:flex-start;flex-direction:column}.footer-inner p{margin-left:0}.floating-zalo b{display:none}
}


/* ===== NHẠC NỀN RANDOM ===== */
.music-player{
  position:fixed;z-index:31;left:17px;bottom:17px;
  display:flex;align-items:center;gap:7px;
  min-height:45px;padding:6px 10px 6px 7px;
  border:1px solid rgba(218,174,93,.28);
  border-radius:999px;
  background:rgba(10,13,14,.68);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.music-btn{
  width:33px;height:33px;border-radius:50%;
  border:1px solid rgba(218,174,93,.24);
  background:rgba(218,174,93,.08);
  color:#f2d285;cursor:pointer;font-size:14px;
  display:grid;place-items:center;
  transition:.18s ease;
}
.music-btn:hover{background:rgba(218,174,93,.18);border-color:rgba(218,174,93,.45)}
.music-next{font-family:Georgia,serif;font-weight:700}
.music-info{display:flex;flex-direction:column;line-height:1.1;min-width:92px;max-width:155px}
.music-info span{font-size:6px;letter-spacing:.15em;color:#a88e62;font-weight:700}
.music-info b{margin-top:4px;font-size:8px;color:#eadbbd;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-player.is-muted .music-info{opacity:.55}

@media(max-width:650px){
  .music-player{left:12px;bottom:12px;padding-right:7px}
  .music-info{display:none}
  .music-next{display:none}
}

.music-license{
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  color:#bda36f;font-size:11px;border:1px solid rgba(218,174,93,.16);
  opacity:.85;transition:.18s
}
.music-license:hover{color:#f1d18c;border-color:rgba(218,174,93,.38)}
@media(max-width:650px){.music-license{display:none}}


/* ==========================================================
   HERO V5.4 - NỀN SẠCH + HTML/CSS THẬT
   ========================================================== */
.hero-v5{display:none!important}

.hero-v54{
  position:relative;
  min-height:900px;
  overflow:hidden;
  isolation:isolate;
  background:#0b1014;
}
.hero-bg{
  position:absolute;inset:0;z-index:-3;
  background-image:url("images/home-hero-clean-v54.jpg");
  background-size:cover;
  background-position:center center;
  transform:scale(1.01);
}
.hero-shade{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(8,12,14,.56) 0%,rgba(8,12,14,.24) 31%,rgba(8,12,14,.02) 57%,rgba(8,12,14,.08) 100%),
    linear-gradient(180deg,rgba(6,11,16,.12) 0%,rgba(6,11,16,.01) 40%,rgba(6,11,16,.14) 100%);
}
.hero-shell{
  width:min(1280px,calc(100% - 54px));
  margin:0 auto;
}
.topbar{
  height:78px;
  background:rgba(15,25,35,.82);
  -webkit-backdrop-filter:blur(11px);
  backdrop-filter:blur(11px);
  border-bottom:1px solid rgba(231,192,113,.28);
}
.nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:26px;
}
.brand{
  display:flex;align-items:center;gap:12px;min-width:270px;
}
.brand-mark{
  width:47px;height:47px;
  display:grid;place-items:center;
  border:1px solid rgba(239,203,126,.72);
  transform:rotate(45deg);
  color:#f2d28d;
  font:700 21px var(--display);
  box-shadow:inset 0 0 0 5px rgba(216,170,88,.05);
}
.brand-mark::first-letter{transform:rotate(-45deg)}
.brand-copy{display:flex;flex-direction:column}
.brand-copy strong{
  font:600 24px/1 var(--display);
  letter-spacing:.04em;color:#f3dfaa;
}
.brand-copy small{
  margin-top:6px;
  font-size:7px;letter-spacing:.24em;
  color:#e0b968;font-weight:700;
}
.main-nav{
  margin-left:auto;
  display:flex;align-items:center;gap:36px;
}
.main-nav a{
  font:600 15px var(--display);
  color:#f3eadb;
  transition:.18s;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.main-nav a:hover{color:#f2cf7a}
.auth-nav{display:flex;gap:10px;margin-left:8px}
.btn-login,.btn-register{
  min-width:105px;height:45px;
  display:flex;align-items:center;justify-content:center;
  border-radius:7px;
  font:600 14px var(--display);
}
.btn-login{
  border:1px solid rgba(224,180,92,.5);
  background:rgba(35,31,24,.42);
  color:#f1d487;
}
.btn-register{
  background:linear-gradient(180deg,#f3d682,#d79c3b);
  border:1px solid #ffd986;
  color:#231706;
  box-shadow:inset 0 1px rgba(255,255,255,.45),0 8px 24px rgba(0,0,0,.17);
}
.menu-toggle{display:none}

.hero-layout{
  min-height:750px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.72fr);
  align-items:center;
  gap:72px;
  padding-top:45px;
  padding-bottom:90px;
}
.hero-copy{
  padding-left:32px;
  max-width:700px;
}
.server-label{
  display:flex;align-items:center;gap:15px;
  color:#eed49a;
  font:700 14px var(--display);
  letter-spacing:.11em;
  margin-bottom:10px;
}
.server-label span{
  width:54px;height:1px;background:linear-gradient(90deg,transparent,#d7ad5d);
}
.server-label span:last-child{background:linear-gradient(90deg,#d7ad5d,transparent)}

.hero-title-wrap{
  display:flex;align-items:center;gap:18px;
}
.hero-title-wrap h1{
  margin:0;
  font:italic 600 clamp(72px,7vw,118px)/.88 var(--display);
  letter-spacing:-.055em;
  background:linear-gradient(180deg,#fff1bd 0%,#efcb78 42%,#b8792e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.45));
  white-space:nowrap;
}
.red-seal{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:46px;min-height:96px;
  padding:7px 5px;
  border-radius:7px;
  background:linear-gradient(180deg,#b8120d,#86100e);
  color:#fff4df;
  text-align:center;
  font:700 11px/1.4 var(--display);
  box-shadow:inset 0 0 0 1px rgba(255,208,129,.25),0 8px 22px rgba(0,0,0,.24);
}
.hero-copy h2{
  margin:22px 0 0;
  font:600 27px/1.05 var(--display);
  letter-spacing:.015em;
  color:#f1d38b;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.hero-rule{
  margin:15px 0 14px;
  width:390px;height:1px;
  background:linear-gradient(90deg,#d4a857,rgba(212,168,87,.2),transparent);
}
.hero-copy>p{
  margin:0;
  font-size:13px;
  line-height:1.75;
  color:#fff9ef;
  text-shadow:0 2px 7px rgba(0,0,0,.8);
}
.hero-actions{
  display:flex;gap:14px;
  margin-top:25px;
}
.hero-btn{
  width:245px;height:72px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  border-radius:6px;
  position:relative;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.25);
}
.hero-btn::before{
  content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.15);border-radius:4px;pointer-events:none;
}
.hero-btn.download{
  background:linear-gradient(180deg,#f5d579,#dda243);
  color:#281a07;border:1px solid #ffe09b;
}
.hero-btn.account{
  background:linear-gradient(180deg,#c63a25,#9d2018);
  color:#fff3db;border:1px solid #e35e42;
}
.hero-btn-icon{
  font-size:27px;line-height:1;
}
.hero-btn span:last-child{display:flex;flex-direction:column;align-items:flex-start}
.hero-btn small{
  font-size:7px;letter-spacing:.12em;font-weight:700;
}
.hero-btn b{
  margin-top:4px;
  font-size:15px;letter-spacing:.015em;
}
.hero-links{
  margin-top:15px;
  display:flex;align-items:center;gap:17px;
}
.hero-links a{
  font-size:10px;color:#fff7e9;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}
.hero-links a span{color:#edce82;margin-right:5px}
.hero-links i{width:1px;height:16px;background:rgba(246,224,184,.45)}

.featured-panel{
  width:100%;
  max-width:475px;
  justify-self:end;
  margin-top:70px;
  border-radius:14px;
  border:1px solid rgba(238,194,106,.68);
  background:linear-gradient(135deg,rgba(34,31,26,.36),rgba(12,16,18,.24));
  -webkit-backdrop-filter:blur(7px) saturate(112%);
  backdrop-filter:blur(7px) saturate(112%);
  box-shadow:inset 0 1px rgba(255,229,174,.12),0 25px 60px rgba(0,0,0,.18);
  padding:21px 24px 12px;
  color:#fff;
}
.featured-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:16px;
  border-bottom:1px solid rgba(237,200,130,.32);
}
.featured-head small{
  color:#dfbc74;font-size:8px;font-weight:700;letter-spacing:.18em;
}
.featured-head h3{
  margin:4px 0 0;
  font:600 21px var(--display);
  color:#fff6e5;
}
.online{
  display:flex;align-items:center;gap:6px;
  color:#62ed7e;font-size:8px;font-weight:700;
}
.online span{
  width:8px;height:8px;border-radius:50%;
  background:#48e56c;box-shadow:0 0 0 3px rgba(63,229,104,.16),0 0 10px rgba(63,229,104,.7);
}
.activity-row{
  min-height:71px;
  display:grid;
  grid-template-columns:44px 1fr 18px;
  align-items:center;
  gap:14px;
  border-bottom:1px solid rgba(235,202,140,.22);
}
.activity-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:8px;
  border:1px solid rgba(225,182,91,.43);
  background:rgba(73,54,26,.26);
  color:#f3d47c;
  font-size:20px;
}
.activity-text{display:flex;flex-direction:column;min-width:0}
.activity-text b{
  font:600 16px var(--display);color:#fff7e9;
}
.activity-text small{
  margin-top:3px;font-size:8px;color:#ddd2c2;
}
.activity-arrow{
  font-size:28px;color:#f1cf70;text-align:right;
}
.activity-all{
  min-height:46px;
  display:flex;align-items:center;justify-content:space-between;
  color:#f4d270;
  font:600 13px var(--display);
}
.activity-all b{font-size:19px}

.scroll-cue{
  position:absolute;left:50%;bottom:24px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  color:#fff4db;text-shadow:0 2px 7px rgba(0,0,0,.75);
}
.scroll-cue span{
  font-size:7px;letter-spacing:.13em;
}
.scroll-cue b{
  margin-top:3px;font-size:22px;color:#f0ca68;
}

@media(max-width:1100px){
  .main-nav{gap:20px}
  .brand{min-width:230px}
  .hero-layout{grid-template-columns:1fr 420px;gap:30px}
  .hero-copy{padding-left:0}
  .hero-title-wrap h1{font-size:78px}
}
@media(max-width:900px){
  .hero-v54{min-height:860px}
  .topbar{height:68px}
  .main-nav,.auth-nav{display:none}
  .menu-toggle{
    display:block;margin-left:auto;
    width:44px;height:40px;
    border:1px solid rgba(226,184,97,.4);
    border-radius:7px;background:rgba(21,24,25,.6);
    color:#f0d18a;font-size:22px;
  }
  .nav-inner.mobile-open{
    position:relative;
  }
  .nav-inner.mobile-open .main-nav{
    display:flex;position:absolute;left:0;right:0;top:68px;
    flex-direction:column;align-items:stretch;gap:0;
    padding:10px 18px;background:rgba(12,18,22,.96);
    border-bottom:1px solid rgba(226,184,97,.25);
  }
  .nav-inner.mobile-open .main-nav a{
    padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.06);
  }
  .hero-layout{
    min-height:auto;
    grid-template-columns:1fr;
    padding-top:100px;padding-bottom:130px;
  }
  .hero-copy{max-width:650px}
  .featured-panel{
    justify-self:start;
    margin-top:10px;
    max-width:600px;
  }
}
@media(max-width:620px){
  .hero-v54{min-height:920px}
  .hero-shell{width:min(100% - 28px,1280px)}
  .brand-copy strong{font-size:19px}
  .brand{min-width:0}
  .brand-mark{width:39px;height:39px;font-size:17px}
  .hero-layout{padding-top:70px}
  .hero-title-wrap h1{
    white-space:normal;
    font-size:59px;
  }
  .red-seal{width:39px;min-height:82px;font-size:9px}
  .hero-copy h2{font-size:22px}
  .hero-copy>p br{display:none}
  .hero-actions{flex-direction:column}
  .hero-btn{width:100%;max-width:340px}
  .hero-links{flex-wrap:wrap}
  .hero-links i{display:none}
  .featured-panel{
    padding:17px 16px 8px;
    background:linear-gradient(135deg,rgba(34,31,26,.42),rgba(12,16,18,.31));
  }
  .activity-row{min-height:64px}
  .activity-text b{font-size:15px}
}


/* ==========================================================
   V5.4.1 - CĂN NỀN THEO TỶ LỆ MÀN HÌNH
   Giữ nhân vật, vùng chữ và phong cảnh đẹp ở nhiều độ phân giải.
   ========================================================== */

/* Desktop phổ biến 16:9 / 16:10 */
.hero-bg{
  background-size:cover;
  background-position:50% 50%;
}

/* Màn hình siêu rộng: tránh mất hai bên quá nhiều */
@media (min-aspect-ratio: 21/9){
  .hero-bg{
    background-position:50% 48%;
  }
}

/* Laptop 16:10, 3:2 hoặc cửa sổ trình duyệt hơi hẹp:
   dịch tâm sang trái để giữ kiếm khách + vùng nội dung */
@media (max-aspect-ratio: 16/10) and (min-width: 901px){
  .hero-bg{
    background-position:45% 50%;
  }
}

/* Tablet ngang */
@media (max-width: 900px) and (min-width: 621px){
  .hero-bg{
    background-position:39% 50%;
  }
}

/* Điện thoại: ưu tiên nhân vật và vùng trung tâm bên trái */
@media (max-width: 620px){
  .hero-bg{
    background-position:30% 50%;
  }
}

/* Điện thoại rất hẹp */
@media (max-width: 390px){
  .hero-bg{
    background-position:27% 50%;
  }
}


/* ==========================================================
   V5.8 COMPACT - RÚT NGẮN PHẦN DƯỚI TRANG
   Không đụng hero. Giảm chiều cao card + khoảng cách section.
   ========================================================== */
@media (min-width: 901px){
  .section{
    padding:54px 0;
  }

  .section-head{
    margin-bottom:22px;
  }

  .section-head h2,
  .community h2{
    font-size:clamp(32px,3.2vw,44px);
  }

  .section-head p{
    margin-top:7px;
  }

  /* Tin tức: giảm khoảng 35% chiều cao */
  .news-grid{
    gap:12px;
  }

  .news-card{
    min-height:148px;
    padding:17px 20px;
    border-radius:10px;
  }

  .news-card h3{
    font-size:19px;
    margin:11px 0 6px;
    line-height:1.08;
  }

  .news-card p{
    min-height:30px;
    margin:0 0 8px;
    line-height:1.45;
    font-size:9px;
  }

  .news-tag{
    padding:3px 7px;
    font-size:6px;
  }

  .readmore{
    font-size:7px;
  }

  .loading-card{
    min-height:135px;
  }

  /* Hoạt động */
  .activity-grid{
    gap:11px;
  }

  .activity-card{
    min-height:164px;
    padding:18px 20px;
  }

  .activity-card i{
    width:38px;
    height:38px;
    font-size:17px;
  }

  .activity-card h3{
    font-size:19px;
    margin:10px 0 5px;
  }

  .activity-card p{
    min-height:28px;
    line-height:1.45;
  }

  /* Đặc sắc */
  .feature-grid{
    gap:11px;
  }

  .feature-card{
    min-height:175px;
    padding:20px;
  }

  .feature-main{
    min-height:361px;
  }

  .feature-main h3{
    font-size:29px;
  }

  .feature-main>strong{
    font-size:160px;
  }

  .feature-card h3{
    font-size:20px;
  }

  .feature-wide>strong{
    width:88px;
    height:88px;
    font-size:54px;
  }

  /* Tân thủ */
  .steps a{
    min-height:164px;
    padding:19px 18px;
  }

  .steps i{
    width:39px;
    height:39px;
    font-size:18px;
    margin-bottom:11px;
  }

  .steps h3{
    font-size:17px;
    margin-bottom:4px;
  }

  .steps p{
    min-height:28px;
    line-height:1.45;
  }

  /* Khối cộng đồng */
  .community{
    padding:18px 0 52px;
  }

  .community-inner{
    padding:28px 32px;
  }
}

/* Laptop thấp chiều cao: nén thêm một chút */
@media (min-width: 901px) and (max-height: 800px){
  .section{
    padding:46px 0;
  }

  .news-card{
    min-height:136px;
    padding:15px 18px;
  }

  .activity-card{
    min-height:152px;
  }

  .steps a{
    min-height:152px;
  }
}


/* ==========================================================
   V5.9 - WARM COMPACT
   Phần dưới ngắn hơn + bỏ cảm giác nền đen nặng nề
   ========================================================== */

/* Thông báo vẫn tối để chuyển cảnh từ hero */
.notice-strip{
  background:linear-gradient(90deg,#17140f,#211a11,#17140f);
  border-top:1px solid rgba(189,145,65,.28);
  border-bottom:1px solid rgba(189,145,65,.22);
}

/* Toàn bộ phần dưới chuyển sang tông giấy cổ / nâu ấm */
.section-news{
  background:
    radial-gradient(circle at 15% 0,rgba(255,255,255,.50),transparent 28%),
    linear-gradient(180deg,#efe6d3 0%,#e8ddc7 100%) !important;
  color:#352b20;
}

.section-activities{
  background:
    radial-gradient(circle at 85% 10%,rgba(255,255,255,.35),transparent 25%),
    linear-gradient(180deg,#e1d4bb 0%,#d8c9ab 100%) !important;
  border-top:1px solid rgba(116,82,35,.15);
  border-bottom:1px solid rgba(116,82,35,.16);
  color:#34291e;
}

.section-features{
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.40),transparent 25%),
    linear-gradient(180deg,#eee4d0 0%,#e3d6be 100%) !important;
  color:#34291e;
}

.section-guide{
  background:
    linear-gradient(180deg,#ddd0b6 0%,#d3c2a2 100%) !important;
  color:#34291e;
}

.community{
  background:linear-gradient(180deg,#d3c2a2 0%,#c8b38e 100%) !important;
}

footer{
  background:#211a12 !important;
  border-top:1px solid rgba(221,178,94,.28);
}

/* Heading/text màu tối trên nền sáng */
.section-news .section-head h2,
.section-activities .section-head h2,
.section-features .section-head h2,
.section-guide .section-head h2{
  color:#30261b !important;
  text-shadow:none;
}

.section-news .section-head p,
.section-activities .section-head p,
.section-features .section-head p,
.section-guide .section-head p{
  color:#756857 !important;
}

.section-news .kicker,
.section-activities .kicker,
.section-features .kicker,
.section-guide .kicker{
  color:#9a6b27 !important;
}

.section-link{
  color:#7a521d !important;
  border-color:rgba(119,82,30,.28) !important;
  background:rgba(255,250,239,.30);
}

/* =======================
   TIN TỨC - chỉ hiện 3 tin đầu
   ======================= */
.news-grid{
  grid-template-columns:repeat(3,1fr) !important;
  gap:12px !important;
}

.news-card{
  min-height:118px !important;
  padding:14px 17px !important;
  border:1px solid rgba(121,87,38,.20) !important;
  border-radius:9px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,249,235,.48)) !important;
  box-shadow:0 7px 18px rgba(70,47,20,.06) !important;
  color:#352a1f !important;
}

.news-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(137,93,31,.38) !important;
  background:rgba(255,251,242,.82) !important;
}

.news-card:nth-child(n+4){
  display:none;
}

.news-card h3{
  color:#34281d !important;
  font-size:18px !important;
  margin:8px 0 5px !important;
}

.news-card p{
  color:#776b5c !important;
  font-size:8px !important;
  min-height:22px !important;
  margin:0 0 5px !important;
}

.news-tag{
  color:#845a1e !important;
  border-color:rgba(132,90,30,.25) !important;
  background:rgba(194,147,75,.08);
}

.news-date{
  color:#998a75 !important;
}

.readmore{
  color:#8b5e20 !important;
}

/* =======================
   HOẠT ĐỘNG - 6 ô / 1 hàng
   ======================= */
.activity-grid{
  grid-template-columns:repeat(6,1fr) !important;
  gap:9px !important;
}

.activity-card{
  min-height:132px !important;
  padding:14px 13px !important;
  border:1px solid rgba(118,82,31,.19) !important;
  border-radius:9px !important;
  background:rgba(255,250,239,.45) !important;
  box-shadow:none !important;
}

.activity-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(132,91,31,.38) !important;
  background:rgba(255,251,242,.68) !important;
}

.activity-card>span{
  font-size:27px !important;
  color:rgba(125,85,30,.09) !important;
}

.activity-card i{
  width:33px !important;
  height:33px !important;
  font-size:14px !important;
  border-color:rgba(126,89,35,.25) !important;
  background:rgba(177,127,55,.08) !important;
  color:#8b5d20 !important;
}

.activity-card h3{
  color:#3c2d1e !important;
  font-size:16px !important;
  margin:8px 0 3px !important;
  line-height:1.05 !important;
}

.activity-card p{
  color:#7a6a56 !important;
  font-size:7px !important;
  min-height:25px !important;
  margin:0 0 4px !important;
}

.activity-card b{
  color:#8b5d20 !important;
  font-size:6px !important;
}

/* =======================
   ĐẶC SẮC - 5 ô / 1 hàng
   bỏ kiểu card lớn kéo dài
   ======================= */
.feature-grid{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:9px !important;
}

.feature-card,
.feature-main,
.feature-wide{
  grid-row:auto !important;
  grid-column:auto !important;
  min-height:138px !important;
  padding:15px !important;
  display:block !important;
  border:1px solid rgba(116,80,30,.18) !important;
  border-radius:9px !important;
  background:rgba(255,250,239,.43) !important;
  color:#36291d !important;
}

.feature-card>strong,
.feature-main>strong,
.feature-wide>strong{
  position:absolute !important;
  right:8px !important;
  top:-4px !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  background:none !important;
  transform:none !important;
  font-size:65px !important;
  color:rgba(126,86,31,.08) !important;
}

.feature-card>span,
.feature-card div>span{
  color:#916222 !important;
  font-size:6px !important;
}

.feature-card h3,
.feature-main h3{
  color:#382a1e !important;
  font-size:17px !important;
  margin:7px 0 5px !important;
}

.feature-card p{
  color:#786a58 !important;
  font-size:7px !important;
  line-height:1.45 !important;
  margin:0 !important;
}

/* =======================
   TÂN THỦ - thanh 4 ô thấp
   ======================= */
.steps{
  border-color:rgba(115,80,31,.20) !important;
  border-radius:9px !important;
  background:rgba(255,250,239,.26);
}

.steps a{
  min-height:118px !important;
  padding:14px 15px !important;
  background:rgba(255,250,239,.36) !important;
  border-right-color:rgba(115,80,31,.14) !important;
}

.steps a:hover{
  background:rgba(255,251,241,.60) !important;
}

.steps a>span{
  color:rgba(128,88,31,.10) !important;
  font-size:25px !important;
}

.steps i{
  width:34px !important;
  height:34px !important;
  margin-bottom:7px !important;
  border-color:rgba(125,87,34,.25) !important;
  color:#8c5e20 !important;
  font-size:15px !important;
}

.steps h3{
  color:#392b1e !important;
  font-size:16px !important;
  margin:0 0 2px !important;
}

.steps p{
  color:#786b59 !important;
  font-size:7px !important;
  min-height:20px !important;
  margin:0 0 3px !important;
}

.steps b{
  color:#895c20 !important;
  font-size:6px !important;
}

/* =======================
   CỘNG ĐỒNG - gọn, ấm
   ======================= */
.community{
  padding:8px 0 28px !important;
}

.community-inner{
  padding:20px 25px !important;
  min-height:88px;
  border:1px solid rgba(116,79,29,.20) !important;
  background:
    linear-gradient(135deg,rgba(255,250,239,.48),rgba(240,222,187,.48)) !important;
  box-shadow:none !important;
}

.community .kicker{
  color:#8c5e20 !important;
}

.community h2{
  color:#36291e !important;
  font-size:28px !important;
  margin:4px 0 !important;
}

.community p{
  color:#796a56 !important;
  margin:3px 0 0 !important;
}

/* =======================
   NÉN KHOẢNG CÁCH TOÀN TRANG
   ======================= */
.section{
  padding:34px 0 !important;
}

.section-head{
  margin-bottom:15px !important;
}

.section-head h2{
  font-size:36px !important;
  margin:4px 0 !important;
}

.section-head p{
  margin-top:4px !important;
}

.section-head.centered>div{
  max-width:600px;
}

/* Laptop vừa: hoạt động 3 cột, feature 3 cột */
@media (max-width:1180px) and (min-width:701px){
  .activity-grid{
    grid-template-columns:repeat(3,1fr) !important;
  }
  .feature-grid{
    grid-template-columns:repeat(3,1fr) !important;
  }
  .feature-card,
  .feature-main,
  .feature-wide{
    min-height:125px !important;
  }
}

/* Mobile vẫn dễ đọc */
@media (max-width:700px){
  .section{
    padding:30px 0 !important;
  }
  .news-grid,
  .activity-grid,
  .feature-grid{
    grid-template-columns:1fr !important;
  }
  .news-card:nth-child(n+4){
    display:block;
  }
  .news-card,
  .activity-card,
  .feature-card,
  .feature-main,
  .feature-wide{
    min-height:auto !important;
  }
}


/* ==========================================================
   V5.9.1 - CARD HOVER NỔI LÊN
   Rê chuột vào ô nào, ô đó nhấc lên + viền vàng + bóng mềm.
   Chỉ áp dụng thiết bị có chuột để mobile không bị dính hover.
   ========================================================== */

/* Chuẩn bị transition cho tất cả các ô */
.news-card,
.activity-card,
.feature-card,
.feature-main,
.feature-wide,
.steps a,
.community-inner{
  position:relative;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease,
    filter .22s ease !important;
  will-change:transform;
}

/* Desktop / laptop có chuột */
@media (hover:hover) and (pointer:fine){

  .news-card:hover,
  .activity-card:hover,
  .feature-card:hover,
  .feature-main:hover,
  .feature-wide:hover,
  .steps a:hover{
    transform:translateY(-7px) scale(1.015) !important;
    z-index:5;
    border-color:rgba(161,109,34,.58) !important;
    background-color:rgba(255,253,247,.88) !important;
    box-shadow:
      0 16px 30px rgba(74,47,15,.15),
      0 5px 12px rgba(74,47,15,.08),
      inset 0 1px 0 rgba(255,255,255,.78) !important;
  }

  /* một lớp ánh vàng nhẹ ở mép trên */
  .news-card::after,
  .activity-card::after,
  .feature-card::after,
  .feature-main::after,
  .feature-wide::after,
  .steps a::after{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:0;
    height:1px;
    opacity:0;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(190,132,48,.72),
      transparent
    );
    transition:opacity .22s ease;
    pointer-events:none;
  }

  .news-card:hover::after,
  .activity-card:hover::after,
  .feature-card:hover::after,
  .feature-main:hover::after,
  .feature-wide:hover::after,
  .steps a:hover::after{
    opacity:1;
  }

  /* Icon cũng sáng nhẹ theo card */
  .activity-card:hover i,
  .steps a:hover i{
    transform:scale(1.08);
    border-color:rgba(153,101,29,.48) !important;
    background:rgba(194,139,57,.14) !important;
  }

  .activity-card i,
  .steps a i{
    transition:
      transform .22s ease,
      border-color .22s ease,
      background-color .22s ease !important;
  }

  /* Chữ tiêu đề đậm hơn khi hover */
  .news-card:hover h3,
  .activity-card:hover h3,
  .feature-card:hover h3,
  .feature-main:hover h3,
  .feature-wide:hover h3,
  .steps a:hover h3{
    color:#6f4516 !important;
  }
}

/* Keyboard: tab vào ô cũng có tín hiệu rõ */
.news-card:focus-within,
.activity-card:focus-within,
.feature-card:focus-within,
.feature-main:focus-within,
.feature-wide:focus-within,
.steps a:focus-visible{
  outline:2px solid rgba(167,111,34,.55);
  outline-offset:3px;
}


/* ==========================================================
   V5.9.2 - ALL HOVER
   TẤT CẢ ô/card/nút đều có hiệu ứng đồng bộ
   ========================================================== */

/* Transition chung */
.news-card,
.activity-card,
.feature-card,
.feature-main,
.feature-wide,
.steps a,
.community-inner,
.hero-btn,
.btn-login,
.btn-register,
.section-link,
.btn-zalo,
.btn-outline,
.activity-row,
.activity-all,
.music-btn-v57,
.floating-zalo{
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    border-color .20s ease,
    background-color .20s ease,
    color .20s ease,
    filter .20s ease !important;
}

/* Chỉ hover trên thiết bị có chuột */
@media (hover:hover) and (pointer:fine){

  /* ===== CARD LỚN PHÍA DƯỚI ===== */
  .news-card:hover,
  .activity-card:hover,
  .feature-card:hover,
  .feature-main:hover,
  .feature-wide:hover,
  .steps a:hover{
    transform:translateY(-7px) scale(1.015) !important;
    z-index:6;
    border-color:rgba(161,109,34,.60) !important;
    box-shadow:
      0 17px 32px rgba(74,47,15,.16),
      0 5px 12px rgba(74,47,15,.08),
      inset 0 1px 0 rgba(255,255,255,.78) !important;
    filter:brightness(1.025);
  }

  /* Community cũng nổi */
  .community-inner:hover{
    transform:translateY(-5px) !important;
    border-color:rgba(161,109,34,.52) !important;
    box-shadow:0 16px 30px rgba(74,47,15,.13) !important;
  }

  /* ===== HERO BUTTONS ===== */
  .hero-btn:hover{
    transform:translateY(-5px) scale(1.018);
    filter:brightness(1.07);
    box-shadow:
      0 16px 30px rgba(0,0,0,.28),
      0 0 0 1px rgba(255,220,145,.24) !important;
  }

  .btn-login:hover,
  .btn-register:hover{
    transform:translateY(-3px);
    filter:brightness(1.08);
    box-shadow:0 10px 20px rgba(0,0,0,.20);
  }

  /* ===== BẢNG HOẠT ĐỘNG TRÊN HERO ===== */
  .activity-row:hover{
    transform:translateX(6px);
    background:rgba(255,242,210,.08);
  }

  .activity-row:hover .activity-icon{
    transform:scale(1.08);
    border-color:rgba(238,194,106,.68) !important;
    background:rgba(143,102,39,.28) !important;
    box-shadow:0 5px 12px rgba(0,0,0,.16);
  }

  .activity-row:hover .activity-text b{
    color:#f5d889 !important;
  }

  .activity-row:hover .activity-arrow{
    transform:translateX(4px);
    color:#ffe18e;
  }

  .activity-all:hover{
    transform:translateX(5px);
    color:#ffe394;
  }

  .activity-icon,
  .activity-text b,
  .activity-arrow{
    transition:
      transform .20s ease,
      color .20s ease,
      border-color .20s ease,
      background-color .20s ease,
      box-shadow .20s ease !important;
  }

  /* ===== CÁC NÚT NHỎ PHÍA DƯỚI ===== */
  .section-link:hover,
  .btn-zalo:hover,
  .btn-outline:hover{
    transform:translateY(-3px);
    filter:brightness(1.06);
    box-shadow:0 10px 20px rgba(74,47,15,.12);
  }

  /* ===== MUSIC + ZALO NỔI ===== */
  .music-btn-v57:hover{
    transform:translateY(-2px) scale(1.08);
    background:rgba(218,174,93,.18) !important;
    border-color:rgba(218,174,93,.50) !important;
  }

  .floating-zalo:hover{
    transform:translateY(-3px) scale(1.03);
    filter:brightness(1.08);
    box-shadow:0 15px 30px rgba(0,80,170,.30) !important;
  }

  /* ===== Link trong hero ===== */
  .hero-links a{
    transition:transform .20s ease,color .20s ease,text-shadow .20s ease;
  }

  .hero-links a:hover{
    transform:translateY(-2px);
    color:#f3d37f;
    text-shadow:0 4px 10px rgba(0,0,0,.50);
  }

  /* ===== Menu trên cùng ===== */
  .main-nav a{
    position:relative;
  }

  .main-nav a::after{
    content:"";
    position:absolute;
    left:50%;
    right:50%;
    bottom:-7px;
    height:1px;
    background:#e4b75c;
    transition:left .20s ease,right .20s ease;
  }

  .main-nav a:hover::after{
    left:5%;
    right:5%;
  }
}

/* Active bằng bàn phím cũng rõ */
.hero-btn:focus-visible,
.btn-login:focus-visible,
.btn-register:focus-visible,
.section-link:focus-visible,
.btn-zalo:focus-visible,
.btn-outline:focus-visible,
.activity-row:focus-visible,
.activity-all:focus-visible,
.music-btn-v57:focus-visible,
.floating-zalo:focus-visible{
  outline:2px solid rgba(184,127,45,.65);
  outline-offset:3px;
}


/* V5.9.3 - activity cards open real posts */
a.activity-card{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

a.activity-card:visited{
  color:inherit;
}

.activity-post-link.has-post{
  cursor:pointer;
}

.activity-post-link.has-post b{
  position:relative;
}

@media (hover:hover) and (pointer:fine){
  .activity-post-link.has-post:hover b{
    color:#6f4516 !important;
  }
}

.activity-post-link.no-post{
  cursor:not-allowed;
}


/* V5.9.4 - phần dưới cũng bấm được */
a.feature-card,
a.feature-main,
a.feature-wide{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
a.feature-card:visited,
a.feature-main:visited,
a.feature-wide:visited{
  color:inherit;
}

.feature-post-link.has-post,
.feature-post-link.no-post{
  position:relative;
}

.feature-post-link.has-post::after{
  content:"XEM BÀI VIẾT →";
  position:absolute;
  left:15px;
  bottom:12px;
  font-size:7px;
  letter-spacing:.08em;
  color:#8b5e20;
  font-weight:700;
}

@media (hover:hover) and (pointer:fine){
  .feature-post-link.has-post:hover::after{
    color:#6f4516;
  }
}