/* ==========================================================================
   Ocean Saga – BẢN HIỆN ĐẠI (index.html)
   Tối, kính mờ (glassmorphism), gradient vàng–cam, bo góc lớn, chuyển động nhẹ.
   Một bố cục co giãn cho mọi màn hình (không dùng ảnh nền 1920 cố định như index.html).
   ========================================================================== */

:root {
  --bg: #071A33;          /* xanh biển đêm (đáy ảnh bìa hoà vào màu này) */
  --bg-2: #0B2A4A;
  --bg-deep: #041526;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-2: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.12);
  --text: #EEF2FF;
  --muted: rgba(220, 228, 255, 0.68);
  --gold: #FFD35A;
  --orange: #FF8A3D;
  --cyan: #4FD1FF;
  --violet: #9B7BFF;
  --grad: linear-gradient(135deg, #FFD35A 0%, #FF8A3D 100%);
  --radius: 20px;
  --wrap: 1200px;
  --font-body: 'Be Vietnam Pro', 'Leelawadee UI', 'Noto Sans Thai', Tahoma, system-ui, sans-serif;
  --font-display: 'Bungee', 'Leelawadee UI', 'Noto Sans Thai', Tahoma, sans-serif;
  --header-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  /* Nền "biển đêm Đại Hải Trình": lưới hải đồ + quầng sáng xanh + biển sâu dần xuống dưới */
  background:
    url(../assets/images/modern/chart.svg?v=7e5481b8) 0 0 / 240px 240px,
    radial-gradient(1200px 600px at 85% 30%, rgba(79, 209, 255, 0.12), transparent 60%),
    radial-gradient(900px 500px at 10% 65%, rgba(40, 180, 200, 0.10), transparent 60%),
    linear-gradient(180deg, #071A33 0%, #0A2A4A 45%, #072339 75%, var(--bg-deep) 100%);
  background-color: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; }

.glass {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---------- Lớp trang trí cố định phía sau nội dung ---------- */
/* La bàn khổng lồ xoay rất chậm */
body::before {
  content: '';
  position: fixed;
  z-index: -1;
  right: -14vmax;
  bottom: -14vmax;
  width: 62vmax;
  height: 62vmax;
  background: url(../assets/images/modern/compass.svg?v=3e592d8d) center / contain no-repeat;
  opacity: 0.07;
  animation: compass-spin 240s linear infinite;
  pointer-events: none;
}
@keyframes compass-spin { to { transform: rotate(360deg); } }
/* Tia nắng xuyên mặt nước, chiếu chéo từ trên xuống */
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  background: repeating-linear-gradient(105deg,
      rgba(160, 220, 255, 0) 0 70px,
      rgba(160, 220, 255, 0.035) 70px 110px,
      rgba(160, 220, 255, 0) 110px 220px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  animation: rays 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes rays { to { transform: translateX(60px); opacity: 0.6; } }

/* Sóng biển chuyển động (ngăn cách ảnh bìa / footer) */
.waves {
  position: relative;
  display: block;
  width: 100%;
  height: 90px;
  overflow: hidden;
  pointer-events: none;
}
.waves svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
}
.waves .w1 { fill: rgba(79, 209, 255, 0.10); animation: wave 18s linear infinite; }
.waves .w2 { fill: rgba(79, 209, 255, 0.16); animation: wave 12s linear infinite reverse; }
.waves .w3 { animation: wave 8s linear infinite; }
@keyframes wave { to { transform: translateX(-50%); } }
.waves--hero { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; }
.waves--hero .w3 { fill: #071A33; }
.waves--footer { margin-top: 30px; margin-bottom: -1px; }
.waves--footer .w3 { fill: var(--bg-deep); }

/* ---------- Header: thanh kính mờ dính đầu trang ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
}
/* Kính mờ đặt ở lớp giả: nếu đặt backdrop-filter trên chính header, menu mobile (position: fixed bên trong)
   sẽ bị neo theo header thay vì màn hình và không hiện ra. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 11, 26, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.hd {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
.hd__brand { position: relative; z-index: 2; flex: none; align-self: flex-start; transition: transform 0.25s; }
/* Logo to, treo tràn xuống dưới header (~30px) – chiều cao vượt chiều cao header */
.hd__brand img {
  width: auto;
  height: 118px;                       /* logo Ocean Saga gần vuông (640x550) nên cao hơn logo cũ một chút */
  margin-top: 18px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}
.hd__brand:hover { transform: scale(1.04) rotate(-1deg); }

.main-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-btn {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav-btn:hover, .nav-btn:focus-visible { color: #FFFFFF; background: var(--glass-2); outline: none; }
.nav-btn--m-only { display: none; }

/* Nút vàng cắt vát góc (dùng cho nút "Tải game" ở header và tab tin tức đang chọn) */
:root {
  --cut: 10px;
  --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --gold-btn: linear-gradient(180deg, #F7DA8A 0%, #E9BE5C 55%, #D6A23E 100%);
  --dl-btn: linear-gradient(90deg, #F1A04F 0%, #F8D284 100%);   /* nút Tải game: cam → vàng nhạt (trái → phải) */
}

.hd__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  background: var(--dl-btn);
  clip-path: var(--chamfer);
  color: #2A1606;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  filter: drop-shadow(0 4px 12px rgba(241, 160, 79, 0.3));
  transition: filter 0.2s, transform 0.2s;
}
.hd__cta .icon { stroke-width: 2.4; }
.hd__cta:hover { filter: brightness(1.08) drop-shadow(0 6px 16px rgba(241, 160, 79, 0.5)); transform: translateY(-1px); }

.hd__burger { display: none; }

/* ---------- Chọn ngôn ngữ: trong header, cạnh nút Tải game ---------- */
.lang-picker { position: relative; flex: none; }
/* Cùng dáng với nút "Tải game" (cắt vát góc), nền tối chữ vàng; rê chuột / đang mở → nền vàng */
.lang-picker__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  /* 2 lớp đầu: đường viền chéo ở 2 góc bị cắt vát (clip-path cắt mất viền inset ở đó) */
  --edge: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(242, 207, 118, 0.7) calc(50% - 1px), rgba(242, 207, 118, 0.7) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background:
    var(--edge) top left / var(--cut) var(--cut) no-repeat,
    var(--edge) bottom right / var(--cut) var(--cut) no-repeat,
    linear-gradient(180deg, rgba(247, 218, 138, 0.16), rgba(214, 162, 62, 0.08)),
    rgba(12, 19, 48, 0.9);
  clip-path: var(--chamfer);
  color: #F2CF76;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(242, 207, 118, 0.5);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.lang-picker__toggle .icon { stroke-width: 2.2; }
.lang-picker__toggle:hover,
.lang-picker.is-open .lang-picker__toggle { background: var(--gold-btn); color: #1E1206; transform: translateY(-1px); }
.lang-picker__caret { transition: transform 0.2s; }
.lang-picker.is-open .lang-picker__caret { transform: rotate(180deg); }
.lang-picker__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(12, 19, 48, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}
.lang-picker__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}
.lang-picker__item:hover, .lang-picker__item:focus-visible { background: var(--glass-2); color: #FFFFFF; outline: none; }
.lang-picker__check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(220, 232, 255, 0.35);
  border-radius: 6px;
  color: transparent;
}
.lang-picker__check .icon { stroke-width: 3; }
.lang-picker__item[aria-checked="true"] { color: #FFFFFF; }
.lang-picker__item[aria-checked="true"] .lang-picker__check { border-color: transparent; background: var(--grad); color: #2A1200; }
.lang-picker__name { flex: 1; white-space: nowrap; }
.lang-picker__code { font-size: 12px; font-weight: 800; opacity: 0.5; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(calc(100vh - var(--header-h)), 900px);
  padding: 120px 0 90px;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg, .hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.hero__bg img { object-fit: cover; object-position: 75% 20%; animation: hero-zoom 18s ease-out both; }
@keyframes hero-zoom { from { transform: scale(1.08); } }
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 11, 26, 0.95) 0%, rgba(7, 11, 26, 0.82) 30%, rgba(7, 11, 26, 0.35) 55%, rgba(7, 11, 26, 0) 75%),
    linear-gradient(0deg, var(--bg) 0%, rgba(7, 26, 51, 0) 35%);
}

.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; animation: rise 0.8s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

.age {
  padding: 3px 10px;
  border: 1px solid rgba(255, 211, 90, 0.6);
  border-radius: 999px;
  background: rgba(255, 211, 90, 0.12);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero__tagline {
  max-width: 640px;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #FFFFFF 30%, #FFE29A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}
.hero__sub { max-width: 520px; color: var(--muted); font-size: 17px; }

/* ---------- Đếm ngược mở máy chủ: thẻ tối + ô số kiểu đồng hồ lật ----------
   Cỡ số chỉnh bằng biến --cd-fs (ô số, dấu ":" co giãn theo). */
.countdown {
  --cd-fs: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  padding: 14px 18px 16px;
  border: 1px solid rgba(242, 207, 118, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 22, 46, 0.9), rgba(6, 11, 26, 0.94));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.countdown::before {                       /* đường kẻ vàng mảnh ở mép trên */
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #F2CF76, transparent);
}
.countdown[hidden] { display: none; }

.countdown__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.countdown__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #F2CF76;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.countdown__live { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; }
.countdown__live::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3DDC84;
  animation: cd-ping 1.6s ease-out infinite;
}
@keyframes cd-ping { to { transform: scale(2.8); opacity: 0; } }
.countdown__when {
  margin: 0;
  color: rgba(220, 230, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.countdown__grid { display: flex; align-items: flex-start; gap: 6px; }
.countdown__grid[hidden] { display: none; }
.countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.countdown__num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  height: 2em;
  padding: 0 0.14em;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.26em;
  background: linear-gradient(180deg, #232D50 0%, #1A2241 49.5%, #141A33 50.5%, #0E1328 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 14px rgba(0, 0, 0, 0.45);
  color: #FFF3CF;
  font-family: var(--font-body);
  font-size: var(--cd-fs);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(255, 200, 90, 0.25);
}
.countdown__num::after {                   /* đường chia ngang giữa ô (kiểu đồng hồ lật) */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.countdown__num.is-tick { animation: cd-flip 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cd-flip { from { transform: perspective(240px) rotateX(-75deg); opacity: 0.2; } }

.countdown__sep {
  display: flex;
  align-items: center;
  height: 2em;
  color: rgba(242, 207, 118, 0.6);
  font-size: var(--cd-fs);
  font-weight: 800;
  line-height: 1;
  animation: cd-blink 2s ease-in-out infinite;
}
@keyframes cd-blink { 50% { opacity: 0.25; } }

.countdown__lbl {
  color: rgba(220, 230, 255, 0.6);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.countdown__done {
  margin: 0;
  padding: 4px 0;
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(90deg, #FFD35A, #FF8A3D);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 4 nút tải: nút phẳng bo góc, icon trái + 2 dòng chữ */
.dl { display: grid; grid-template-columns: repeat(2, 210px); gap: 10px; }
.dl__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}
.dl__btn:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.dl__icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl__txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dl__txt strong { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl__txt small { font-size: 12px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dl__btn--ios { background: #000000; border-color: rgba(255, 255, 255, 0.55); }
.dl__btn--play { background: #000000; border-color: rgba(255, 255, 255, 0.55); }
.dl__btn--apk { background: linear-gradient(90deg, #C8261E 0%, #F2705A 100%); }          /* đỏ đậm -> đỏ hồng (trái -> phải) */
.dl__btn--topup { background: linear-gradient(90deg, #EE7A1E 0%, #FFC46A 100%); color: #2A1606; }   /* cam đậm -> cam vàng */
.dl__btn--topup .dl__icon { stroke-width: 2.2; }

/* Mạng xã hội */
.social { display: flex; align-items: flex-end; gap: 10px; }
.social__link { display: block; width: 52px; padding: 0; border: 0; background: none; transition: transform 0.2s; }
.social__link img { width: 100%; height: auto; }
.social__link:hover, .social__link[aria-expanded="true"] { transform: translateY(-3px); }
.social__zalo { position: relative; }
.zalo-menu {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(100% + 10px);
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(12, 19, 48, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}
.zalo-menu__item { display: block; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.zalo-menu__item::before { content: '•'; margin-right: 8px; color: var(--cyan); }
.zalo-menu__item:hover { background: var(--glass-2); }

.hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__scroll i { width: 22px; height: 34px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 12px; position: relative; }
.hero__scroll i::after { content: ''; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 60% { transform: translateY(10px); opacity: 0; } }

/* ---------- Khung section chung ---------- */
.sec { position: relative; padding: 90px 0; }
.sec--glow::before {
  content: '';
  position: absolute;
  inset: 10% 0;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 138, 61, 0.12), transparent 70%);
}
.sec__head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 40px; text-align: center; }
.sec__eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.sec__title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.01em; }
.sec__title::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--grad);
}

/* ---------- Tin tức ---------- */
.news { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }   /* minmax(0,…): dòng tin dài không đẩy tràn ngang */

.news__banner { position: relative; min-height: 400px; overflow: hidden; }
.news-banner__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s; }
.news-banner__slide.is-active { opacity: 1; visibility: visible; }
.news-banner__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.news-banner__slide.is-active img { transform: scale(1.05); }
.news-banner__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 24px 44px;
  background: linear-gradient(to top, rgba(7, 11, 26, 0.92), transparent);
  font-size: 22px;
  font-weight: 800;
}
.news-banner__dots { position: absolute; z-index: 2; left: 24px; bottom: 20px; display: flex; gap: 8px; }
.news-banner__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.4); transition: width 0.3s, background 0.3s; }
.news-banner__dot.is-active { width: 28px; background: var(--gold); }

.news__board { display: flex; flex-direction: column; padding: 18px; }
/* Tab tin tức: luôn 1 hàng 4 ô bằng nhau, "Xem thêm" cố định bên phải – không rớt dòng ở mọi cỡ / ngôn ngữ */
.news__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 8px; }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 118px)); gap: 6px; }
.tab {
  --cut: 7px;
  min-width: 0;
  height: 36px;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  clip-path: var(--chamfer);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.tab:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.tab[aria-selected="true"] { background: var(--gold-btn); color: #1E1206; }
.news__more {
  --cut: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--gold-btn);
  clip-path: var(--chamfer);
  color: #1E1206;
  transition: filter 0.2s;
}
.news__more .icon { stroke-width: 3; }
.news__more:hover { filter: brightness(1.1); }

.news-list { margin: 0; padding: 0; list-style: none; }
.news-list__item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
  transition: background 0.2s, padding 0.2s;
}
.news-list__item:last-child a { border-bottom: 0; }
.news-list__item a:hover { background: var(--glass-2); padding-left: 16px; }
.news-list__item a::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.news-list__item[data-kind="news"] a::before { background: var(--cyan); }
.news-list__item[data-kind="event"] a::before { background: #3DDC84; }
.news-list__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.news-list__date { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.news-list__item.is-first .news-list__title { color: var(--gold); font-weight: 800; }

/* ---------- Tính năng: 5 thẻ, rê chuột thẻ nào thẻ đó mở rộng ---------- */
.feat { display: flex; gap: 12px; height: 420px; }
.feat__card {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: flex 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s;
}
.feat__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 20%; transition: transform 0.6s, filter 0.4s; filter: saturate(0.85) brightness(0.8); }
.feat__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 11, 26, 0.9), transparent 55%); }
.feat:hover .feat__card { flex: 0.7; }
.feat .feat__card:hover, .feat:not(:hover) .feat__card:first-child { flex: 3; border-color: rgba(255, 211, 90, 0.6); }
.feat__card:hover img, .feat:not(:hover) .feat__card:first-child img { transform: scale(1.04); filter: none; }
.feat__no, .feat__title { position: absolute; z-index: 1; left: 20px; }
.feat__no {
  top: 16px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feat__title { right: 16px; bottom: 18px; font-size: 18px; font-weight: 800; line-height: 1.25; }

/* ---------- Truy nã: carousel ---------- */
.bounty { padding: 28px 24px 24px; overflow: hidden; }
.bounty__name { text-align: center; font-size: 22px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bounty__stage { display: flex; align-items: center; justify-content: center; gap: 0; margin: 10px 0 18px; }
.bounty__slot { flex: none; transition: transform 0.4s, opacity 0.4s; }
.bounty__slot img { width: 100%; height: auto; }
.bounty__slot--center { position: relative; z-index: 1; width: min(560px, 52%); filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.bounty__slot--side { width: min(320px, 28%); opacity: 0.45; cursor: pointer; filter: saturate(0.6); }
.bounty__slot--side:hover { opacity: 0.8; }
.bounty__slot[data-char-slot="left"] { margin-right: -40px; }
.bounty__slot[data-char-slot="right"] { margin-left: -40px; }
.bounty__ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; }
.round-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass-2);
  transition: background 0.2s, transform 0.2s;
}
.round-btn:hover { background: var(--grad); color: #2A1200; transform: scale(1.06); }
.bounty__dots { display: flex; gap: 6px; }
.bounty__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.3); transition: width 0.3s, background 0.3s; }
.bounty__dot.is-active { width: 24px; background: var(--gold); }

/* ---------- Đề xuất: 4 thẻ kính ---------- */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.quick__card {
  position: relative;
  display: flex;
  min-height: 230px;
  padding: 22px;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
}
.quick__card::before {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 209, 255, 0.35), transparent 70%);
}
.quick__card:nth-child(2)::before { background: radial-gradient(circle, rgba(255, 138, 61, 0.35), transparent 70%); }
.quick__card:nth-child(3)::before { background: radial-gradient(circle, rgba(61, 220, 132, 0.3), transparent 70%); }
.quick__card:nth-child(4)::before { background: radial-gradient(circle, rgba(155, 123, 255, 0.35), transparent 70%); }
.quick__card:hover { transform: translateY(-6px); border-color: rgba(255, 211, 90, 0.5); }
.quick__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; max-width: 60%; }
.quick__text strong { font-size: 19px; font-weight: 800; line-height: 1.25; }
.quick__text small { color: var(--muted); font-size: 13px; }
.quick__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; color: var(--gold); font-size: 13px; font-weight: 700; }
.quick__card:hover .quick__go .icon { transform: translateX(4px); }
.quick__go .icon { transition: transform 0.2s; }
.quick__char { position: absolute; right: -10px; bottom: 0; width: 66%; height: auto; transition: transform 0.4s; }
.quick__card:hover .quick__char { transform: scale(1.05) translateY(-4px); }

/* ---------- Footer ---------- */
.ft { background: var(--bg-deep); }
.ft__grid { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 40px; padding-top: 50px; padding-bottom: 36px; }
.ft__brand img { width: 170px; height: auto; margin-bottom: 14px; }
.ft__top { color: var(--gold); font-size: 14px; font-weight: 700; }
.ft__col { display: flex; flex-direction: column; gap: 12px; }
.ft__col h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 17px; }
.ft__col h3 .icon { color: var(--gold); }
.ft__col p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.ft__col a { color: var(--cyan); }
.ft__tag { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 12px; font-weight: 700; }
.ft__legal { padding-top: 18px; padding-bottom: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- Popup bài viết ---------- */
html.modal-open, html.menu-open { overflow: hidden; }
.news-modal { position: fixed; z-index: 60; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.news-modal__backdrop { position: absolute; inset: 0; background: rgba(3, 6, 18, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade 0.2s ease; }
@keyframes fade { from { opacity: 0; } }
.news-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 760px;
  max-width: 100%;
  max-height: min(820px, calc(100vh - 48px));
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, #121A3F 0%, #0B1129 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  outline: none;
  animation: pop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.news-modal__x {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass-2);
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s, background 0.2s;
}
.news-modal__x:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }
.news-modal__head { padding: 26px 70px 18px 28px; border-bottom: 1px solid var(--line); }
.news-modal__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.news-modal__tag { padding: 3px 12px; border-radius: 999px; background: var(--orange); color: #FFFFFF; font-size: 12px; font-weight: 800; }
.news-modal[data-kind="news"] .news-modal__tag { background: #2E8BEA; }
.news-modal[data-kind="event"] .news-modal__tag { background: #22B565; }
.news-modal__date { color: var(--muted); font-size: 14px; }
.news-modal__title { font-size: 26px; font-weight: 800; line-height: 1.3; }
.news-modal__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 28px 10px; }
.news-modal__img { width: 100%; height: auto; margin-bottom: 18px; border-radius: 14px; }
.news-modal__body { color: rgba(238, 242, 255, 0.88); font-size: 16px; line-height: 1.75; }
.news-modal__body p { margin: 0 0 12px; }
.news-modal__body h3 { margin: 22px 0 8px; font-size: 18px; color: var(--gold); }
.news-modal__body ul { margin: 0 0 12px; padding-left: 22px; }
.news-modal__body li { margin-bottom: 4px; }
.news-modal__body li::marker { color: var(--orange); }
.news-modal__body b { color: #FFFFFF; }
.news-modal__body a { color: var(--cyan); text-decoration: underline; }
.news-modal__body img { max-width: 100%; height: auto; border-radius: 12px; }
.news-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.news-modal__nav, .news-modal__close { min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.news-modal__nav { border: 1px solid var(--line); background: none; }
.news-modal__nav:hover:not(:disabled) { background: var(--glass-2); }
.news-modal__nav:disabled { opacity: 0.3; cursor: default; }
.news-modal__close { min-width: 120px; border: 0; background: var(--grad); color: #2A1200; }

/* ==========================================================================
   Thành phần "VIP": hiện dần khi cuộn · nút trailer · đăng ký trước · nhân vật · pháp lý
   ========================================================================== */

/* Hiện dần khi cuộn (chỉ ẩn khi có JS – html.js) */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.js .reveal.is-in { opacity: 1; transform: none; }

.sec__sub { max-width: 640px; margin-top: 12px; color: var(--muted); font-size: 15px; }

/* ---------- Nút xem trailer ---------- */
.trailer-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.2s, border-color 0.2s;
}
.trailer-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(242, 207, 118, 0.7); }
.trailer-btn__play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-btn);
  color: #1E1206;
}
.trailer-btn__play .icon { margin-left: 2px; }
.trailer-btn__play::after {                       /* vòng sóng lan */
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(242, 207, 118, 0.6);
  border-radius: 50%;
  animation: tr-ring 1.8s ease-out infinite;
}
@keyframes tr-ring { to { transform: scale(1.5); opacity: 0; } }

.trailer-modal { position: fixed; z-index: 70; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.trailer-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 5, 14, 0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.trailer-modal__dialog { position: relative; width: min(1100px, 100%); outline: none; animation: pop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.trailer-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.trailer-modal__frame iframe, .trailer-modal__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.trailer-modal__soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(rgba(4, 10, 26, 0.55), rgba(4, 10, 26, 0.55)), url(../assets/images/modern/key-art-1280.webp?v=e4d71384) center / cover;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 0 2000px rgba(4, 10, 26, 0.6);
}
.trailer-modal__x {
  position: absolute;
  z-index: 1;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass-2);
  font-size: 24px;
  line-height: 1;
}
.trailer-modal__x:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- Đăng ký trước ---------- */
.prereg__box { max-width: 980px; margin: 0 auto; padding: 30px 34px 26px; }
.prereg__count { text-align: center; color: var(--muted); font-size: 15px; }
.prereg__count strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF6D0, #F2CF76 60%, #D6A23E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.prereg__track { position: relative; margin: 26px 12px 74px; }
.prereg__bar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); overflow: hidden; }
.prereg__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #D6A23E, #F2CF76 70%, #FFF1C2);
  box-shadow: 0 0 14px rgba(242, 207, 118, 0.6);
}
.prereg__miles { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.prereg__mile {
  position: absolute;
  top: -7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  transform: translateX(-50%);
  text-align: center;
}
.prereg__mile:last-child { transform: translateX(-100%); align-items: flex-end; text-align: right; }
.prereg__dot {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: #0E1530;
}
.prereg__mile:last-child .prereg__dot { margin-right: -12px; }
.prereg__mile strong { margin-top: 6px; color: #FFFFFF; font-size: 14px; font-weight: 800; }
.prereg__mile small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.prereg__mile.is-reached .prereg__dot { border-color: #FFF1C2; background: var(--gold-btn); box-shadow: 0 0 12px rgba(242, 207, 118, 0.8); }
.prereg__mile.is-reached small { color: #F2CF76; }

.prereg__form { max-width: 620px; margin: 0 auto; }
.prereg__row { display: flex; gap: 10px; }
.prereg__input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(4, 10, 26, 0.6);
  color: #FFFFFF;
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.prereg__input::placeholder { color: rgba(220, 230, 255, 0.45); }
.prereg__input:focus { border-color: rgba(242, 207, 118, 0.8); box-shadow: 0 0 0 3px rgba(242, 207, 118, 0.18); }
.prereg__submit {
  flex: none;
  height: 50px;
  padding: 0 26px;
  border: 0;
  background: var(--gold-btn);
  clip-path: var(--chamfer);
  color: #1E1206;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: filter 0.2s;
}
.prereg__submit:hover:not(:disabled) { filter: brightness(1.08); }
.prereg__submit:disabled, .prereg__input:disabled { opacity: 0.5; cursor: default; }
.prereg__agree { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 13px; cursor: pointer; }
.prereg__agree input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #E9BE5C; }
.prereg__msg { min-height: 22px; margin-top: 8px; font-size: 14px; font-weight: 700; }
.prereg__msg.is-ok { color: #3DDC84; }
.prereg__msg.is-err { color: #FF7A6B; }

.prereg__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.prereg__sbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-2);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s;
}
.prereg__sbtn:hover { background: rgba(255, 255, 255, 0.18); }
.prereg__sbtn--fb { background: #1877F2; border-color: #1877F2; }
.prereg__sbtn--fb:hover { background: #3B8CF5; }

/* ---------- Hệ thống nhân vật ---------- */
.heroes {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "art info" "pick pick";
  align-items: center;
  gap: 8px 30px;
  padding: 30px 34px 24px;
  overflow: hidden;
}
.heroes__art { grid-area: art; position: relative; }
.heroes__art::before {                       /* quầng sáng sau nhân vật */
  content: '';
  position: absolute;
  inset: 10% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 207, 118, 0.35), rgba(79, 209, 255, 0.12) 60%, transparent);
  filter: blur(10px);
}
.heroes__art img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55)); animation: float 5s ease-in-out infinite; }
.heroes__info { grid-area: info; }
.heroes__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.heroes__tag {
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.heroes__tag:empty { display: none; }
.heroes__tag--rar { border-color: transparent; background: var(--gold-btn); color: #1E1206; }
.heroes__tag[data-elem="dark"] { border-color: rgba(155, 123, 255, 0.6); color: #CBB8FF; }
.heroes__tag[data-elem="light"] { border-color: rgba(255, 211, 90, 0.6); color: #FFE29A; }
.heroes__tag[data-elem="forest"] { border-color: rgba(61, 220, 132, 0.6); color: #9BF0BF; }
.heroes__name {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  background: linear-gradient(180deg, #FFFFFF 30%, #F2CF76);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.heroes__stars { margin-top: 6px; color: #F2CF76; font-size: 18px; letter-spacing: 3px; text-shadow: 0 0 10px rgba(242, 207, 118, 0.6); }
.heroes__desc { margin-top: 12px; color: var(--muted); font-size: 15px; }
.heroes__sk-title { margin: 18px 0 8px; color: #F2CF76; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.heroes__skills { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.heroes__skills li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  font-weight: 600;
}
.heroes__sk-ico {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2A3A6E, #182246);
  box-shadow: inset 0 0 0 1px rgba(242, 207, 118, 0.5);
  color: #F2CF76;
  font-size: 13px;
  font-weight: 800;
}
.heroes__nav { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.heroes__index { color: var(--muted); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.heroes__pick {
  grid-area: pick;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.heroes__pick::-webkit-scrollbar { display: none; }
.heroes__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: #0E1530;
  opacity: 0.6;
  filter: saturate(0.6);
  transition: opacity 0.2s, filter 0.2s, border-color 0.2s, transform 0.2s;
}
.heroes__thumb img { width: 100%; height: 100%; object-fit: cover; }
.heroes__thumb:hover { opacity: 1; filter: none; }
.heroes__thumb[aria-selected="true"] {
  opacity: 1;
  filter: none;
  border-color: #F2CF76;
  box-shadow: 0 0 14px rgba(242, 207, 118, 0.55);
  transform: translateY(-3px);
}
.heroes.is-swap .heroes__art img { animation: hero-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), float 5s ease-in-out 0.5s infinite; }
.heroes.is-swap .heroes__info { animation: info-in 0.45s ease; }
@keyframes hero-in { from { opacity: 0; transform: translateX(-30px) scale(0.96); } }
@keyframes info-in { from { opacity: 0; transform: translateX(16px); } }

/* ---------- Footer: pháp lý ---------- */
.ft__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  padding-bottom: 18px;
  border-top: 1px solid var(--line);
}
.ft__links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ft__links a { color: var(--text); font-size: 14px; font-weight: 600; }
.ft__links a:hover { color: var(--gold); }
.ft__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.ft__badge {
  padding: 6px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

/* ==========================================================================
   Tablet & mobile
   ========================================================================== */
@media (max-width: 1100px) {
  .news { grid-template-columns: minmax(0, 1fr); }
  .quick { grid-template-columns: repeat(2, 1fr); }
  .ft__grid { grid-template-columns: 1fr 1fr; }
  .ft__brand { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .ft__brand img { margin: 0; }
}

@media (max-width: 960px) {
  :root { --header-h: 62px; }
  .hd { gap: 8px; padding: 0 10px; }
  .hd__brand img { height: 66px; margin-top: 2px; }
  .hd__cta { margin-left: auto; height: 40px; padding: 0 14px; gap: 8px; font-size: 13px; }
  .hd__burger {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--glass-2);
  }
  .hd__burger span { display: block; height: 2px; border-radius: 1px; background: #FFFFFF; transition: transform 0.25s, opacity 0.25s; }
  .site-header.is-open .hd__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .hd__burger span:nth-child(2) { opacity: 0; }
  .site-header.is-open .hd__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Menu thả xuống toàn màn hình, kính mờ */
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 18px 16px;
    overflow-y: auto;
    background: rgba(7, 11, 26, 0.94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
  }
  .site-header.is-open .main-nav { opacity: 1; visibility: visible; transform: none; }
  .nav-btn { padding: 16px 18px; border-radius: 14px; color: var(--text); font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav-btn--pc-only { display: none; }
  .nav-btn--m-only { display: block; }

  /* Ngôn ngữ – mobile: nút gọn (chỉ quả địa cầu + mã), danh sách thả xuống */
  .lang-picker__toggle { height: 40px; padding: 0 12px; gap: 5px; font-size: 13px; }
  .lang-picker__caret { display: none; }
  .lang-picker__list { right: -50px; }
  .lang-picker__item { min-height: 48px; font-size: 16px; }

  .hero { min-height: min(calc(100svh - var(--header-h)), 860px); padding: 80px 0 70px; }
  .hero__shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(7, 26, 51, 0.85) 38%, rgba(7, 26, 51, 0.1) 70%); }
  .waves { height: 56px; }
  .hero__bg img { object-position: center top; }
  .hero__content { align-items: center; text-align: center; }
  .hero__sub { font-size: 15px; }
  .dl { width: 100%; max-width: 440px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl__btn { height: 54px; padding: 0 12px; gap: 10px; text-align: left; }
  .dl__txt strong { font-size: 16px; }
  .countdown { --cd-fs: 26px; }
  .hero__scroll { display: none; }

  .sec { padding: 60px 0; }
  .wrap { padding: 0 16px; }
  .news__banner { min-height: 0; aspect-ratio: 16 / 10; }
  .news-banner__title { font-size: 17px; padding: 40px 16px 34px; }
  .tab { font-size: 12px; }

  /* Tính năng: cuộn ngang dạng thẻ */
  .feat { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .feat__card, .feat:hover .feat__card, .feat .feat__card:hover, .feat:not(:hover) .feat__card:first-child { flex: 0 0 78%; height: 300px; scroll-snap-align: center; }
  .feat__card img { filter: none; }

  .prereg__box { padding: 22px 16px 18px; }
  .prereg__track { margin: 22px 30px 92px 4px; }
  .prereg__mile, .prereg__mile:last-child { width: 64px; transform: translateX(-50%); align-items: center; text-align: center; }
  .prereg__mile:last-child .prereg__dot { margin-right: 0; }
  .prereg__mile strong { font-size: 13px; }
  .prereg__mile small { font-size: 10.5px; }
  .prereg__row { flex-direction: column; }
  .prereg__input { flex: none; width: 100%; }
  .prereg__submit { width: 100%; }

  .heroes { grid-template-columns: 1fr; grid-template-areas: "art" "info" "pick"; padding: 18px 14px; gap: 6px; }
  .heroes__info { text-align: center; }
  .heroes__tags, .heroes__nav { justify-content: center; }
  .heroes__skills li { text-align: left; }
  .heroes__pick { justify-content: flex-start; }
  .heroes__thumb { width: 54px; height: 54px; }

  .ft__trust { flex-direction: column; text-align: center; margin-top: 8px; }
  .ft__grid { padding-bottom: 28px; }
  .ft__links { justify-content: center; }
  .trailer-modal { padding: 12px; }
  .trailer-modal__x { top: -46px; }

  .bounty { padding: 20px 10px 18px; }
  .bounty__slot--side { display: none; }
  .bounty__slot--center { width: 100%; }

  .quick { grid-template-columns: 1fr 1fr; gap: 12px; }
  .quick__card { min-height: 180px; padding: 14px; }
  .quick__text { max-width: 70%; }
  .quick__text strong { font-size: 15px; }
  .quick__go { font-size: 12px; }

  .ft__grid { grid-template-columns: 1fr; gap: 26px; padding-top: 36px; }
  .ft__brand { flex-direction: column; gap: 10px; }

  .news-modal { padding: 10px; align-items: stretch; }
  .news-modal__dialog { width: 100%; height: 100%; max-height: none; border-radius: 18px; }
  .news-modal__head { padding: 18px 58px 14px 18px; }
  .news-modal__title { font-size: 20px; }
  .news-modal__scroll { padding: 16px 18px 8px; }
  .news-modal__foot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .news-modal__nav { padding: 0 12px; font-size: 13px; }
  .news-modal__close { min-width: 90px; }
}

/* Màn hình rất hẹp (≤ 380px): thu gọn header để nút menu không bị bóp */
@media (max-width: 420px) {
  .countdown { --cd-fs: 24px; padding: 12px 13px 14px; }
  .countdown__head { gap: 10px; }
  .countdown__title { font-size: 10px; letter-spacing: 0.12em; }
  .countdown__when { font-size: 11px; }
}

@media (max-width: 380px) {
  .hd__burger { flex: none; }
  .hd__brand img { height: 58px; }
  .hd__cta { padding: 0 10px; gap: 6px; font-size: 12px; letter-spacing: 0.03em; }
  .hd__cta .icon { display: none; }
  .lang-picker__toggle { padding: 0 9px; }
}

/* ==========================================================================
   Cân đối theo loại màn hình
   ========================================================================== */

/* Laptop màn thấp (1366×768, 1280×720…): thu gọn ảnh bìa để cả cụm chữ + nút + icon nằm trọn màn đầu */
@media (min-width: 961px) and (max-height: 880px) {
  .hero { padding: 96px 0 64px; }
  .hero__content { gap: 13px; }
  .hero__tagline { font-size: clamp(30px, 3.4vw, 46px); }
  .hero__sub { font-size: 15px; }
  .countdown { padding: 9px 13px 11px; gap: 6px; }
  .countdown { --cd-fs: 26px; }
  .dl { grid-template-columns: repeat(2, 196px); gap: 8px; }
  .dl__btn { height: 52px; }
  .dl__txt strong { font-size: 16px; }
  .social__link { width: 44px; }
}
@media (min-width: 961px) and (max-height: 740px) {
  .hero { padding: 72px 0 44px; }
  .hero__content { gap: 10px; }
  .hero__tagline { font-size: clamp(28px, 3vw, 40px); }
  .hero__sub { display: none; }
  .hero__scroll { display: none; }
  .countdown { --cd-fs: 23px; }
  .dl__btn { height: 48px; }
}

/* Tablet ngang / laptop nhỏ (961–1280px): chữ khẩu hiệu vừa khung, menu thưa hơn */
@media (min-width: 961px) and (max-width: 1280px) {
  .hero__tagline { max-width: 520px; font-size: clamp(30px, 3.6vw, 44px); }
  .hd { gap: 16px; }
  .nav-btn { padding: 8px 10px; font-size: 14px; }
}

/* Màn 2K / 4K: phóng to cả trang theo tỉ lệ để không bị nhỏ và dồn vào giữa */
@media (min-width: 2000px) { body { zoom: 1.25; } }
@media (min-width: 2400px) { body { zoom: 1.4; } }
@media (min-width: 3200px) { body { zoom: 1.8; } }

/* Tablet dọc (761–960px): chữ ảnh bìa lớn hơn, ảnh Truy nã không quá khổ */
@media (min-width: 761px) and (max-width: 960px) {
  .hero__tagline { font-size: 42px; }
  .hero__sub { font-size: 17px; }
  .dl { max-width: 520px; }
  .bounty__slot--center { width: 100%; max-width: 560px; }
  .quick { gap: 18px; }
}

/* Điện thoại nhỏ: 4 tab tin tức luôn vừa một hàng */
@media (max-width: 760px) {
  .news__bar { gap: 8px; }
  .news__board { padding: 14px; }
  .tabs { gap: 3px; }
  .tab { --cut: 5px; letter-spacing: -0.01em; text-transform: none; font-size: 11px; padding: 0 2px; }
  .news__more { width: 32px; height: 32px; }
}

/* Điện thoại xoay ngang (thấp, rộng): phủ tối toàn ảnh bìa, nút tải xếp 1 hàng 4 nút */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 520px) {
  .hero { min-height: 0; padding: 30px 0 34px; }
  .hero__shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(4, 12, 30, 0.72) 40%, rgba(4, 12, 30, 0.55) 100%); }
  .hero__content { gap: 10px; }
  .hero__tagline { font-size: 26px; }
  .hero__sub { display: none; }
  .countdown { padding: 8px 12px 10px; }
  .countdown { --cd-fs: 22px; }
  .dl { max-width: 780px; grid-template-columns: repeat(4, 1fr); }
  .dl__btn { height: 48px; }
  .dl__txt strong { font-size: 14px; }
  .main-nav { height: calc(100dvh - var(--header-h)); }
  .nav-btn { padding: 10px 18px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
  body::before, body::after, .waves svg path, .countdown__live::after, .countdown__sep { animation: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Khung cố định: đổi ngôn ngữ hoặc đổi tab không làm khung co giãn
   (giữ chỗ sẵn cho số dòng dài nhất của cả 4 ngôn ngữ; số dòng tính theo em nên tự theo cỡ chữ)
   ========================================================================== */
.hero__tagline { display: flex; flex-direction: column; justify-content: flex-end; max-width: 720px; min-height: calc(2 * 1.08em); }
.hero__sub { min-height: calc(2 * 1.6em); }
.trailer-btn { min-width: 196px; }
.countdown { width: 420px; }                         /* rộng cố định, không theo độ dài chữ */
.countdown__grid { justify-content: space-between; }
.countdown__head { min-width: 0; }
.countdown__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.news-list { min-height: calc(7 * 51px); }          /* luôn đủ chỗ 7 tin – tab ít tin không làm khung thấp lại */

.heroes__name,
.heroes__desc { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.heroes__name { min-height: calc(2 * 1.05em + 0.16em); -webkit-line-clamp: 2; }
.heroes__desc { min-height: calc(3 * 1.6em); -webkit-line-clamp: 3; }
#dang-ky .sec__title { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; line-height: 1.2; }
#dang-ky .sec__sub { min-height: calc(2 * 1.6em); }
.heroes__skills li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .hero__tagline { min-height: calc(3 * 1.08em); }
}
@media (max-width: 420px) {
  .hero__sub { min-height: calc(3 * 1.6em); }
  .countdown { width: 100%; }
  .countdown__head { flex-direction: column; align-items: center; gap: 3px; }   /* tiêu đề + ngày giờ 2 dòng: không bị cắt chữ */
}
@media (max-width: 760px) {
  #dang-ky .sec__title { min-height: calc(2 * 1.2em); font-size: 24px; }
  #dang-ky .sec__sub { min-height: calc(4 * 1.6em); }
  .prereg__agree { min-height: calc(2 * 1.6em); }
  .prereg__share { display: grid; grid-template-columns: 1fr 1fr; }
  .prereg__share > span { grid-column: 1 / -1; text-align: center; }
  .prereg__sbtn { justify-content: center; white-space: nowrap; }
}
@media (max-width: 380px) {
  .news__bar { gap: 5px; }
  .news__more { width: 30px; height: 30px; }
  .tabs { gap: 2px; }
  .tab { --cut: 4px; font-size: 10.5px; padding: 0 1px; letter-spacing: -0.02em; }
  #dang-ky .sec__title { font-size: 21px; }
}

/* ==========================================================================
   Bài viết (PC + điện thoại): trang đọc toàn màn hình nền sáng
   (thanh game + nút tải -> "Quay lại" -> tiêu đề + ngày đăng -> nội dung chữ đậm tối)
   ========================================================================== */
@media all {
  .news-modal { padding: 0; align-items: stretch; }
  .news-modal__backdrop { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .news-modal__dialog {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: #FFFFFF;
    box-shadow: none;
    color: #2B2B2B;
    animation: news-in 0.25s ease;
  }
  @keyframes news-in { from { opacity: 0; transform: translateX(24px); } }
  .news-modal__x { display: none; }

  /* Thanh game trên cùng */
  .news-modal__app {
    position: sticky;
    z-index: 3;
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 58px;
    padding-left: 8px;
    background: #1E1E1E;
    color: #FFFFFF;
  }
  .news-modal__app-icon { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
  .news-modal__app-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
  .news-modal__app-txt strong { overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .news-modal__app-txt span { overflow: hidden; color: rgba(255, 255, 255, 0.75); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .news-modal__app-dl {
    flex: none;
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #5A4128;
    border-radius: 2px;
    background: var(--dl-btn);
    color: #2A1606;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
  }
  .news-modal__app-menu {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 54px;
    height: 58px;
    padding: 0 16px;
    border: 0;
    background: #000000;
  }
  .news-modal__app-menu span { display: block; height: 2px; border-radius: 1px; background: #FFFFFF; }

  /* Thanh "Quay lại" */
  .news-modal__back {
    position: sticky;
    z-index: 2;
    top: 58px;
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 50px;
    padding: 0 12px 0 6px;
    border: 0;
    border-bottom: 1px solid #E2E2E2;
    background: #F2F2F2;
    color: #222222;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
  }
  .news-modal__back .icon { stroke-width: 2.6; }

  /* Tiêu đề + ngày đăng (giữa, xám) */
  .news-modal__head { display: flex; flex-direction: column; padding: 16px 18px 12px; border-bottom: 1px solid #E6E6E6; text-align: center; }
  .news-modal__title { order: 1; color: #1A1A1A; font-size: 18px; line-height: 1.4; }
  .news-modal__meta { order: 2; justify-content: center; gap: 6px; margin: 8px 0 0; color: #8A8A8A; font-size: 13px; font-weight: 700; }
  .news-modal__tag { display: none; }
  .news-modal__posted { display: inline; }
  .news-modal__date { color: inherit; font-size: inherit; }

  /* Nội dung */
  .news-modal__scroll { overflow: visible; padding: 18px 18px 24px; }
  .news-modal__img { border-radius: 4px; }
  .news-modal__body { color: #3A3A3A; font-size: 15px; font-weight: 600; line-height: 1.75; }
  .news-modal__body p { margin: 0 0 14px; }
  .news-modal__body h3 { margin: 30px 0 12px; color: #1A1A1A; font-size: 16px; font-weight: 800; }
  .news-modal__body h3:first-child { margin-top: 0; }
  .news-modal__body b { color: #1A1A1A; }
  .news-modal__body a { color: #D9731F; }
  .news-modal__body li::marker { color: #D9731F; }

  /* Bài trước / bài sau ở cuối */
  .news-modal__foot {
    position: sticky;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #E2E2E2;
    background: #F7F7F7;
  }
  .news-modal__close { display: none; }
  .news-modal__nav { flex: 1; min-height: 40px; border-color: #D6D6D6; border-radius: 4px; background: #FFFFFF; color: #333333; font-size: 14px; }
  .news-modal__nav:hover:not(:disabled) { background: #F0F0F0; }
}
/* Bài ngắn: thanh Bài trước / Bài sau vẫn nằm sát đáy màn hình */
.news-modal__dialog { display: flex; flex-direction: column; }
.news-modal__dialog > * { flex-shrink: 0; }
.news-modal__scroll { flex: 1 0 auto; width: 100%; }
.news-modal__head { width: 100%; }
/* PC: thanh trên trải rộng theo khung 1200px, nội dung là 1 cột đọc 860px ở giữa */
@media (min-width: 761px) {
  .news-modal__app { gap: 14px; height: 66px; padding: 0 max(24px, calc(50% - 600px)); }
  .news-modal__app-icon { width: 46px; height: 46px; }
  .news-modal__app-txt strong { font-size: 16px; }
  .news-modal__app-txt span { font-size: 13px; }
  .news-modal__app-dl { height: 40px; padding: 0 22px; font-size: 15px; }
  .news-modal__app-menu { display: none; }               /* PC đã có menu trên header trang */
  .news-modal__back { top: 66px; height: 52px; padding-left: max(16px, calc(50% - 442px)); }
  .news-modal__head,
  .news-modal__scroll { max-width: 860px; margin: 0 auto; }
  .news-modal__head { padding: 34px 24px 18px; }
  .news-modal__title { font-size: 28px; }
  .news-modal__meta { font-size: 14px; }
  .news-modal__scroll { padding: 26px 24px 40px; }
  .news-modal__img { border-radius: 6px; }
  .news-modal__body { font-size: 16.5px; }
  .news-modal__body h3 { font-size: 18px; }
  .news-modal__foot { justify-content: center; gap: 16px; padding: 12px 24px; }
  .news-modal__nav { flex: 0 1 240px; }
}

/* ==========================================================================
   ĐIỆN ẢNH (index.html)
   2 ảnh bìa có chiều sâu · 3 mở màn · 4 chuyển cảnh khi cuộn · 5 nhân vật kiểu poster
   6 chữ & khoảng cách · 7 hiệu ứng nhỏ. JS: initIntro / initHeroFx / initTilt / initReveal.
   ========================================================================== */

/* ---- 6. Chữ: tiêu đề chữ in hoa đậm (Be Vietnam Pro 800) thay Bungee ---- */
:root { --font-display: 'Be Vietnam Pro', 'Leelawadee UI', 'Noto Sans Thai', Tahoma, system-ui, sans-serif; }
.sec { padding: 104px 0; }
.sec__head { gap: 10px; margin-bottom: 46px; }
.sec__eyebrow { display: inline-flex; align-items: center; gap: 14px; }
.sec__eyebrow::before,
.sec__eyebrow::after { content: ''; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.sec__eyebrow::after { transform: scaleX(-1); }
.sec__title {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-top: 0.18em;
  margin-top: -0.18em;
  background: linear-gradient(180deg, #FFFFFF 35%, #F2CF76 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.sec__title::after { transform-origin: center; }
.heroes__name { padding-top: 0.16em; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; }
.prereg__count strong { font-weight: 800; }
.feat__no { font-weight: 800; font-style: italic; }
.glass { border-color: rgba(255, 255, 255, 0.09); }

/* ---- 2. Ảnh bìa có chiều sâu ---- */
.hero__bg {
  translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -14px + var(--sy, 0) * 0.3px);
  scale: 1.06;
  will-change: translate;
}
.hero__content { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 6px + var(--sy, 0) * -0.08px); }
.hero__fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero__fog { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 46%; overflow: hidden; pointer-events: none; }
.hero__fog i {
  position: absolute;
  left: 0;
  bottom: -10%;
  width: 200%;
  height: 100%;
  background:
    radial-gradient(28% 45% at 15% 70%, rgba(190, 220, 255, 0.16), transparent 70%),
    radial-gradient(22% 40% at 45% 80%, rgba(190, 220, 255, 0.12), transparent 70%),
    radial-gradient(30% 50% at 75% 75%, rgba(190, 220, 255, 0.14), transparent 70%);
  filter: blur(8px);
  animation: fog 46s linear infinite;
}
.hero__fog i + i { bottom: -24%; opacity: 0.7; animation-duration: 70s; animation-direction: reverse; }
@keyframes fog { to { transform: translateX(-50%); } }
/* Vệt sáng quét qua tiêu đề mỗi ~7 giây */
.hero__tagline {
  background-image:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%),
    linear-gradient(180deg, #FFFFFF 30%, #FFE29A 100%);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0, 0 0;
  animation: tag-shine 7s ease-in-out 2.4s infinite;
}
@keyframes tag-shine { 0% { background-position: 160% 0, 0 0; } 22%, 100% { background-position: -60% 0, 0 0; } }

/* ---- 3. Mở màn ---- */
.intro { position: fixed; z-index: 200; inset: 0; pointer-events: auto; }
.intro.is-open { pointer-events: none; }
.intro__bar { position: absolute; left: 0; right: 0; height: 50.5%; background: #02060F; transition: transform 0.85s cubic-bezier(0.77, 0, 0.18, 1); }
.intro__bar--top { top: 0; box-shadow: 0 1px 0 rgba(242, 207, 118, 0.25); }
.intro__bar--bot { bottom: 0; }
.intro.is-open .intro__bar--top { transform: translateY(-101%); }
.intro.is-open .intro__bar--bot { transform: translateY(101%); }
.intro__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s, transform 0.6s;
}
.intro__logo img { width: min(340px, 64vw); height: auto; filter: drop-shadow(0 0 30px rgba(242, 207, 118, 0.35)); animation: intro-logo 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.intro__logo i { display: block; width: 240px; height: 1px; background: linear-gradient(90deg, transparent, #F2CF76, transparent); animation: intro-line 1s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes intro-logo { from { opacity: 0; transform: scale(0.9); filter: blur(8px) drop-shadow(0 0 0 transparent); } }
@keyframes intro-line { from { transform: scaleX(0); opacity: 0; } }
.intro.is-open .intro__logo { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
.intro__skip {
  position: absolute;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: opacity 0.3s;
}
.intro__skip:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }
.intro.is-open .intro__skip { opacity: 0; }
html.is-intro .hero__content,
html.is-intro .hero__bg img { animation-play-state: paused; }

/* ---- 4. Chuyển cảnh khi cuộn ---- */
/* Tiêu đề mục: dòng chữ trượt lên từ "khe", gạch chân kéo ra, dòng phụ hiện sau */
html.js .sec__head.reveal { opacity: 1; transform: none; }
html.js .sec__head.reveal .sec__eyebrow { opacity: 0; letter-spacing: 0.7em; transition: opacity 0.9s ease, letter-spacing 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.js .sec__head.reveal .sec__title { clip-path: inset(0 -10% 100% -10%); transform: translateY(32px); transition: clip-path 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s; }
html.js .sec__head.reveal .sec__title::after { transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s; }
html.js .sec__head.reveal .sec__sub { opacity: 0; transform: translateY(10px); transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s; }
html.js .sec__head.reveal.is-in .sec__eyebrow { opacity: 1; letter-spacing: 0.3em; }
html.js .sec__head.reveal.is-in .sec__title { clip-path: inset(-60% -10% -60% -10%); transform: none; }
html.js .sec__head.reveal.is-in .sec__title::after { transform: none; }
html.js .sec__head.reveal.is-in .sec__sub { opacity: 1; transform: none; }
/* Khối có data-stagger: từng phần tử con hiện lần lượt */
html.js .reveal[data-stagger] { opacity: 1; transform: none; }
html.js .reveal[data-stagger]:not(.is-in) > * { opacity: 0; }
html.js .reveal[data-stagger].is-in > * { animation: stag-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes stag-in { from { opacity: 0; transform: translateY(40px) scale(0.98); } }

/* ---- 5. Nhân vật kiểu poster ---- */
.heroes { position: relative; isolation: isolate; }
.heroes__ghost {                            /* tên nhân vật khổng lồ, viền mờ, nằm sau cả thẻ */
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -0.2em;
  overflow: hidden;
  padding-top: 0.12em;
  color: transparent;
  font-size: clamp(64px, 10.5vw, 168px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 1.5px rgba(242, 207, 118, 0.2);
  background: linear-gradient(180deg, rgba(242, 207, 118, 0.16), rgba(242, 207, 118, 0) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}
.heroes__art::after {                       /* tia sáng quét ngang khi đổi nhân vật */
  content: '';
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, #FFE7A8 30%, #FFFFFF 50%, #FFE7A8 70%, transparent);
  box-shadow: 0 0 22px 6px rgba(255, 205, 110, 0.55);
  opacity: 0;
  pointer-events: none;
}
.heroes.is-swap .heroes__art::after { animation: hero-beam 0.75s cubic-bezier(0.7, 0, 0.2, 1); }
.heroes.is-swap .heroes__art img { animation: hero-wipe 0.75s cubic-bezier(0.7, 0, 0.2, 1), float 5s ease-in-out 0.75s infinite; }
.heroes.is-swap .heroes__ghost { animation: ghost-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes hero-beam { 0% { left: 0; opacity: 1; } 88% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes hero-wipe { from { clip-path: inset(-10% 100% -10% -10%); } to { clip-path: inset(-10% -10% -10% -10%); } }
@keyframes ghost-in { from { opacity: 0; letter-spacing: 0.12em; } }
@media (min-width: 961px) {
  .heroes { padding-top: 40px; padding-bottom: 28px; }
  .heroes__art img { width: 114%; max-width: none; margin: -6% -7% -4%; }
}

/* ---- 7. Hiệu ứng nhỏ ---- */
/* Vệt sáng lướt qua nút khi rê chuột */
.dl__btn, .hd__cta, .prereg__submit { position: relative; overflow: hidden; }
.dl__btn::after, .hd__cta::after, .prereg__submit::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.dl__btn:hover::after, .hd__cta:hover::after, .prereg__submit:hover:not(:disabled)::after { left: 140%; transition: left 0.75s ease; }
/* Nút Tải game: quầng sáng nhịp nhẹ */
.hd__cta { animation: cta-pulse 2.8s ease-in-out infinite; }
.hd__cta:hover { animation: none; }
@keyframes cta-pulse {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(241, 160, 79, 0.25)); }
  50% { filter: drop-shadow(0 0 20px rgba(248, 190, 100, 0.75)); }
}
/* Thẻ nghiêng 3D theo chuột (class .tilt do JS gắn, chỉ PC) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
.feat__card.tilt { transition: flex 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, transform 0.25s ease-out; }
.quick__card.tilt { transition: transform 0.25s ease-out, border-color 0.3s; }
.quick__card.tilt:hover { transform: perspective(900px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tilt__glare {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 240, 200, 0.22), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.tilt:hover .tilt__glare { opacity: 1; }

/* Giảm chuyển động: tắt hết hiệu ứng điện ảnh, mọi thứ hiện ngay */
/* Điện thoại: tiêu đề mục in hoa nhỏ lại để luôn 1 dòng ở mọi ngôn ngữ */
@media (max-width: 760px) { .sec { padding: 76px 0; } .sec__title { font-size: 25px; } }
@media (max-width: 420px) { .sec__title { font-size: 21px; letter-spacing: 0.01em; } }

@media (prefers-reduced-motion: reduce) {
  .hero__fog, .hero__fx, .intro { display: none; }
  html.js .reveal[data-stagger]:not(.is-in) > *,
  html.js .sec__head.reveal .sec__eyebrow,
  html.js .sec__head.reveal .sec__sub { opacity: 1; transform: none; }
  html.js .sec__head.reveal .sec__title { clip-path: none; transform: none; }
  html.js .sec__head.reveal .sec__title::after { transform: none; }
}

/* ==========================================================================
   Kỹ năng nhân vật (dữ liệu thật từ game: js/heroes.js)
   4 ô kỹ năng có icon game · khung mô tả cao cố định, chữ dài thì cuộn trong khung
   ========================================================================== */
.heroes__desc { display: none; }
.heroes__skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.heroes__skills li { display: block; min-width: 0; padding: 0; border: 0; background: none; }
.heroes__sk {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.heroes__sk img { flex: none; width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(242, 207, 118, 0.25); }
.heroes__sk-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.heroes__sk-txt small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.heroes__sk--rage .heroes__sk-txt small { color: #FF9A5C; }
.heroes__sk-txt strong { overflow: hidden; font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.heroes__sk:hover { background: rgba(255, 255, 255, 0.08); }
.heroes__sk[aria-selected="true"] { border-color: rgba(242, 207, 118, 0.7); background: rgba(242, 207, 118, 0.1); }
.heroes__sk[aria-selected="true"] img { box-shadow: 0 0 0 2px #F2CF76, 0 0 14px rgba(242, 207, 118, 0.5); }
.heroes__sk-desc {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(3, 10, 24, 0.45);
}
.heroes__sk-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.heroes__sk-head strong { overflow: hidden; color: #F2CF76; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.heroes__sk-head span { flex: none; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.heroes__sk-text {
  height: calc(5 * 1.6em);                      /* cao cố định 5 dòng – đổi tướng/kỹ năng/ngôn ngữ không nhảy khung */
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  color: rgba(225, 233, 250, 0.85);
  font-size: 14px;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 207, 118, 0.4) transparent;
}
.heroes__sk-text::-webkit-scrollbar { width: 5px; }
.heroes__sk-text::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(242, 207, 118, 0.4); }
@media (max-width: 960px) {
  .heroes__sk-head { justify-content: center; }
  .heroes__sk-text { height: calc(7 * 1.6em); text-align: left; }
}
@media (max-width: 960px) {
  .heroes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .heroes__tags { flex-wrap: nowrap; gap: 4px; }
  .heroes__tag { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 3px 8px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .heroes__skills { gap: 6px; }
  .heroes__sk { gap: 7px; padding: 5px 7px 5px 5px; }
  .heroes__sk img { width: 34px; height: 34px; }
  .heroes__sk-txt strong { font-size: 12.5px; }
}

/* Ảnh 5 tính năng = ảnh trong game (assets/images/features/ingame-N.jpg, tạo bởi _archive/tools/build_ingame_features.py) */
.feat__card img { object-position: 50% 50%; filter: saturate(0.9) brightness(0.78); }

/* Mục tin chưa có bài (bài hẹn giờ chưa tới giờ đăng) */
.news-list__empty { padding: 28px 10px; color: var(--muted); font-size: 14px; text-align: center; list-style: none; }

/* ==========================================================================
   Điểm nổi bật trên mobile/tablet (≤960px): bỏ cuộn ngang, xếp dạng lưới
   thẻ 01 rộng toàn khung (16:9) + 4 thẻ còn lại lưới 2x2 – thấy đủ 5 tính năng
   ========================================================================== */
@media (max-width: 960px) {
  .feat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    height: auto;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .feat__card, .feat:hover .feat__card, .feat .feat__card:hover, .feat:not(:hover) .feat__card:first-child {
    flex: none;
    height: auto;
    aspect-ratio: 16 / 11;
    border-color: var(--line);
    border-radius: 14px;
  }
  .feat .feat__card:first-child, .feat:hover .feat__card:first-child, .feat:not(:hover) .feat__card:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
    border-color: rgba(255, 211, 90, 0.6);
  }
  .feat__card img, .feat__card:hover img, .feat:not(:hover) .feat__card:first-child img { transform: none; filter: saturate(0.95) brightness(0.85); }
  .feat__no { top: 10px; left: 12px; font-size: 24px; }
  .feat__title { left: 12px; right: 10px; bottom: 10px; font-size: 14px; }
  .feat__card:first-child .feat__no { top: 14px; left: 16px; font-size: 32px; }
  .feat__card:first-child .feat__title { left: 16px; bottom: 14px; font-size: 20px; }
}
@media (max-width: 520px) {
  .feat__card, .feat:hover .feat__card, .feat .feat__card:hover { aspect-ratio: 1 / 1; }
  .feat__card::after { background: linear-gradient(to top, rgba(7, 11, 26, 0.95), transparent 65%); }
  .feat__title { font-size: 13.5px; }
}

/* ==========================================================================
   Ảnh bìa trang đầu: video sóng biển làm nền + băng Mũ Rơm (ảnh nền trong) phía trước
   PC: nhóm nhân vật đứng bên phải, mép trái mờ dần dưới cột chữ.
   Mobile/tablet: nhóm nhân vật ở trên, chữ + đếm ngược + nút tải ở dưới.
   ========================================================================== */
.hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; animation: hero-zoom 18s ease-out both; }
.hero__crew {
  position: absolute;
  z-index: -1;
  right: -1%;
  bottom: 0;
  width: min(74%, 1500px);
  pointer-events: none;
  translate: calc(var(--px, 0) * -34px) calc(var(--py, 0) * -18px + var(--sy, 0) * 0.12px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.hero__crew img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 10, 0.5));
  animation: crew-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both, crew-float 7s ease-in-out 1.3s infinite;
}
@keyframes crew-in { from { opacity: 0; transform: translateY(40px) scale(0.96); } }
@keyframes crew-float { 50% { transform: translateY(-8px); } }
html.is-intro .hero__crew img { animation-play-state: paused; }
.hero__shade {
  background:
    linear-gradient(90deg, rgba(4, 10, 26, 0.92) 0%, rgba(4, 10, 26, 0.7) 28%, rgba(4, 10, 26, 0.2) 52%, rgba(4, 10, 26, 0) 70%),
    linear-gradient(0deg, var(--bg) 0%, rgba(7, 26, 51, 0) 32%);
}
@media (max-width: 960px) {
  .hero { padding-top: 47vw; }
  .hero__crew {
    top: calc(var(--header-h) * 0.2);
    bottom: auto;
    left: 50%;
    right: auto;
    width: 108%;
    margin-left: -54%;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .hero__shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(7, 26, 51, 0.82) 30%, rgba(7, 26, 51, 0.15) 58%, rgba(7, 26, 51, 0) 75%); }
}
@media (max-width: 520px) {
  .hero { padding-top: 62vw; }
  .hero__crew { top: 4px; width: 132%; margin-left: -66%; }
}
@media (max-width: 960px) and (orientation: landscape) and (max-height: 520px) {
  .hero { padding-top: 30px; }
  .hero__crew { top: auto; bottom: 0; left: auto; right: -4%; width: 58%; margin-left: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%); mask-image: linear-gradient(90deg, transparent 0, #000 25%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__crew img { animation: none; }
}

/* ==========================================================================
   Đăng ký trước – mô phỏng: 1 nút ghi danh + 4 thẻ quà mở khoá Giftcode theo mốc
   ========================================================================== */
.prereg__form { display: flex; flex-direction: column; align-items: center; max-width: 620px; }
.prereg__submit { min-width: 260px; height: 54px; font-size: 16px; }
.prereg__submit.is-done { opacity: 0.55; }
.prereg__msg { min-height: 22px; text-align: center; }
.prereg__note { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.prereg__rtitle { margin: 26px 0 12px; color: #F2CF76; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-align: center; text-transform: uppercase; }
.prereg__rewards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.prereg__reward {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(3, 10, 24, 0.45);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.prereg__reward.is-open { border-color: rgba(242, 207, 118, 0.7); box-shadow: 0 0 22px rgba(242, 207, 118, 0.18); background: linear-gradient(180deg, rgba(242, 207, 118, 0.12), rgba(3, 10, 24, 0.45)); }
.prereg__rhead { display: flex; align-items: center; gap: 8px; margin: 0; }
.prereg__rmile { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--gold-btn); color: #1E1206; font-size: 12px; font-weight: 800; }
.prereg__rhead strong { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.prereg__ritems {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  min-height: calc(5 * 1.55em);
  margin: 0;
  color: rgba(225, 233, 250, 0.78);
  font-size: 12.5px;
  line-height: 1.55;
}
.prereg__rcode { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-top: auto; }
.prereg__lock { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.3; }
.prereg__lock .icon { flex: none; stroke: currentColor; fill: none; stroke-width: 2; }
.prereg__rcode code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px dashed rgba(242, 207, 118, 0.7);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #FFE7A8;
  font: 800 13px/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prereg__copy { flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--gold-btn); color: #1E1206; font-size: 12px; font-weight: 800; }
.prereg__glink { width: 100%; padding: 9px 10px; border-radius: 8px; background: #1877F2; color: #FFFFFF; font-size: 12.5px; font-weight: 800; text-align: center; }
@media (max-width: 960px) {
  .prereg__rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .prereg__rewards { grid-template-columns: minmax(0, 1fr); }
  .prereg__ritems { -webkit-line-clamp: 4; min-height: calc(4 * 1.55em); }
  .prereg__submit { width: 100%; min-width: 0; }
}
.prereg__form .prereg__row { width: 100%; }
.prereg__form .prereg__submit { min-width: 0; height: 50px; font-size: 15px; }
/* 5 mốc quà Đăng ký trước */
.prereg__rewards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.prereg__reward { padding: 12px; }
.prereg__ritems { -webkit-line-clamp: 4; min-height: calc(4 * 1.55em); font-size: 12px; }
.prereg__rcode code { padding: 7px 8px; font-size: 12px; }
.prereg__copy { padding: 0 9px; font-size: 11.5px; }
@media (max-width: 1100px) { .prereg__rewards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .prereg__rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .prereg__rewards { grid-template-columns: minmax(0, 1fr); }
  .prereg__ritems { -webkit-line-clamp: 3; min-height: calc(3 * 1.55em); font-size: 12.5px; }
  .prereg__mile small { display: none; }      /* 5 mốc trên thanh: chỉ hiện 5K/10K…, tên quà xem ở thẻ bên dưới */
  .prereg__track { margin-bottom: 52px; }
}
/* Thẻ hẹp (5 / 3 / 2 cột): mã + nút sao chép xếp 2 dòng, tên quà tối đa 2 dòng */
@media (min-width: 521px) {
  .prereg__rhead { align-items: flex-start; }
  .prereg__rhead strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: calc(2 * 1.25em);
    line-height: 1.25;
    white-space: normal;
  }
  .prereg__rcode { flex-wrap: wrap; gap: 6px; }
  .prereg__rcode code { flex: 1 1 100%; text-align: center; }
  .prereg__copy { flex: 1 1 100%; height: 30px; }
}

/* ==========================================================================
   Ảnh bìa Zoro vs Mihawk (thay video + nhóm Mũ Rơm)
   PC: ảnh chiếm 76% bên phải, mép trái mờ dần vào nền tối để cột chữ dễ đọc.
   Mobile/tablet: ảnh ở trên (cắt giữa hai nhân vật), mờ dần xuống dưới, chữ + nút ở dưới.
   ========================================================================== */
.hero { background: radial-gradient(60% 70% at 70% 45%, rgba(40, 150, 200, 0.18), transparent 70%), #06122A; }
.hero__art {
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 76%;
  overflow: hidden;
  translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -12px + var(--sy, 0) * 0.25px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.hero__art picture, .hero__art img { display: block; width: 100%; height: 100%; }
.hero__art img { object-fit: cover; object-position: 50% 35%; scale: 1.04; animation: hero-zoom 18s ease-out both; }
html.is-intro .hero__art img { animation-play-state: paused; }
.hero__shade {
  background:
    linear-gradient(90deg, rgba(6, 18, 42, 0.92) 0%, rgba(6, 18, 42, 0.6) 26%, rgba(6, 18, 42, 0) 46%),
    linear-gradient(0deg, var(--bg) 0%, rgba(7, 26, 51, 0) 30%);
}
@media (min-width: 961px) { .hero__tagline { max-width: 600px; } }
@media (max-width: 960px) {
  .hero { padding-top: min(74vw, 560px); }
  .hero__art {
    left: 0;
    width: 100%;
    bottom: auto;
    height: min(108vw, 760px);
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }
  .hero__art img { object-position: 52% 30%; }   /* giữ được cả mặt Zoro và Mihawk */
  .hero__shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(6, 18, 42, 0.85) 32%, rgba(6, 18, 42, 0.1) 60%, rgba(6, 18, 42, 0) 75%); }
}
@media (max-width: 520px) {
  .hero { padding-top: 86vw; }
  .hero__art { height: 122vw; }
}
@media (max-width: 960px) and (orientation: landscape) and (max-height: 520px) {
  .hero { padding-top: 30px; }
  .hero__art { left: auto; right: 0; width: 62%; height: auto; bottom: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
}

/* Quà Giftcode: icon vật phẩm thật từ game (js/items.js) */
.prereg__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  min-height: calc(2 * 58px + 6px);
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}
.prereg__items li { position: relative; display: flex; flex-direction: column; align-items: center; cursor: help; }
.prereg__items img {
  width: 44px;
  height: 44px;
  padding: 3px;
  border: 1px solid rgba(242, 207, 118, 0.35);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.25));
  object-fit: contain;
}
.prereg__iq { margin-top: 2px; color: #FFE7A8; font-size: 11px; font-weight: 800; line-height: 1.1; }
.prereg__in { display: none; }
@media (max-width: 520px) {
  .prereg__items { grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 0; }
  .prereg__items li { flex-direction: row; gap: 10px; cursor: default; }
  .prereg__items img { width: 36px; height: 36px; flex: none; }
  .prereg__in { display: block; order: 2; flex: 1; min-width: 0; color: rgba(225, 233, 250, 0.85); font-size: 13px; }
  .prereg__iq { order: 3; margin: 0; font-size: 13px; }
}
.news-modal__body .gift-list { margin: 0 0 14px; padding: 0; list-style: none; }
.news-modal__body .gift-item { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.news-modal__body .gift-item img { flex: none; width: 40px; height: 40px; padding: 3px; border-radius: 8px; background: #EEF2F7; object-fit: contain; }

/* ==========================================================================
   Đăng ký trước – 5 RƯƠNG QUÀ trên thanh tiến độ.
   Rương đóng (chest-closed.png) → đạt mốc thì mở (chest-open.png) + tia sáng.
   Bấm rương → popup .prereg-pop: danh sách vật phẩm (icon thật) + Giftcode / tiến độ.
   Màu cấp: 1 đồng · 2 bạc · 3 vàng · 4 tím · 5 đỏ huyền thoại (--t1 / --t2).
   ========================================================================== */
.tier-1 { --t1: #E0965A; --t2: #6E3E19; }
.tier-2 { --t1: #BFE0FF; --t2: #3C5A78; }
.tier-3 { --t1: #F2CF76; --t2: #7A5512; }
.tier-4 { --t1: #C59BFF; --t2: #4B2A86; }
.tier-5 { --t1: #FF7A57; --t2: #8A1E12; }

.prereg__box {
  position: relative;
  max-width: 1080px;
  padding: 40px 40px 28px;
  border-color: rgba(242, 207, 118, 0.28);
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(242, 207, 118, 0.13), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(40, 150, 220, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(10, 30, 62, 0.86), rgba(4, 14, 32, 0.92));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.prereg__box::before {                       /* 4 góc ke vàng */
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  --c: rgba(242, 207, 118, 0.75);
  background:
    linear-gradient(var(--c), var(--c)) top left / 26px 2px,
    linear-gradient(var(--c), var(--c)) top left / 2px 26px,
    linear-gradient(var(--c), var(--c)) top right / 26px 2px,
    linear-gradient(var(--c), var(--c)) top right / 2px 26px,
    linear-gradient(var(--c), var(--c)) bottom left / 26px 2px,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 26px,
    linear-gradient(var(--c), var(--c)) bottom right / 26px 2px,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 26px;
  background-repeat: no-repeat;
}

/* Số đếm + dòng mốc kế tiếp */
.prereg__count strong { font-size: clamp(46px, 6.4vw, 76px); letter-spacing: 0.02em; filter: drop-shadow(0 4px 22px rgba(242, 207, 118, 0.35)); }
.prereg__clabel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.prereg__live { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; animation: prereg-live 1.8s infinite; }
@keyframes prereg-live { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } }
.prereg__next {
  display: table;
  margin: 14px auto 0;
  padding: 6px 16px;
  border: 1px solid rgba(242, 207, 118, 0.25);
  border-radius: 999px;
  background: rgba(242, 207, 118, 0.07);
  color: rgba(230, 236, 250, 0.85);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}
.prereg__next b { color: #FFE7A8; font-weight: 800; }

/* Thanh tiến độ */
.prereg__track { margin: 70px 60px 104px 12px; }
.prereg__bar { height: 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.prereg__fill { position: relative; overflow: hidden; border-radius: 6px; background: linear-gradient(90deg, #B97A2A, #F2CF76 70%, #FFF1C2); }
.prereg__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%) -120% 0 / 60% 100% no-repeat;
  animation: prereg-shine 2.6s ease-in-out infinite;
}
@keyframes prereg-shine { to { background-position: 220% 0; } }

/* Mốc = rương */
.prereg__mile, .prereg__mile:last-child { top: -44px; width: 150px; transform: translateX(-50%); align-items: center; text-align: center; }
.prereg__chest {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.prereg__chest::before {                     /* bệ sáng màu theo cấp */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 2px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--t1) 55%, transparent), transparent);
  opacity: 0.6;
}
.prereg__chest img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)) saturate(0.7) brightness(0.8);
  transition: transform 0.3s, filter 0.3s;
}
.prereg__chest:hover img, .prereg__chest:focus-visible img { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)) saturate(0.9) brightness(0.95); }
.prereg__chest:focus-visible { outline: 2px solid var(--t1); outline-offset: 2px; border-radius: 14px; }
.prereg__rays {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--t1) 45%, transparent) 0 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%);
  mask: radial-gradient(circle, #000 18%, transparent 66%);
  opacity: 0;
  transition: opacity 0.4s;
  animation: prereg-spin 16s linear infinite;
}
@keyframes prereg-spin { to { rotate: 360deg; } }
.prereg__cstate {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #0A1430;
  border-radius: 50%;
  background: #56627E;
  color: #FFFFFF;
}
.prereg__cstate .icon { stroke: currentColor; fill: none; stroke-width: 2.6; }
.prereg__mile strong { margin-top: 2px; color: #FFFFFF; font-size: 16px; font-weight: 800; }
.prereg__mile small { overflow: hidden; max-width: 100%; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

/* Đã mở */
.prereg__mile.is-reached .prereg__rays { opacity: 0.85; }
.prereg__mile.is-reached .prereg__chest img { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--t1) 70%, transparent)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); animation: prereg-pop 0.6s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.prereg__mile.is-reached .prereg__chest::before { opacity: 1; }
.prereg__mile.is-reached .prereg__cstate { background: #22B565; }
.prereg__mile.is-reached strong { color: #FFE7A8; }
.prereg__mile.is-reached small { color: var(--t1); }
@keyframes prereg-pop { from { transform: scale(0.6); } }
/* Mốc kế tiếp: rung nhẹ + vòng sáng */
.prereg__mile.is-next .prereg__chest img { animation: prereg-wiggle 3.2s ease-in-out infinite; }
.prereg__mile.is-next .prereg__chest::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--t1) 60%, transparent);
  animation: prereg-ring 2s ease-out infinite;
  pointer-events: none;
}
@keyframes prereg-wiggle { 0%, 80%, 100% { rotate: 0deg; } 84% { rotate: -6deg; } 88% { rotate: 6deg; } 92% { rotate: -4deg; } 96% { rotate: 3deg; } }
@keyframes prereg-ring { to { box-shadow: 0 0 0 18px transparent; } }

.prereg__hint { margin: -6px 0 26px; color: rgba(220, 228, 245, 0.6); font-size: 13px; text-align: center; }

/* Form gộp 1 thanh */
.prereg__form .prereg__row {
  position: relative;
  max-width: 640px;
  gap: 0;
  padding: 6px;
  border: 1px solid rgba(242, 207, 118, 0.35);
  border-radius: 14px;
  background: rgba(2, 8, 22, 0.7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.prereg__form .prereg__row:focus-within { border-color: rgba(242, 207, 118, 0.85); box-shadow: 0 0 0 4px rgba(242, 207, 118, 0.15), 0 10px 30px rgba(0, 0, 0, 0.35); }
.prereg__mail { position: absolute; left: 20px; top: 31px; translate: 0 -50%; color: #F2CF76; stroke: currentColor; fill: none; stroke-width: 1.8; pointer-events: none; }
.prereg__form .prereg__input { height: 50px; padding-left: 46px; border: 0; background: transparent; box-shadow: none; }
.prereg__form .prereg__submit { height: 50px; padding: 0 30px; border-radius: 10px; clip-path: none; background: linear-gradient(90deg, #F1A04F, #F8D284); box-shadow: 0 6px 18px rgba(241, 160, 79, 0.35); }
.prereg__share { margin-top: 22px; }

/* ---- Popup rương ---- */
.prereg-pop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 6, 16, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s;
}
.prereg-pop[hidden] { display: none; }
.prereg-pop.is-show { opacity: 1; }
.prereg-pop__card {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 24px 22px;
  border: 1.5px solid color-mix(in srgb, var(--t1) 70%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, var(--t1) 30%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--t2) 60%, #0A1733), #060E22 55%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px color-mix(in srgb, var(--t1) 25%, transparent);
  color: #FFFFFF;
  text-align: center;
  outline: none;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.3s cubic-bezier(.3, 1.3, .5, 1);
}
.prereg-pop.is-show .prereg-pop__card { transform: none; }
.prereg-pop__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, transparent, var(--t1), transparent); }
.prereg-pop__x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #FFFFFF; font-size: 22px; line-height: 1; cursor: pointer; }
.prereg-pop__x:hover { background: rgba(255, 255, 255, 0.2); }
.prereg-pop__chest { position: relative; display: grid; place-items: center; width: 130px; height: 130px; margin: 0 auto; }
.prereg-pop__chest img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)) saturate(0.75) brightness(0.85); }
.prereg-pop__card.is-open .prereg__rays { opacity: 0.9; }
.prereg-pop__card.is-open .prereg-pop__chest img { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--t1) 70%, transparent)); }
.prereg-pop__mile { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: 999px; background: linear-gradient(180deg, #FFFFFF, var(--t1) 55%, color-mix(in srgb, var(--t1) 60%, #000)); color: #160D04; font-size: 13px; font-weight: 800; }
.prereg-pop__title { margin: 8px 0 4px; padding-top: 0.12em; font-family: var(--font-display); font-size: 24px; text-transform: uppercase; color: #FFFFFF; }
.prereg-pop__state { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: rgba(220, 228, 245, 0.7); font-size: 13px; font-weight: 700; }
.prereg-pop__state .icon { stroke: currentColor; fill: none; stroke-width: 2.4; }
.prereg-pop__card.is-open .prereg-pop__state { color: #3DDC84; }
.prereg-pop__sub { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; color: var(--t1); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.prereg-pop__sub::before, .prereg-pop__sub::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--t1) 40%, transparent); }
.prereg-pop__items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; }
.prereg-pop__items li { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.prereg-pop__items img { flex: none; width: 46px; height: 46px; padding: 3px; border: 1px solid color-mix(in srgb, var(--t1) 45%, transparent); border-radius: 10px; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.3)); object-fit: contain; }
.prereg-pop__items span { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.prereg-pop__items b { color: #FFE7A8; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prereg-pop__code { display: flex; gap: 8px; margin-top: 16px; }
.prereg-pop__code code { flex: 1; min-width: 0; padding: 11px 12px; border: 1.5px dashed var(--t1); border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: #FFFFFF; font: 800 16px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.1em; text-align: center; }
.prereg-pop__code .prereg__copy { flex: none; height: auto; padding: 0 18px; border-radius: 10px; background: linear-gradient(90deg, #F1A04F, #F8D284); font-size: 13px; }
.prereg-pop__code .prereg__glink { padding: 12px; font-size: 14px; }
.prereg-pop__code:has(.prereg__mini) { flex-direction: column; gap: 6px; }
.prereg__mini { height: 8px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.prereg__mini span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--t2), var(--t1)); }
.prereg__mnum { color: rgba(220, 228, 245, 0.7); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .prereg__box { padding: 30px 16px 20px; }
  .prereg__box::before { inset: 6px; }
  .prereg__next { display: block; min-height: calc(2 * 1.5em); border-radius: 14px; font-size: 13px; }
  .prereg__track { margin: 52px 30px 58px 4px; }
  .prereg__mile, .prereg__mile:last-child { top: -26px; width: 64px; }
  .prereg__chest { width: 56px; height: 56px; }
  .prereg__cstate { right: 0; bottom: 2px; width: 18px; height: 18px; }
  .prereg__cstate .icon { width: 10px; height: 10px; }
  .prereg__mile strong { font-size: 13px; }
  .prereg__mile small { display: none; }
  .prereg__hint { margin: 0 0 20px; font-size: 12.5px; }
  .prereg__form .prereg__row { flex-direction: column; gap: 6px; }
  .prereg__form .prereg__submit { width: 100%; }
}
@media (max-width: 420px) {
  .prereg__track { margin-right: 26px; }
  .prereg__mile, .prereg__mile:last-child { top: -22px; width: 52px; }
  .prereg__chest { width: 48px; height: 48px; }
  .prereg-pop__card { padding: 22px 16px 18px; }
  .prereg-pop__title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .prereg__rays, .prereg__fill::after, .prereg__live, .prereg__mile .prereg__chest img, .prereg__mile.is-next .prereg__chest::after { animation: none; }
}

/* ==========================================================================
   Popup rương – bản "pro": phần đầu có nền tia sáng + rương lớn + ribbon mốc,
   thân tối với ô vật phẩm kiểu game (khung theo cấp, số lượng ở góc, tên dưới),
   khung tiến độ có nhãn / số / thanh / dòng nhắc + nút đăng ký.
   ========================================================================== */
.prereg-pop__card {
  width: min(480px, 100%);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #070F24;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--t1) 65%, transparent),
    0 0 0 5px rgba(4, 10, 26, 0.9),
    0 0 0 6px color-mix(in srgb, var(--t1) 25%, transparent),
    0 40px 90px rgba(0, 0, 0, 0.7),
    0 0 60px color-mix(in srgb, var(--t1) 22%, transparent);
  text-align: center;
  scrollbar-width: thin;
}
.prereg-pop__card::before { z-index: 2; height: 2px; border-radius: 22px 22px 0 0; }
.prereg-pop__x { z-index: 3; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.35); font-size: 20px; transition: background 0.2s, transform 0.2s; }
.prereg-pop__x:hover { background: rgba(255, 255, 255, 0.16); transform: rotate(90deg); }

/* Phần đầu */
.prereg-pop__head {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 20px;
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(60% 70% at 50% 42%, color-mix(in srgb, var(--t1) 38%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--t2) 85%, #0A1733), color-mix(in srgb, var(--t2) 35%, #070F24));
  border-bottom: 1px solid color-mix(in srgb, var(--t1) 35%, transparent);
}
.prereg-pop__head::before {                  /* tia sáng lớn phía sau rương */
  content: "";
  position: absolute;
  left: 50%;
  top: 100px;
  width: 520px;
  height: 520px;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--t1) 16%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 55%);
  mask: radial-gradient(circle, #000 10%, transparent 55%);
  animation: prereg-spin 40s linear infinite;
  pointer-events: none;
}
.prereg-pop__head::after {                   /* hạt sáng li ti */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 18% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 82% 22%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 70% 62%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 28% 70%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 90% 75%, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}
.prereg-pop__head > * { position: relative; z-index: 1; }
.prereg-pop__mile {
  margin: 0;
  padding: 4px 18px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  border-radius: 0;
  font-size: 12.5px;
  letter-spacing: 0.08em;
}
.prereg-pop__chest { width: 150px; height: 150px; margin: 4px auto -4px; }
.prereg-pop__chest::after {                  /* bóng đổ dưới rương */
  content: "";
  position: absolute;
  bottom: 6px;
  left: 20%;
  right: 20%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
}
.prereg-pop__chest img { z-index: 1; animation: prereg-float 3.6s ease-in-out infinite; }
@keyframes prereg-float { 50% { transform: translateY(-6px); } }
.prereg-pop__card .prereg__rays { opacity: 0.35; }
.prereg-pop__card.is-open .prereg__rays { opacity: 1; }
.prereg-pop__title {
  margin: 6px 0 8px;
  padding-top: 0.16em;
  font-size: 26px;
  line-height: 1.15;
  background: linear-gradient(180deg, #FFFFFF 30%, color-mix(in srgb, var(--t1) 70%, #FFFFFF));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.prereg-pop__state {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 12.5px;
}
.prereg-pop__card.is-open .prereg-pop__state { border-color: rgba(61, 220, 132, 0.45); background: rgba(61, 220, 132, 0.1); }

/* Thân */
.prereg-pop__body { padding: 4px 22px 22px; }
.prereg-pop__sub { margin: 16px 0 14px; font-size: 11.5px; letter-spacing: 0.18em; }
.prereg-pop__sub::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t1) 55%, transparent)); }
.prereg-pop__sub::after { background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--t1) 55%, transparent)); }
.prereg-pop__items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; justify-content: center; text-align: center; }
.prereg-pop__items:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 96px)); }
.prereg-pop__items li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: default; }
.prereg-pop__slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 88px;
  aspect-ratio: 1;
  border: 1.5px solid color-mix(in srgb, var(--t1) 70%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--t1) 30%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--t2) 70%, #10203F), #0A1328);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 6px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.prereg-pop__items li:hover .prereg-pop__slot { transform: translateY(-3px); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 18px color-mix(in srgb, var(--t1) 45%, transparent); }
.prereg-pop__items .prereg-pop__slot img { width: 76%; height: 76%; padding: 0; border: 0; border-radius: 0; background: none; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.prereg-pop__slot b {
  position: absolute;
  right: 5px;
  bottom: 4px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 6px #000;
}
.prereg-pop__iname {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
  color: rgba(225, 233, 250, 0.85);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

/* Khung tiến độ / mã */
.prereg-pop__code {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}
.prereg-pop__code:has(.prereg__mini) { gap: 0; }
.prereg-pop__prog { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.prereg-pop__plabel { color: rgba(220, 228, 245, 0.65); font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.prereg-pop__code .prereg__mnum { color: rgba(220, 228, 245, 0.6); font-size: 13px; }
.prereg-pop__code .prereg__mnum b { color: #FFFFFF; font-size: 16px; }
.prereg-pop__code .prereg__mini { height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.prereg-pop__code .prereg__mini span { border-radius: 5px; background: linear-gradient(90deg, var(--t2), var(--t1)); box-shadow: 0 0 10px color-mix(in srgb, var(--t1) 60%, transparent); }
.prereg-pop__pct { margin: 10px 0 0; color: rgba(220, 228, 245, 0.7); font-size: 12.5px; line-height: 1.45; }
.prereg-pop__pct b { color: #FFE7A8; }
.prereg-pop__cta {
  width: 100%;
  height: 46px;
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #F1A04F, #F8D284);
  box-shadow: 0 8px 20px rgba(241, 160, 79, 0.35);
  color: #1E1206;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
}
.prereg-pop__cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
/* Đã mở: khung mã viền màu cấp */
.prereg-pop__card.is-open .prereg-pop__code { border-color: color-mix(in srgb, var(--t1) 45%, transparent); background: color-mix(in srgb, var(--t1) 8%, transparent); }

@media (max-width: 420px) {
  .prereg-pop__head { padding: 22px 16px 18px; }
  .prereg-pop__chest { width: 124px; height: 124px; }
  .prereg-pop__title { font-size: 22px; }
  .prereg-pop__body { padding: 2px 14px 16px; }
  .prereg-pop__items { gap: 10px 8px; }
  .prereg-pop__iname { font-size: 11px; }
  .prereg-pop__slot b { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .prereg-pop__head::before, .prereg-pop__chest img { animation: none; }
}

/* Nút "Tải game" theo thiết bị: máy tính / chưa có link store → cuộn tới 4 nút tải, nháy sáng 2 lần */
#tai-game { scroll-margin-top: 110px; }
.dl.is-flash .dl__btn { animation: dl-flash 0.7s ease-in-out 2; }
@keyframes dl-flash { 50% { box-shadow: 0 0 0 3px rgba(248, 210, 132, 0.9), 0 0 28px rgba(248, 210, 132, 0.7); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .dl.is-flash .dl__btn { animation: none; outline: 2px solid #F8D284; outline-offset: 2px; } }

/* ==========================================================================
   NỀN "HẢI TRÌNH" (dưới ảnh bìa)
   1. .amb  – lớp cố định: mặt biển (nắng lấp loáng, mây, hải âu, tàu xa, sương) mờ dần,
              đáy biển (tối dần, bong bóng, đàn cá) hiện dần theo --depth (0 → 1 khi cuộn hết trang).
              Chuyển động theo cuộn dùng --page-y (px, không đơn vị).
   2. .scene – bối cảnh riêng từng section: kho báu / bến cảng / hoàng hôn / tướng (đổi theo phe) / trăng.
   3. .divider – đường chuyển section: dây thừng + huy hiệu, bọt sóng.
   Tất cả aria-hidden, pointer-events: none; tắt chuyển động khi prefers-reduced-motion.
   ========================================================================== */
:root { --depth: 0; --page-y: 0; }
.amb { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.amb > * { position: absolute; pointer-events: none; }
.amb__shallow, .amb__caustics, .amb__clouds, .amb__ship, .amb__gulls, .amb__fog { opacity: clamp(0, calc(1 - var(--depth) * 1.7), 1); }
.amb__deep, .amb__bubbles, .amb__fish { opacity: clamp(0, calc(var(--depth) * 1.4 - 0.15), 1); }

/* Nước nông: xanh ngọc sáng ở trên */
.amb__shallow { inset: 0; background: linear-gradient(180deg, rgba(40, 170, 200, 0.22), rgba(20, 110, 160, 0.08) 55%, transparent 85%); }
/* Ánh nắng lấp loáng dưới mặt nước */
.amb__caustics {
  inset: -20% -20% 30%;
  background:
    radial-gradient(ellipse 60px 22px at 20% 30%, rgba(190, 240, 255, 0.10), transparent 70%),
    radial-gradient(ellipse 90px 30px at 60% 20%, rgba(190, 240, 255, 0.08), transparent 70%),
    radial-gradient(ellipse 50px 18px at 80% 45%, rgba(190, 240, 255, 0.09), transparent 70%),
    radial-gradient(ellipse 70px 26px at 40% 55%, rgba(190, 240, 255, 0.07), transparent 70%);
  background-size: 420px 260px;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 20%, transparent 90%);
  animation: amb-caustic 16s ease-in-out infinite alternate;
}
@keyframes amb-caustic { to { background-position: 140px 60px; transform: scale(1.06); } }
/* Đáy biển: tối dần */
.amb__deep { inset: 0; background: radial-gradient(120% 80% at 50% 110%, rgba(1, 6, 16, 0.75), rgba(2, 10, 24, 0.45) 60%, rgba(3, 12, 28, 0.25)); }

/* Mây trôi (chỉ ở mặt biển) */
.amb__clouds { inset: 0 0 auto; height: 40vh; translate: 0 calc(var(--page-y) * -0.06px); }
.amb__clouds i {
  position: absolute;
  width: 46vw;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(220, 235, 255, 0.10), transparent);
  filter: blur(6px);
  animation: amb-drift 80s linear infinite;
}
.amb__clouds i:nth-child(1) { top: 12%; left: -10%; }
.amb__clouds i:nth-child(2) { top: 34%; left: 40%; width: 34vw; animation-duration: 110s; animation-delay: -40s; }
.amb__clouds i:nth-child(3) { top: 6%; left: 70%; width: 28vw; animation-duration: 95s; animation-delay: -70s; }
@keyframes amb-drift { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }

/* Tàu xa (bóng) */
.amb__ship {
  right: 6%;
  top: 22vh;
  width: clamp(140px, 16vw, 260px);
  translate: 0 calc(var(--page-y) * -0.12px);
  fill: none;
  stroke: rgba(170, 210, 240, 0.12);
  stroke-width: 2;
  animation: amb-bob 7s ease-in-out infinite;
}
.amb__ship .s { fill: rgba(170, 210, 240, 0.08); }
.amb__ship .h { fill: rgba(170, 210, 240, 0.10); }
@keyframes amb-bob { 50% { transform: translateY(6px) rotate(-1.2deg); } }

/* Hải âu */
.amb__gulls {
  left: 8%;
  top: 14vh;
  width: clamp(90px, 10vw, 160px);
  fill: none;
  stroke: rgba(225, 238, 255, 0.28);
  stroke-width: 2.2;
  stroke-linecap: round;
  translate: calc(var(--page-y) * 0.04px) calc(var(--page-y) * -0.2px);
  animation: amb-gulls 6s ease-in-out infinite;
}
@keyframes amb-gulls { 50% { transform: translate(18px, -8px) scaleY(0.8); } }

/* Sương trôi */
.amb__fog { inset: auto 0 0; height: 45vh; }
.amb__fog i {
  position: absolute;
  bottom: 10%;
  width: 70vw;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(170, 210, 240, 0.07), transparent);
  filter: blur(10px);
  animation: amb-drift 70s linear infinite;
}
.amb__fog i:nth-child(2) { bottom: 40%; width: 50vw; animation-duration: 100s; animation-delay: -50s; }

/* Đàn cá (ở sâu) */
.amb__fish {
  left: -260px;
  top: 58vh;
  width: clamp(160px, 18vw, 260px);
  fill: rgba(120, 200, 230, 0.16);
  animation: amb-fish 46s linear infinite;
}
@keyframes amb-fish { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 300px)) translateY(-40px); } }

/* Bong bóng nổi lên (ở sâu) */
.amb__bubbles { inset: 0; }
.amb__bubbles i {
  position: absolute;
  bottom: -20px;
  left: var(--x);
  width: var(--s, 7px);
  height: var(--s, 7px);
  border: 1px solid rgba(190, 235, 255, 0.45);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45), rgba(190, 235, 255, 0.05) 60%);
  animation: amb-bubble var(--d, 14s) linear infinite;
  animation-delay: var(--t, 0s);
}
@keyframes amb-bubble {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(12px, -55vh); }
  100% { transform: translate(-8px, -110vh); opacity: 0; }
}

/* ---------- 2. Bối cảnh từng section ---------- */
.scene-host { isolation: isolate; }
.scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* Kho báu (Đăng ký trước): quầng vàng + kim cương / vàng / rương trôi lơ lửng + lấp lánh */
.scene--treasure { background: radial-gradient(55% 45% at 50% 48%, rgba(255, 196, 90, 0.16), transparent 70%), radial-gradient(30% 30% at 50% 60%, rgba(255, 230, 160, 0.10), transparent 70%); }
.scene__coin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--z);
  height: var(--z);
  object-fit: contain;
  opacity: 0.55;
  filter: blur(var(--b, 0px)) drop-shadow(0 0 14px rgba(255, 200, 90, 0.55));
  transform: rotate(var(--r));
  animation: scene-float var(--d, 8s) ease-in-out infinite;
}
@keyframes scene-float { 50% { transform: rotate(calc(var(--r) * -1)) translateY(-18px); } }
.scene__sparks {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 12% 30%, #FFE7A8, transparent),
    radial-gradient(2px 2px at 24% 76%, #FFE7A8, transparent),
    radial-gradient(1.5px 1.5px at 38% 18%, #FFFFFF, transparent),
    radial-gradient(2px 2px at 63% 82%, #FFE7A8, transparent),
    radial-gradient(1.5px 1.5px at 77% 26%, #FFFFFF, transparent),
    radial-gradient(2px 2px at 88% 52%, #FFE7A8, transparent),
    radial-gradient(1.5px 1.5px at 52% 10%, #FFE7A8, transparent);
  animation: scene-twinkle 3.6s ease-in-out infinite alternate;
}
@keyframes scene-twinkle { from { opacity: 0.35; } to { opacity: 1; } }

/* Bến cảng (Tin tức): ảnh boong tàu mờ */
.scene--harbor img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0.09; filter: blur(12px) saturate(1.2); transform: scale(1.12); }
.scene--harbor::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, transparent, rgba(7, 26, 51, 0.7)); }

/* Hoàng hôn (Điểm nổi bật): mặt trời lặn ở chân trời + vệt sáng trên mặt nước */
.scene--sunset { background: linear-gradient(180deg, transparent 0%, rgba(255, 120, 60, 0.06) 40%, rgba(255, 150, 70, 0.14) 62%, rgba(10, 40, 70, 0.0) 64%, rgba(255, 140, 70, 0.05) 80%, transparent); }
.scene__sun {
  position: absolute;
  left: 50%;
  top: 63%;
  width: min(520px, 70vw);
  aspect-ratio: 2;
  translate: -50% -100%;
  border-radius: 999px 999px 0 0;
  background: radial-gradient(circle at 50% 100%, rgba(255, 210, 120, 0.55), rgba(255, 130, 60, 0.25) 45%, transparent 70%);
  filter: blur(4px);
}
.scene__glints {
  position: absolute;
  left: 50%;
  top: 63%;
  width: min(420px, 60vw);
  height: 30%;
  translate: -50% 0;
  background: repeating-linear-gradient(180deg, rgba(255, 190, 110, 0.22) 0 2px, transparent 2px 12px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(50% 100% at 50% 0%, #000, transparent);
  animation: scene-glint 4s ease-in-out infinite alternate;
}
@keyframes scene-glint { to { opacity: 0.5; transform: scaleX(1.12); } }

/* Nhân vật: ảnh tướng phóng to mờ + quầng màu theo phe (JS đặt --elem-c và đổi ảnh) */
.scene--hero { background: radial-gradient(60% 55% at 30% 50%, color-mix(in srgb, var(--elem-c, #4FD1FF) 22%, transparent), transparent 70%); transition: background 0.6s; }
.scene--hero img {
  position: absolute;
  left: -8%;
  top: 50%;
  width: min(1100px, 90vw);
  translate: 0 -50%;
  opacity: 0.18;
  filter: blur(26px) saturate(1.4);
}
.scene--hero img.is-in { animation: scene-hero-in 0.9s ease-out; }
@keyframes scene-hero-in { from { opacity: 0; transform: scale(1.08); } }
.scene--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(45% 50% at 72% 50%, color-mix(in srgb, var(--elem-c, #4FD1FF) 12%, transparent), transparent 70%);
}

/* Biển đêm có trăng (Đề xuất nổi bật → chân trang) */
.scene--moon { -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%); mask-image: linear-gradient(180deg, transparent, #000 20%); }
.scene__stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 6% 20%, #FFF, transparent), radial-gradient(1px 1px at 14% 44%, #FFF, transparent),
    radial-gradient(1.5px 1.5px at 22% 12%, #DDEBFF, transparent), radial-gradient(1px 1px at 33% 30%, #FFF, transparent),
    radial-gradient(1px 1px at 41% 16%, #FFF, transparent), radial-gradient(1.5px 1.5px at 56% 24%, #DDEBFF, transparent),
    radial-gradient(1px 1px at 64% 8%, #FFF, transparent), radial-gradient(1px 1px at 71% 36%, #FFF, transparent),
    radial-gradient(1.5px 1.5px at 92% 30%, #FFF, transparent), radial-gradient(1px 1px at 97% 12%, #DDEBFF, transparent);
  opacity: 0.7;
  animation: scene-twinkle 4.5s ease-in-out infinite alternate;
}
.scene__moon {
  position: absolute;
  right: 9%;
  top: 14%;
  width: clamp(70px, 8vw, 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #FFFBEA, #EDE3C4 55%, #CFC3A0);
  box-shadow: 0 0 40px rgba(255, 246, 210, 0.45), 0 0 120px rgba(255, 246, 210, 0.2);
  opacity: 0.85;
}
.scene__trail {
  position: absolute;
  right: calc(9% + clamp(35px, 4vw, 60px));
  bottom: 0;
  width: clamp(60px, 9vw, 140px);
  height: 46%;
  translate: 50% 0;
  background: repeating-linear-gradient(180deg, rgba(255, 246, 210, 0.16) 0 2px, transparent 2px 11px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, transparent);
  animation: scene-glint 5s ease-in-out infinite alternate;
}

/* ---------- 3. Đường chuyển section ---------- */
.divider { position: relative; z-index: 1; pointer-events: none; }
.divider--rope { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: -20px auto; padding: 0 24px; }
.divider__rope {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: repeating-linear-gradient(-60deg, #7A5A2E 0 4px, #C9A46A 4px 7px, #9C7A45 7px 10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%);
  mask-image: linear-gradient(90deg, transparent, #000 25%);
}
.divider__rope:last-child { -webkit-mask-image: linear-gradient(270deg, transparent, #000 25%); mask-image: linear-gradient(270deg, transparent, #000 25%); }
.divider__emblem {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid #E9BE5C;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #1E3A66, #0A1A36);
  box-shadow: 0 0 0 5px rgba(233, 190, 92, 0.12), 0 0 24px rgba(233, 190, 92, 0.35), 0 8px 18px rgba(0, 0, 0, 0.5);
  color: #F2CF76;
}
.divider__emblem .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.divider--rope .divider__emblem .icon { animation: divider-spin 30s linear infinite; }
@keyframes divider-spin { to { transform: rotate(360deg); } }
.divider--wave { height: 60px; margin: -30px 0; overflow: hidden; }
.divider--wave svg { width: 200%; height: 100%; fill: none; stroke-linecap: round; }
.divider--wave .w1 { stroke: rgba(190, 235, 255, 0.22); stroke-width: 2; animation: wave 22s linear infinite; }
.divider--wave .w2 { stroke: rgba(242, 207, 118, 0.25); stroke-width: 1.5; stroke-dasharray: 2 10; animation: wave 30s linear infinite reverse; }

@media (max-width: 760px) {
  .amb__ship { top: 12vh; right: -4%; opacity: clamp(0, calc((1 - var(--depth) * 1.7) * 0.7), 1); }
  .amb__clouds i:nth-child(3), .amb__fog i:nth-child(2) { display: none; }
  .scene__coin { opacity: 0.35; }
  .scene__coin:nth-of-type(5), .scene__coin:nth-of-type(6) { display: none; }
  .scene--hero img { left: -30%; width: 160vw; }
  .divider--rope { margin: -14px auto; }
  .divider__emblem { width: 42px; height: 42px; }
  .divider__emblem .icon { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .amb *, .scene *, .scene--hero img.is-in, .divider * { animation: none !important; }
  .amb__bubbles, .amb__fish { display: none; }
}

/* Bài sự kiện Giftcode: nút "Xem chi tiết" (LINKS.events.*) / ghi chú khi chưa có link */
.news-modal__body .news-detail { margin: 22px 0 6px; }
.news-modal__body .news-detail__btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 12px;
  background: linear-gradient(90deg, #F1A04F, #F8D284);
  box-shadow: 0 8px 18px rgba(241, 160, 79, 0.3);
  color: #1E1206;
  font-weight: 800;
  text-decoration: none;
}
.news-modal__body .news-detail.is-soon { padding: 12px 16px; border: 1px dashed #C9D3E2; border-radius: 12px; background: #F5F8FC; color: #5A6B82; font-size: 14px; font-style: italic; }
.news-modal__body .gift-item__noimg { flex: none; width: 40px; height: 40px; border-radius: 8px; background: #EEF2F7; }

/* Ảnh nền phần Đăng ký trước: tàu trên đồng cỏ + lớp phủ xanh đêm để chữ / rương / form dễ đọc */
.scene--treasure { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); }
.scene__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; animation: scene-drift 40s ease-in-out infinite alternate; }
@keyframes scene-drift { from { transform: scale(1.04); } to { transform: scale(1.12) translateX(-1.5%); } }
.scene__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 45% at 50% 52%, rgba(255, 196, 90, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(7, 26, 51, 0.72) 0%, rgba(7, 26, 51, 0.32) 20%, rgba(7, 26, 51, 0.04) 45%, rgba(7, 26, 51, 0.14) 72%, rgba(7, 26, 51, 0.85) 100%);
}
/* Chữ tiêu đề nằm thẳng trên ảnh: thêm bóng cho rõ */
#dang-ky .sec__head { text-shadow: 0 2px 14px rgba(3, 10, 24, 0.85); }
/* Khung đăng ký: kính mờ để thấy con tàu nhòe phía sau */
#dang-ky .prereg__box {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(242, 207, 118, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(8, 26, 56, 0.56), rgba(4, 14, 32, 0.7));
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
.scene--treasure .scene__coin, .scene--treasure .scene__sparks { z-index: 1; }
@media (max-width: 760px) { .scene__photo img { object-position: 40% 40%; } }
@media (prefers-reduced-motion: reduce) { .scene__photo img { animation: none; } }

/* Ảnh nền phần Tin tức: trận chiến trên băng, phủ xanh đêm (đầu tối cho tiêu đề, giữa sáng, cuối tối) */
.scene--news { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); }
.scene--news .scene__photo img { object-position: 50% 42%; }
.scene--news .scene__shade {
  background:
    radial-gradient(60% 55% at 50% 55%, transparent, rgba(5, 16, 36, 0.45) 100%),
    linear-gradient(180deg, rgba(7, 26, 51, 0.78) 0%, rgba(7, 26, 51, 0.35) 22%, rgba(7, 26, 51, 0.12) 50%, rgba(7, 26, 51, 0.3) 75%, rgba(7, 26, 51, 0.88) 100%);
}
#tin-tuc .sec__head { text-shadow: 0 2px 14px rgba(3, 10, 24, 0.85); }
@media (max-width: 760px) { .scene--news .scene__photo img { object-position: 50% 40%; } }

/* ==========================================================================
   ĐIỆN THOẠI (≤520px): màn hình đầu tiên chứa trọn tiêu đề + đếm ngược + 4 nút tải + mạng xã hội.
   Khoảng ảnh phía trên co theo chiều cao màn hình thật (100svh): máy cao thấy nhiều ảnh hơn,
   máy thấp ảnh lùi lên sau chữ. 366px ≈ chiều cao khối chữ + nút (đo ở 440×766 – iPhone 17 Pro Max / Chrome, 390×664, 360×600).
   ========================================================================== */
@media (max-width: 520px) {
  .hero { padding-top: clamp(130px, calc(100svh - var(--header-h) - 366px - 16px), 86vw); padding-bottom: 56px; }
  .hero__content { gap: 11px; }
  .hero__tagline { font-size: 27px; line-height: 1.12; min-height: calc(2 * 1.12em); }
  .hero__sub { display: none; }
  .countdown { --cd-fs: 22px; padding: 10px 12px 11px; }
  .dl { gap: 8px; }
  .dl__btn { height: 46px; }
  .social__link { width: 38px; }
}
@media (max-width: 380px) { .hero__tagline { font-size: 24px; } }
@media (max-width: 520px) {
  /* Chữ nằm cao hơn → lớp tối phía dưới ảnh cũng lên cao hơn để tiêu đề dễ đọc */
  .hero__shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(6, 18, 42, 0.92) 44%, rgba(6, 18, 42, 0.6) 58%, rgba(6, 18, 42, 0.12) 74%, rgba(6, 18, 42, 0) 84%); }
  .hero__tagline { filter: drop-shadow(0 2px 6px rgba(3, 10, 24, 0.9)) drop-shadow(0 0 18px rgba(3, 10, 24, 0.6)); }
}