:root{
  --gold:#f4d78a;
  --gold-dark:#9a7123;
  --text:#fff7df;
  --line:rgba(255,220,150,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Be Vietnam Pro",Arial,sans-serif;
  min-height:100vh;
  color:#fff;
  background:#07070d;
  overflow-x:hidden;
}

.hero-bg{
  position:fixed;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(12,12,20,.15), rgba(12,12,20,.58)),
    url("./background/backgroundindex.png") center/cover no-repeat;
  filter:brightness(.9) blur(.8px);
  transform:scale(1.08);
  z-index:-2;
  animation:bgZoom 16s ease-in-out infinite alternate;
}

.hero-overlay{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at center, transparent 18%, rgba(8,8,12,.5) 82%);
  z-index:-1;
}

.topbar{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:78px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.4));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
}

.top-logo{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  height:48px;
  max-width:min(240px,42vw);
  display:flex;
  align-items:center;
}
.top-logo img{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

.top-nav{
  display:flex;
  gap:26px;
  align-items:center;
}
.top-nav a{
  text-decoration:none;
  color:var(--text);
  font-family:"Cinzel",serif;
  font-size:18px;
  letter-spacing:.8px;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.top-nav a:hover{color:var(--gold)}

.menu-toggle{
  position:absolute;
  right:14px;
  top:20px;
  display:none;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:8px;
  color:#fff;
  background:rgba(0,0,0,.35);
}

.hero-content{
  min-height:100vh;
  padding-top:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}

.intro{
  margin:8px 0 10px;
  font-family:"Cinzel",serif;
  color:#fbe8bb;
  letter-spacing:1.1px;
  font-size:clamp(24px,2.8vw,44px);
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}

.center-logo{
  width:min(440px,88vw);
  height:auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.75));
}

.play-btn{
  margin-top:14px;
  width:84px;
  height:84px;
  border-radius:50%;
  border:3px solid #f6d791;
  background:radial-gradient(circle at 30% 30%, #ffe9b4, #b27b22);
  color:#17396e;
  font-size:32px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}

.hero-content h1{
  margin:24px 0 18px;
  font-family:"Cinzel",serif;
  color:#fff7dd;
  font-size:clamp(24px,3.4vw,58px);
  line-height:1.08;
  text-shadow:
    0 3px 0 #3c2a09,
    0 0 12px rgba(0,0,0,.85),
    0 0 22px rgba(255,213,133,.25);
}

.cta-row{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  justify-content:center;
}

.cta-btn{
  min-width:260px;
  text-decoration:none;
  font-family:"Cinzel",serif;
  font-size:33px;
  font-weight:700;
  letter-spacing:1px;
  color:#2f2106;
  padding:16px 26px;
  border:2px solid var(--gold-dark);
  border-radius:8px;
  background:linear-gradient(to bottom, #fff0be, #dfb146 52%, #b47e22);
  box-shadow:0 8px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s ease;
}
.cta-btn:hover{transform:translateY(-3px)}

.social-panel{
  position:fixed;
  right:16px;
  top:180px;
  width:178px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.62);
  border-radius:8px;
  padding:10px 10px 6px;
  z-index:12;
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.social-panel h4{
  margin:0 0 10px;
  font-size:11px;
  color:#ffeab6;
  text-align:center;
  letter-spacing:.5px;
}
.social-panel a{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  margin-bottom:6px;
  background:rgba(255,255,255,.06);
}
.social-panel a:hover{background:rgba(255,255,255,.13)}
.social-panel .ico{
  width:16px;
  height:16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:800;
  background:#dbc081;
  color:#3a2a0b;
  flex:0 0 16px;
}

/* Khối NEWS trang chủ (ref Dragonica Origin) */
.home-news{
  position:relative;
  z-index:5;
  margin-top:28px;
  padding:28px 12px 44px;
  background:linear-gradient(to bottom, rgba(6,8,16,.55), rgba(9,12,22,.92));
  border-top:1px solid var(--line);
}
.home-news__heading{
  width:min(900px,94vw);
  margin:0 auto 20px;
  text-align:center;
}
.home-news__title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,4vw,36px);
}
.home-news__orn-line{
  flex:1;
  max-width:180px;
  height:2px;
  background:linear-gradient(90deg, transparent, #e8c547, #f4d78a, #e8c547, transparent);
  box-shadow:0 0 12px rgba(232,197,71,.35);
}
.home-news__title{
  margin:0;
  font-family:"Cinzel",serif;
  font-size:clamp(36px,6vw,56px);
  font-weight:800;
  letter-spacing:.18em;
  color:#f4d78a;
  text-shadow:0 2px 0 #5c4518, 0 6px 24px rgba(0,0,0,.55);
}
.home-news__subline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}
.home-news__dash{
  width:min(120px,18vw);
  height:0;
  border-top:1px dashed rgba(232,197,71,.65);
}
.home-news__diamond{
  color:#e8c547;
  font-size:11px;
  line-height:1;
  opacity:.9;
}

.home-news__panel{
  position:relative;
  width:min(1180px,94vw);
  margin:0 auto;
  padding:clamp(20px,3vw,34px) clamp(16px,3vw,32px) clamp(28px,4vw,40px);
  background:linear-gradient(180deg, rgba(24,40,88,.95) 0%, rgba(14,26,56,.98) 100%);
  border:3px double #d4af37;
  border-radius:12px;
  box-shadow:0 18px 48px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,220,150,.12);
  overflow:visible;
}

.home-news__mascot{
  position:absolute;
  z-index:2;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.home-news__mascot--tl{
  left:-8px;
  top:-36px;
  width:clamp(72px,12vw,120px);
  height:auto;
}
.home-news__mascot--mr{
  right:-16px;
  top:50%;
  transform:translateY(-50%);
  width:clamp(56px,9vw,88px);
  height:auto;
}
.home-news__mascot--br{
  right:-6px;
  bottom:-20px;
  width:clamp(64px,10vw,100px);
  height:auto;
}

.home-news__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px,2.5vw,24px);
  min-height:80px;
  align-items:stretch;
}
.home-news__grid > *{
  min-width:0;
}
.home-news__loading{
  grid-column:1/-1;
  margin:0;
  text-align:center;
  color:rgba(255,244,220,.75);
  font-size:15px;
  padding:24px;
}

.home-news__card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  border-radius:8px;
  overflow:hidden;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(232,197,71,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-news__card:hover{
  transform:translateY(-4px);
  border-color:rgba(244,215,138,.65);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.home-news__thumb{
  aspect-ratio:16/9;
  width:100%;
  background:#1a2338;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.home-news__thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
.home-news__card-title{
  margin:0;
  padding:10px 14px 0;
  font-family:"Cinzel",serif;
  font-size:clamp(14px,1.6vw,17px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:.04em;
  color:#fff7e6;
  text-align:left;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.home-news__card-excerpt{
  margin:0;
  padding:6px 14px 14px;
  font-size:clamp(12px,1.35vw,14px);
  line-height:1.45;
  color:rgba(232,236,255,.82);
  text-align:left;
}

.home-news__viewall,
.home-news__viewall:link,
.home-news__viewall:visited{
  position:relative;
  z-index:1;
  display:block;
  width:fit-content;
  margin:clamp(22px,3vw,30px) auto 0;
  padding:12px 48px;
  font-family:"Cinzel",serif;
  font-size:clamp(18px,2.2vw,24px);
  font-weight:800;
  letter-spacing:.12em;
  color:#1a1408 !important;
  text-decoration:none !important;
  text-align:center;
  border-radius:999px;
  border:2px solid #8a6a1f;
  background:linear-gradient(to bottom, #fff4c4, #e8c547 45%, #c9a227);
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition:filter .15s ease, transform .15s ease;
}
.home-news__viewall:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  color:#1a1408 !important;
}

/* —— CLASS (ref Dragonica Origin) —— */
.home-class{
  position:relative;
  z-index:5;
  padding:20px 12px 48px;
  background:linear-gradient(to bottom, rgba(9,12,22,.88), rgba(6,8,16,.94));
  border-top:1px solid var(--line);
}
.home-class__heading{
  width:min(900px,94vw);
  margin:0 auto 20px;
  text-align:center;
}
.home-class__title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,4vw,36px);
}
.home-class__orn-line{
  flex:1;
  max-width:180px;
  height:2px;
  background:linear-gradient(90deg, transparent, #e8c547, #f4d78a, #e8c547, transparent);
  box-shadow:0 0 12px rgba(232,197,71,.35);
}
.home-class__title{
  margin:0;
  font-family:"Cinzel",serif;
  font-size:clamp(34px,5.5vw,52px);
  font-weight:800;
  letter-spacing:.2em;
  color:#f4d78a;
  text-shadow:0 2px 0 #5c4518, 0 6px 24px rgba(0,0,0,.55);
}
.home-class__subline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}
.home-class__dash{
  width:min(120px,18vw);
  border-top:1px dashed rgba(232,197,71,.65);
}
.home-class__diamond{
  color:#e8c547;
  font-size:11px;
}

.home-class__panel{
  width:min(1220px,96vw);
  margin:0 auto;
  padding:clamp(18px,3vw,28px);
  background:linear-gradient(180deg, rgba(20,36,78,.94) 0%, rgba(12,22,48,.97) 100%);
  border:3px double #c9a227;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,220,150,.1);
}

.home-class__layout{
  display:grid;
  grid-template-columns:minmax(200px,1.05fr) auto minmax(260px,1.15fr);
  gap:clamp(16px,3vw,28px);
  align-items:center;
}

.home-class__preview{
  text-align:center;
  min-width:0;
}
.home-class__figure-wrap{
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 auto;
  aspect-ratio:4/5;
  max-height:min(420px,52vh);
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(232,197,71,.35);
  background:radial-gradient(ellipse at 50% 70%, rgba(40,70,140,.5) 0%, rgba(10,14,28,.9) 70%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.35);
}
.home-class__figure{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  display:block;
}
.home-class__figure-label{
  margin:14px 0 0;
  font-family:"Cinzel",serif;
  font-size:clamp(22px,3vw,34px);
  font-weight:900;
  letter-spacing:.06em;
  background:linear-gradient(180deg, #ffb347, #ffcc33);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

.home-class__picker{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  width:clamp(200px,26vw,260px);
  flex-shrink:0;
}
.home-class__picker-arrow{
  flex-shrink:0;
  width:100%;
  padding:10px 8px;
  border:2px solid rgba(232,197,71,.5);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(55,45,18,.95), rgba(22,18,8,.98));
  color:#e8c547;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  cursor:pointer;
  line-height:1;
  text-shadow:0 0 10px rgba(232,197,71,.35);
  transition:border-color .2s, background .2s, opacity .2s, transform .15s;
}
.home-class__picker-arrow:hover:not(:disabled){
  border-color:#f0d060;
  background:linear-gradient(180deg, rgba(75,62,24,.98), rgba(32,26,12,.99));
}
.home-class__picker-arrow:active:not(:disabled){
  transform:scale(.98);
}
.home-class__picker-arrow:disabled{
  opacity:.32;
  cursor:not-allowed;
  text-shadow:none;
}
.home-class__picker-viewport{
  width:100%;
  max-height:min(340px,52vh);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.home-class__picker-viewport::-webkit-scrollbar{display:none}
.home-class__picker-track{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:2px 4px 6px;
}
.home-class__picker-item{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  width:100%;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(6,12,28,.82);
  cursor:default;
  pointer-events:none;
  text-align:left;
  transition:border-color .2s, box-shadow .2s, transform .2s, filter .2s;
  color:inherit;
  font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.home-class__picker-thumb{
  width:46px;
  height:46px;
  object-fit:contain;
  object-position:center bottom;
  flex-shrink:0;
  border-radius:50%;
  border:2px solid rgba(232,197,71,.38);
  background:radial-gradient(circle at 50% 80%, rgba(60,80,120,.4), rgba(0,0,0,.35));
}
.home-class__picker-name{
  font-family:"Be Vietnam Pro",system-ui,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  color:#f2ead8;
  line-height:1.3;
  text-transform:uppercase;
}
.home-class__picker-item.is-active{
  border-color:rgba(232,197,71,.9);
  box-shadow:0 0 20px rgba(232,197,71,.32), inset 0 0 0 1px rgba(232,197,71,.2);
  transform:scale(1.03);
  filter:none;
  opacity:1;
}
.home-class__picker-item:not(.is-active){
  filter:grayscale(.88) brightness(.86);
  opacity:.93;
}
.home-class__picker-item:not(.is-active):hover{
  filter:grayscale(.15) brightness(.98);
  opacity:1;
  border-color:rgba(232,197,71,.42);
}

.home-class__detail{
  min-width:0;
  padding:clamp(14px,2vw,20px) clamp(16px,2vw,22px);
  border-radius:10px;
  background:rgba(16,28,62,.72);
  border:1px solid rgba(212,175,55,.55);
  backdrop-filter:blur(6px);
}
.home-class__detail-name{
  margin:0 0 12px;
  font-family:"Cinzel",serif;
  font-size:clamp(22px,2.5vw,28px);
  font-weight:800;
  color:#e8c547;
  letter-spacing:.06em;
}
.home-class__detail-desc{
  margin:0;
  font-family:"Be Vietnam Pro",Georgia,serif;
  font-size:clamp(14px,1.5vw,16px);
  line-height:1.65;
  color:rgba(255,250,235,.9);
}

@media (max-width:900px){
  .home-class__layout{
    grid-template-columns:1fr;
  }
  .home-class__picker{
    order:-1;
    width:100%;
    max-width:320px;
    margin:0 auto;
  }
  .home-class__picker-viewport{
    max-height:min(260px,42vh);
  }
  .home-class__figure-wrap{
    max-height:340px;
  }
}

.site-footer{
  text-align:center;
  color:#ddd2af;
  font-size:14px;
  padding:18px 10px 26px;
  background:#0b0b11;
}

@media (max-width:980px){
  .menu-toggle{display:block}
  .top-nav{
    position:absolute;
    top:78px;
    left:0;
    right:0;
    background:rgba(0,0,0,.92);
    border-bottom:1px solid var(--line);
    padding:12px;
    display:none;
    flex-direction:column;
    gap:12px;
  }
  .top-nav.show{display:flex}
  .social-panel{display:none}
  .home-news__grid{grid-template-columns:1fr}
  .home-news__mascot--tl{top:-24px;left:-4px;width:64px}
  .home-news__mascot--mr{display:none}
  .home-news__mascot--br{right:-4px;bottom:-12px;width:56px}
  .cta-btn{min-width:220px;font-size:24px}
}

@keyframes bgZoom{
  0%{transform:scale(1.06) translateY(0)}
  100%{transform:scale(1.12) translateY(-8px)}
}

.video-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
}
.video-modal[hidden]{
  display:none !important;
}
.video-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,8,18,.82);
  backdrop-filter:blur(6px);
}
.video-modal__panel{
  position:relative;
  z-index:1;
  width:min(960px,96vw);
  border:2px solid var(--line);
  border-radius:12px;
  background:linear-gradient(to bottom,rgba(12,16,28,.96),rgba(20,32,64,.96));
  box-shadow:0 24px 48px rgba(0,0,0,.55);
  padding:12px;
}
.video-modal__close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid var(--line);
  background:linear-gradient(to bottom,#2a2a36,#14141c);
  color:#ffeab6;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 8px 18px rgba(0,0,0,.45);
}
.video-modal__close:hover{
  color:#fff;
  filter:brightness(1.1);
}
.video-modal__frame{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:8px;
  background:#000;
}
.video-modal__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}