/* Đại Tướng Quân · web GĐ1 · hướng C (Lai): đầu trang tối (sông nước, sương), thân trang giấy dó, khung trống đồng.
   Gốc từ mẫu docs/web/mau/C-lai/style.css (WEB-MOCK), thêm phần trang con ở cuối file. */
:root {
  --toi: #0f0b08;
  --giay: #e6dabc;
  --muc: #231a12;
  --muc-nhat: #4a3d2f;
  --muc-mo: #6b5c48;
  --son: #a63022;
  --son-dam: #85251a;
  --dong: #b08a4a;
  --dong-sang: #d8b56a;
  --dong-dam: #7a5a26;
  --ngai: #ede2c6;
  --ngai-mo: #bfb193;
  --tieu-de: "Cormorant Garamond", "Noto Serif", Georgia, serif;
  --chu: "Noto Serif", Georgia, serif;
  --rong: 1220px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; color: var(--muc); font: 400 16px/1.65 var(--chu); background: var(--giay) url(/img/giay-do.webp) 0 0 / 512px repeat; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--tieu-de); font-weight: 700; line-height: 1.15; margin: 0; font-variant-numeric: lining-nums; }
summary, .the-tuong-ten { font-variant-numeric: lining-nums; }
.ic { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Nút ---------- */
.nut { display: inline-flex; align-items: center; gap: .55em; font: 700 15px/1 var(--chu); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: .95em 1.5em; border: 0; border-radius: 2px; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; }
.nut-son { color: #f6ead0; background: linear-gradient(#bd3826, #8c2519); box-shadow: inset 0 0 0 1px #e9a07a66, 0 0 0 1px var(--dong-dam), 0 0 0 3px #d8b56a55, 0 8px 20px #0005; }
.nut-son:hover { background: linear-gradient(#cf412d, #a02c1e); transform: translateY(-1px); }
.nut-vien { color: var(--dong-sang); background: #0f0b0899; box-shadow: inset 0 0 0 1px var(--dong); }
.nut-lon { font-size: 19px; padding: 1.05em 2.4em; }
.nut-nho { font-size: 13px; padding: .8em 1.2em; }

/* ---------- Menu: tối trên hero, giấy khi cuộn xuống phần giấy ---------- */
.menu { position: fixed; inset: 0 0 auto; z-index: 50; height: 68px; display: flex; align-items: center; gap: 28px; padding: 0 max(20px, calc((100vw - var(--rong)) / 2)); color: var(--ngai); background: linear-gradient(#0b0806cc, #0b080600); transition: background .25s, box-shadow .25s; }
.menu.dac { background: #120d09f2; box-shadow: 0 1px 0 var(--dong-dam), 0 8px 20px #0006; }
.menu-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 21px/1 var(--tieu-de); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.menu-logo img { width: 40px; height: 40px; }
.menu-muc { display: flex; gap: 26px; margin-left: auto; }
.menu-muc a { text-decoration: none; font-size: 14px; letter-spacing: .05em; color: var(--ngai-mo); padding: 6px 0; }
.menu-muc a:hover { color: var(--dong-sang); }
.menu-mo { display: none; background: none; border: 0; color: var(--ngai); padding: 8px; cursor: pointer; }
.menu-mo .ic { width: 28px; height: 28px; }

/* ---------- Hero tối, căn giữa ---------- */
.hero { position: relative; min-height: max(780px, min(100vh, 1000px)); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ngai); background: var(--toi); isolation: isolate; overflow: hidden; }
.hero-nen { position: absolute; inset: 0; z-index: -1; background: url(/img/nen-bach-dang.webp) center 45% / cover no-repeat; }
.hero-nen::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse 50% 55% at 50% 48%, #0f0b0899 0%, #0f0b0840 60%, transparent 100%),
  linear-gradient(#0f0b08cc 0%, #0f0b0833 22%, #0f0b0833 60%, #0f0b08dd 100%); }
.hero-chu { width: min(1000px, 100%); padding: 110px 20px 120px; }
.hero-dau { width: 150px; margin: 0 auto 18px; filter: drop-shadow(0 8px 24px #000c); }
.hero-ten { white-space: nowrap; font-size: 82px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1; text-shadow: 0 4px 24px #000; }
.nhan-thu-kin { display: inline-flex; align-items: center; gap: 12px; margin: 16px 0 22px; font: 700 13px/1 var(--chu); letter-spacing: .3em; text-transform: uppercase; color: var(--dong-sang); }
.nhan-thu-kin::before, .nhan-thu-kin::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--dong)); }
.nhan-thu-kin::after { transform: scaleX(-1); }
.hero-cau { font-size: 26px; font-family: var(--tieu-de); font-weight: 600; line-height: 1.35; margin: 0 auto 8px; max-width: 640px; color: #efe5cb; text-shadow: 0 2px 12px #000; }
.hero-nut { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 14px; }
.hero-phu { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--ngai-mo); margin: 0 0 6px; }
.hero-phu b { color: var(--dong-sang); }
.dem-nguoc { margin: 34px auto 0; max-width: 520px; padding: 16px 24px 14px; background: #0f0b08b3; box-shadow: inset 0 0 0 1px var(--dong-dam), inset 0 0 0 4px #0f0b08b3, inset 0 0 0 5px #b08a4a55; backdrop-filter: blur(3px); }
.dem-tieu { margin: 0 0 6px; font: 600 12px/1 var(--chu); letter-spacing: .22em; text-transform: uppercase; color: var(--dong-sang); }
.dem-so { display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
.dem-so span { display: flex; flex-direction: column; align-items: center; min-width: 64px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ngai-mo); }
.dem-so b { font: 700 44px/1.05 var(--tieu-de); color: var(--ngai); font-variant-numeric: lining-nums tabular-nums; }
.dem-so i { font: 500 34px/1.2 var(--tieu-de); font-style: normal; color: var(--dong); }
.dem-ngay { margin: 6px 0 0; font-size: 12px; color: var(--ngai-mo); }
/* chưa có ngày mở: thay đồng hồ bằng một dòng báo (build.py, WEB-AN) */
.dem-cho { margin: 26px auto 0; max-width: 520px; padding: 12px 20px; font-size: 14px; color: var(--ngai); background: #0f0b08b3; box-shadow: inset 0 0 0 1px var(--dong-dam); }
.bai .dem-cho { margin: 0 auto 30px; text-align: center; background: #1e1610; }
/* chưa có file tải: dòng nhỏ dưới nút "Sắp mở tải" (site.js đặt data-trang-thai="loi") */
.tai-cho { display: none; flex-basis: 100%; margin: 0; font-size: 13px; color: var(--ngai-mo); text-align: center; }
.tai-cho a { color: var(--dong-sang); }
[data-trang-thai="loi"] .tai-cho, [data-trang-thai="loi"] ~ .tai-cho, .khoi-tai[data-trang-thai="loi"] .tai-cho { display: block; }
/* mép giấy xé nối sang phần giấy dó */
.xe-giay { position: absolute; left: 0; right: 0; bottom: -1px; height: 54px; background: var(--giay) url(/img/giay-do.webp) 0 0 / 512px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='54' viewBox='0 0 600 54' preserveAspectRatio='none'%3E%3Cpath d='M0 30 18 26 31 33 52 22 70 29 88 18 104 27 126 21 139 31 160 24 181 34 199 20 220 28 236 17 257 25 274 33 296 22 313 29 330 19 352 27 371 21 389 32 410 23 428 30 447 18 466 26 484 33 505 21 523 28 540 20 561 31 580 24 600 30V54H0Z'/%3E%3C/svg%3E") bottom / 600px 54px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='54' viewBox='0 0 600 54' preserveAspectRatio='none'%3E%3Cpath d='M0 30 18 26 31 33 52 22 70 29 88 18 104 27 126 21 139 31 160 24 181 34 199 20 220 28 236 17 257 25 274 33 296 22 313 29 330 19 352 27 371 21 389 32 410 23 428 30 447 18 466 26 484 33 505 21 523 28 540 20 561 31 580 24 600 30V54H0Z'/%3E%3C/svg%3E") bottom / 600px 54px repeat-x;
  filter: drop-shadow(0 -2px 0 #fff3); }

/* ---------- Khối giấy dó ---------- */
.khoi { width: min(var(--rong), 100%); margin: 0 auto; padding: 70px 20px; }
.khoi-dau { text-align: center; margin-bottom: 34px; }
.khoi-dau h2 { font-size: 50px; letter-spacing: .03em; color: var(--muc); }
.khoi-dau h2::after { content: ""; display: block; width: 180px; height: 14px; margin: 10px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='14' viewBox='0 0 180 14'%3E%3Cg fill='none' stroke='%23a63022' stroke-width='1.3'%3E%3Cpath d='M0 7h66M114 7h66'/%3E%3Ccircle cx='90' cy='7' r='6'/%3E%3Ccircle cx='76' cy='7' r='3'/%3E%3Ccircle cx='104' cy='7' r='3'/%3E%3C/g%3E%3Ccircle cx='90' cy='7' r='2.2' fill='%23a63022'/%3E%3C/svg%3E") center / contain no-repeat; }
.khoi-mo { margin: 10px auto 0; color: var(--muc-mo); max-width: 560px; }
.lien-ket { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--son); text-decoration: none; font-weight: 600; }
.lien-ket:hover { text-decoration: underline; }
.ke-hoa-van { display: flex; justify-content: center; opacity: .85; }
.ke-hoa-van img { width: 220px; }

/* ---------- Tin: khung đồng trên giấy ---------- */
.luoi-tin { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 24px; }
.the-tin { background: #1e1610; color: var(--ngai); border: 20px solid transparent; border-image: url(/img/khung-bang-nho-vien.webp) 108 112 108 112 / 24px round; background-clip: padding-box; box-shadow: 0 14px 26px -12px #231a1288; transition: transform .2s; }
.the-tin:hover { transform: translateY(-3px); }
.the-tin-lien { display: block; height: 100%; color: inherit; text-decoration: none; }
.the-tin-lien:hover h3 { color: var(--dong-sang); }
.the-tin img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.the-tin-chu { padding: 14px 14px 16px; }
.the-tin-nhan { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 13px; color: var(--ngai-mo); }
.nhan { font: 700 11px/1 var(--chu); letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px 4px; }
.nhan-cap-nhat { background: var(--son); color: #f6ead0; }
.nhan-su-kien { background: #c7943f; color: #1a120a; }
.nhan-tin-tuc { color: var(--dong-sang); box-shadow: inset 0 0 0 1px var(--dong); }
.the-tin h3 { font-size: 24px; margin-bottom: 8px; }
.the-tin p { margin: 0; color: var(--ngai-mo); font-size: 15px; }

/* ---------- Danh tướng: ô tướng trống đồng như trong game ---------- */
.luoi-tuong { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.the-tuong { position: relative; text-align: center; }
.the-tuong-nut { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.the-tuong-nut:focus-visible { outline: 2px solid var(--son); outline-offset: 4px; }
.the-tuong-anh { border: 16px solid transparent; border-image: url(/img/o-tuong-thuong.webp) 108 108 120 108 / 32px 32px 36px 32px round; background: #0b0806; background-clip: padding-box; overflow: hidden; box-shadow: 0 16px 22px -14px #231a12aa; }
.the-tuong-anh img { width: 100%; aspect-ratio: 404 / 470; object-fit: cover; object-position: 50% 0; transition: transform .35s; }
.the-tuong-anh { display: block; }
.the-tuong-nut:hover .the-tuong-anh, .the-tuong-nut:focus-visible .the-tuong-anh { border-image-source: url(/img/o-tuong-dang-xem.webp); }
.the-tuong-nut:hover .the-tuong-anh img { transform: scale(1.04); }
.khien { position: absolute; top: 4px; right: 4px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font: 700 22px/1 var(--tieu-de); color: #f6ead0; background: var(--son); box-shadow: inset 0 0 0 2px var(--son), inset 0 0 0 3.5px #f0d9b8aa, 0 2px 4px #0008; }
.khien-A { background: var(--son-dam); }
.khien-B { background: #4a3d2f; box-shadow: inset 0 0 0 2px #4a3d2f, inset 0 0 0 3.5px #f0d9b8aa, 0 2px 4px #0008; }
.the-tuong-ten { display: block; margin-top: 10px; font: 700 22px/1.15 var(--tieu-de); }
.the-tuong-lop { display: block; margin: 2px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--son); }
.the-tuong-cau { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muc-nhat); }
.ghi-chu-cap { margin: 28px auto 0; max-width: 800px; text-align: center; font-size: 14px; font-style: italic; color: var(--muc-nhat); }

/* ---------- Bốn phe ---------- */
.luoi-phe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.phe { text-align: center; padding: 0 16px 20px; border-top: 4px solid var(--mau); background: linear-gradient(#efe5cb, #efe5cb00); box-shadow: inset 0 0 0 1px #231a1222; }
.phe img { width: 140px; margin: -4px auto 4px; filter: drop-shadow(2px 8px 6px #231a1244); }
.phe h3 { font-size: 32px; }
.phe-loi { margin: 6px 0 8px; font-weight: 600; color: var(--son); }
.phe p:last-child { margin: 0; font-size: 14px; color: var(--muc-nhat); }
.phe-hai-trieu { --mau: #2f5d7c; }
.phe-van-luy { --mau: #8e2a1e; }
.phe-son-linh { --mau: #4e5b31; }
.phe-lien-dam { --mau: #3b2f5c; }

/* ---------- Cách chơi ---------- */
.luoi-choi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cho-anh { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 18px; text-align: center; font-size: 13px; color: var(--ngai-mo); background: #1e1610; outline: 1px dashed #b08a4a88; outline-offset: -10px; }
.choi-ic { width: 54px; height: 54px; padding: 12px; margin: -27px 0 10px 18px; position: relative; color: var(--dong-sang); background: #1e1610; border-radius: 50%; box-shadow: 0 0 0 1px var(--dong), 0 0 0 4px #1e1610, 0 0 0 5px #b08a4a66; }
.choi h3 { font-size: 28px; margin-bottom: 6px; }
.choi p { margin: 0; color: var(--muc-nhat); }

/* ---------- Cộng đồng: trở lại nền tối ---------- */
.cong-dong { position: relative; padding: 110px 20px 90px; text-align: center; color: var(--ngai); background: linear-gradient(#0f0b08d0, #0f0b08f0), url(/img/nen-bach-dang.webp) center 70% / cover; }
.cong-dong::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 54px; background: var(--giay) url(/img/giay-do.webp) 0 0 / 512px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='54' viewBox='0 0 600 54' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V24L582 30 561 23 540 34 523 26 505 33 484 21 466 28 447 36 428 24 410 31 389 22 371 33 352 27 330 35 313 25 296 32 274 21 257 29 236 37 220 26 199 34 181 20 160 30 139 23 126 33 104 27 88 36 70 25 52 32 31 21 18 28 0 24Z'/%3E%3C/svg%3E") top / 600px 54px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='54' viewBox='0 0 600 54' preserveAspectRatio='none'%3E%3Cpath d='M0 0H600V24L582 30 561 23 540 34 523 26 505 33 484 21 466 28 447 36 428 24 410 31 389 22 371 33 352 27 330 35 313 25 296 32 274 21 257 29 236 37 220 26 199 34 181 20 160 30 139 23 126 33 104 27 88 36 70 25 52 32 31 21 18 28 0 24Z'/%3E%3C/svg%3E") top / 600px 54px repeat-x; }
.cong-dong-chu { max-width: 640px; margin: 0 auto; }
.cong-dong h2 { font-size: 52px; margin-bottom: 12px; }
.cong-dong p { margin: 0 0 26px; color: var(--ngai-mo); }
.cong-dong .hero-nut { justify-content: center; }
.cong-dong p.cong-dong-cho { margin: 0; font-size: 15px; color: var(--ngai); }

/* ---------- Chân trang tối ---------- */
.chan { padding: 46px 20px 40px; text-align: center; font-size: 14px; color: var(--ngai-mo); background: #0a0705; border-top: 1px solid var(--dong-dam); }
.chan-dau { width: 80px; margin: 0 auto 16px; }
.chan-lien { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-bottom: 12px; }
.chan-lien a { color: var(--ngai); text-decoration: none; }
.chan-lien a:hover { color: var(--dong-sang); }
.chan p { margin: 4px 0; }
.chan-nho { font-size: 12px; opacity: .8; }

.chi-dien-thoai { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 1100px) {
  .luoi-tuong { grid-template-columns: repeat(3, 1fr); }
  .luoi-tin { grid-template-columns: 1fr 1fr; }
  .luoi-tin .the-tin:first-child { grid-column: 1 / -1; }
  .luoi-phe { grid-template-columns: repeat(2, 1fr); }
  .menu-muc { gap: 16px; }
  .hero-ten { font-size: 70px; }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .menu { height: 60px; gap: 10px; padding: 0 12px; }
  .menu-logo span { display: none; }
  .menu-logo img { width: 34px; height: 34px; }
  .menu .nut-nho { margin-left: auto; padding: .75em 1em; font-size: 12px; }
  .menu-mo { display: block; }
  .menu-muc { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 6px 20px 16px; background: #120d09f7; box-shadow: 0 1px 0 var(--dong-dam), 0 16px 26px #000a; }
  .menu.mo, .menu.mo .menu-muc { background: #120d09f7; }
  .menu.mo .menu-muc { display: flex; }
  .menu-muc a { font-size: 17px; padding: 12px 0; border-bottom: 1px solid #ffffff14; }

  .hero { min-height: min(100svh, 900px); }
  .hero-nen { background-position: 62% 40%; }
  .hero-chu { padding: 84px 16px 84px; }
  .hero-dau { width: 104px; margin-bottom: 12px; }
  .hero-ten { white-space: normal; font-size: 44px; letter-spacing: .1em; }
  .nhan-thu-kin { margin: 12px 0 16px; font-size: 11px; }
  .nhan-thu-kin::before, .nhan-thu-kin::after { width: 34px; }
  .hero-cau { font-size: 21px; margin-bottom: 6px; }
  .hero-dong-phu { font-size: 15px; margin-bottom: 20px; }
  .chi-may-tinh { display: none !important; }
  .hero-nut .nut { flex: 1 1 100%; justify-content: center; }
  .nut-lon { font-size: 17px; }
  .hero-phu { font-size: 13px; flex-wrap: wrap; }
  .chi-dien-thoai { display: flex !important; }
  .dem-nguoc { margin-top: 22px; padding: 12px 10px; }
  .dem-so { gap: 4px; }
  .dem-so span { min-width: 54px; font-size: 10px; }
  .dem-so b { font-size: 34px; }
  .dem-so i { font-size: 26px; }
  .xe-giay { height: 36px; -webkit-mask-size: 400px 36px; mask-size: 400px 36px; }

  .khoi { padding: 48px 16px; }
  .khoi-dau { margin-bottom: 24px; }
  .khoi-dau h2 { font-size: 38px; }
  .luoi-tin { grid-template-columns: 1fr; gap: 18px; }
  .the-tin h3 { font-size: 21px; }
  .luoi-tuong { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .the-tuong-ten { font-size: 19px; }
  .the-tuong-cau { font-size: 12.5px; }
  .luoi-phe { grid-template-columns: 1fr 1fr; gap: 12px; }
  .phe { padding: 0 8px 14px; }
  .phe img { width: 104px; }
  .phe h3 { font-size: 25px; }
  .phe-loi { font-size: 13.5px; }
  .phe p:last-child { font-size: 12.5px; }
  .luoi-choi { grid-template-columns: 1fr; gap: 32px; }
  .cong-dong { padding: 80px 16px 64px; }
  .cong-dong h2 { font-size: 40px; }
}

/* =====================================================================
   PHẦN THÊM CHO WEB GĐ1 (WEB-BUILD): trang con, tin tức, văn bản, hỏi đáp, hộp tướng
   ===================================================================== */
.bo-qua { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--son); color: #f6ead0; text-decoration: none; }
.bo-qua:focus { top: 10px; }
:focus-visible { outline: 2px solid var(--dong-sang); outline-offset: 3px; }
.menu-muc a[aria-current="page"] { color: var(--dong-sang); box-shadow: inset 0 -1px 0 var(--dong); }
.hero-dong-phu { margin: 0 auto 26px; max-width: 640px; font-size: 17px; color: #e3d7ba; text-shadow: 0 2px 12px #000; }

/* nút tải chưa mở / nút mạng xã hội chưa có link */
.nut[aria-disabled="true"] { cursor: default; filter: saturate(.35) brightness(.85); transform: none !important; }
.nut-cho { cursor: default; opacity: .8; }
.nut-cho small { font: 400 12px/1 var(--chu); letter-spacing: 0; text-transform: none; opacity: .85; }

/* ---------- Đầu trang con: dải tối, mép giấy xé ---------- */
.dau-con { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; padding: 120px 20px 96px; text-align: center; color: var(--ngai); background: var(--toi); isolation: isolate; overflow: hidden; }
.dau-con .hero-nen { background-position: center 62%; }
.dau-con-chu { width: min(900px, 100%); }
.dau-con h1 { font-size: 60px; font-weight: 600; letter-spacing: .04em; text-shadow: 0 4px 24px #000; }
.dau-con .nhan-thu-kin { margin: 0 0 14px; }
.dau-con-mo { max-width: 680px; margin: 14px auto 0; font-size: 17px; color: #e3d7ba; text-shadow: 0 2px 12px #000; }
.dau-con-mo a { color: var(--dong-sang); }
.dau-con-tai { min-height: 0; padding-bottom: 110px; }
.dau-con-tai .hero-nut { margin-top: 28px; }
.dau-con-bai h1 { font-size: 50px; line-height: 1.12; }
.bai-nhan { justify-content: center; margin-bottom: 14px !important; }
.bai-nhan .nhan { text-decoration: none; }
.dau-con-404 { min-height: max(620px, 86vh); }
.dau-con-404 .hero-dau { width: 120px; }
.dau-con-404 .hero-nut { margin-top: 28px; }

/* ---------- Khối tải ở trang Tải game ---------- */
.khoi-tai { max-width: 760px; margin: 0 auto; }
.tai-tin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 22px 0 10px; text-align: left; background: #b08a4a55; box-shadow: 0 0 0 1px var(--dong-dam); }
.tai-tin > div { padding: 10px 14px; background: #120d09e0; }
.tai-tin dt { font: 600 11px/1.2 var(--chu); letter-spacing: .14em; text-transform: uppercase; color: var(--dong-sang); }
.tai-tin dd { margin: 4px 0 0; font-size: 15px; color: var(--ngai); }
.tai-tin code { font-size: 13px; color: var(--ngai); background: none; padding: 0; word-break: break-all; }
.tai-sha { grid-column: 1 / -1; }
.tai-rong { grid-column: span 2; }
.tai-sha dd { display: flex; align-items: center; gap: 12px; }
.nut-chep { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 10px; font: 600 12px/1 var(--chu); color: var(--dong-sang); background: none; border: 1px solid var(--dong); border-radius: 2px; cursor: pointer; }
.nut-chep:disabled { opacity: .45; cursor: default; }
.tai-ghi { margin: 0; font-size: 14px; color: var(--ngai-mo); }
.khoi-tai[data-trang-thai="loi"] .tai-tin dd { color: var(--ngai-mo); }

/* ---------- Thân trang giấy: văn bản dài ---------- */
.trang-giay { width: min(var(--rong), 100%); margin: 0 auto; padding: 44px 20px 80px; }
.van-ban { max-width: 780px; margin: 0 auto; font-size: 17px; }
.van-ban > :first-child { margin-top: 0; }
.van-ban h2 { margin: 2em 0 .55em; font-size: 34px; color: var(--muc); scroll-margin-top: 84px; }
.van-ban h2::after { content: ""; display: block; width: 120px; height: 10px; margin-top: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cg fill='none' stroke='%23a63022' stroke-width='1.2'%3E%3Cpath d='M0 5h50M70 5h50'/%3E%3Ccircle cx='60' cy='5' r='4'/%3E%3C/g%3E%3Ccircle cx='60' cy='5' r='1.6' fill='%23a63022'/%3E%3C/svg%3E") left center / contain no-repeat; }
.van-ban h3 { margin: 1.6em 0 .4em; font-size: 25px; color: var(--muc); scroll-margin-top: 84px; }
.van-ban p, .van-ban ul, .van-ban ol { margin: 0 0 1em; }
.van-ban ul, .van-ban ol { padding-left: 1.4em; }
.van-ban li { margin: .3em 0; }
.van-ban li > ul, .van-ban li > ol { margin: .3em 0 .4em; }
.van-ban li > p { margin: .3em 0; }
.van-ban li::marker { color: var(--son); }
.van-ban a { color: var(--son); text-underline-offset: 2px; }
.van-ban a:hover { color: var(--son-dam); }
.van-ban strong { color: var(--muc); }
.van-ban code { font: 14px/1.4 Consolas, "Cascadia Mono", monospace; padding: 1px 4px; background: #d6c79f99; border-radius: 2px; overflow-wrap: anywhere; }
.van-ban pre { margin: .4em 0 1em; padding: 14px 16px; overflow-x: auto; color: var(--ngai); background: #1e1610; box-shadow: inset 0 0 0 1px var(--dong-dam); }
.van-ban pre code { padding: 0; background: none; color: inherit; font-size: 14px; overflow-wrap: normal; }
.van-ban blockquote { margin: 0 0 1em; padding: 10px 16px; border-left: 3px solid var(--son); background: #efe5cb99; }
.van-ban hr { border: 0; height: 1px; margin: 2em 0; background: linear-gradient(90deg, transparent, var(--dong), transparent); }
.bang-cuon { margin: 0 0 1.2em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.van-ban table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; background: #efe5cb88; }
.van-ban th, .van-ban td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #231a1226; }
.van-ban thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #f6ead0; background: #2a1f16; border-bottom: 2px solid var(--dong); }
.van-ban tbody tr:nth-child(even) { background: #e2d4b155; }
.ban-nhap { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px !important; padding: 12px 16px; font-size: 15px; color: var(--muc); background: #efe5cb; border: 1px dashed var(--son); }
.ban-nhap svg { width: 22px; height: 22px; flex: none; color: var(--son); margin-top: 2px; }
.dong-ngay { font-size: 15px; color: var(--muc-nhat); }
.cho-chu { display: block; margin: 0 0 1em; padding: 22px 16px; text-align: center; font-size: 14px; color: var(--ngai-mo); background: #1e1610; outline: 1px dashed #b08a4a88; outline-offset: -8px; }

/* mục lục văn bản pháp lý */
.trang-giay-muc-luc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.trang-giay-muc-luc .van-ban { margin: 0; }
.muc-luc { position: sticky; top: 90px; font-size: 14px; }
.muc-luc summary { font: 700 20px/1.2 var(--tieu-de); cursor: pointer; color: var(--muc); padding-bottom: 8px; border-bottom: 1px solid var(--dong); list-style: none; }
.muc-luc summary::-webkit-details-marker { display: none; }
.muc-luc ol { margin: 10px 0 0; padding: 0; list-style: none; }
.muc-luc li { margin: 0; }
.muc-luc a { display: block; padding: 5px 0 5px 10px; color: var(--muc-nhat); text-decoration: none; border-left: 2px solid transparent; }
.muc-luc a:hover { color: var(--son); border-left-color: var(--son); }

/* ---------- Hỏi đáp: gập/mở ---------- */
.hoi-dap details { border-bottom: 1px solid #231a1226; scroll-margin-top: 84px; }
.hoi-dap details:first-of-type { border-top: 1px solid #231a1226; }
.hoi-dap summary { display: flex; align-items: center; gap: 14px; padding: 18px 4px; cursor: pointer; list-style: none; font: 700 23px/1.25 var(--tieu-de); color: var(--muc); }
.hoi-dap summary::-webkit-details-marker { display: none; }
.hoi-dap summary:hover { color: var(--son); }
.hoi-dap summary .ic { width: 20px; height: 20px; margin-left: auto; color: var(--son); transition: transform .2s; }
.hoi-dap details[open] summary .ic { transform: rotate(45deg); }
.hoi-dap .tra-loi { padding: 0 4px 10px; }
.hoi-dap-mo { text-align: center; margin: 0 0 26px !important; color: var(--muc-nhat); }

/* ---------- Tin tức: bộ lọc, danh sách ---------- */
.khoi-tin-tuc { padding-top: 40px; }
.loc-tin { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
.loc-tin a { padding: 9px 18px; font: 700 13px/1 var(--chu); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--muc); border: 1px solid var(--dong); background: #efe5cb88; }
.loc-tin a:hover { border-color: var(--son); color: var(--son); }
.loc-tin a[aria-current="true"] { color: #f6ead0; background: var(--son); border-color: var(--son-dam); }
.luoi-tin-ds { grid-template-columns: repeat(3, 1fr) !important; }
.luoi-tin-ds .the-tin:first-child { grid-column: auto !important; }
.the-tin[hidden] { display: none; }
.tin-trong { text-align: center; font-style: italic; color: var(--muc-nhat); }
.nhan-cam-nang { background: #2f5d4a; color: #f0e6cc; }

/* ---------- Bài tin ---------- */
.bai .ve-lai { margin-bottom: 18px; }
.bai-anh { margin: 0 0 28px; border: 20px solid transparent; border-image: url(/img/khung-bang-nho-vien.webp) 108 112 108 112 / 24px round; background: #1e1610; background-clip: padding-box; }
.bai-anh img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bai .dem-nguoc { margin: 0 auto 30px; text-align: center; color: var(--ngai); background: #1e1610; }
.bai-khac { max-width: var(--rong); margin: 70px auto 0; }
.bai-khac h2 { text-align: center; font-size: 40px; margin-bottom: 26px; }

/* ---------- Hộp giới thiệu tướng ---------- */
.hop-tuong { width: min(880px, calc(100% - 32px)); max-height: calc(100vh - 40px); padding: 0; color: var(--ngai); background: #1e1610; border: 22px solid transparent; border-image: url(/img/khung-bang-nho-vien.webp) 108 112 108 112 / 26px round; background-clip: padding-box; overflow: auto; }
.hop-tuong::backdrop { background: #0a0705d9; }
.hop-tuong[open] { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.hop-tuong-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hop-tuong-chu { padding: 26px 30px 24px; }
.hop-tuong-cap { margin: 0 0 4px; font: 700 13px/1 var(--chu); letter-spacing: .14em; text-transform: uppercase; color: var(--dong-sang); }
.hop-tuong h3 { font-size: 40px; margin-bottom: 12px; }
.hop-tuong p { margin: 0 0 12px; color: #e3d7ba; }
.hop-tuong-nguon { font-size: 14px; color: var(--ngai-mo) !important; }
.hop-tuong-nhap { font-size: 13px; font-style: italic; color: var(--ngai-mo) !important; border-top: 1px solid #b08a4a44; padding-top: 10px; }
.hop-dong { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--ngai); background: #0f0b08cc; border: 1px solid var(--dong); border-radius: 50%; cursor: pointer; }
.hop-dong .ic { width: 20px; height: 20px; }

/* ---------- Chân trang: hàng mạng xã hội ---------- */
.chan-mxh { display: flex; justify-content: center; gap: 12px; margin: 4px 0 14px; }
.chan-mxh a, .chan-mxh span { display: grid; place-items: center; width: 40px; height: 40px; color: var(--dong-sang); border: 1px solid var(--dong-dam); border-radius: 50%; }
.chan-mxh span { opacity: .55; }
.chan-mxh .ic { width: 20px; height: 20px; }
.chan-mxh a:hover { color: var(--ngai); border-color: var(--dong); }

@media (max-width: 1100px) {
  .trang-giay-muc-luc { grid-template-columns: 1fr; gap: 20px; }
  .muc-luc { position: static; max-width: 780px; width: 100%; margin: 0 auto; }
  .trang-giay-muc-luc .van-ban { margin: 0 auto; }
  .luoi-tin-ds { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 760px) {
  .dau-con { min-height: 0; padding: 96px 16px 70px; }
  .dau-con h1 { font-size: 40px; }
  .dau-con-bai h1 { font-size: 32px; }
  .dau-con-mo { font-size: 15.5px; }
  .tai-tin { grid-template-columns: 1fr 1fr; }
  .tai-sha dd { flex-wrap: wrap; }
  .tai-tin .tai-rong { grid-column: 1 / -1; }
  .van-ban pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .trang-giay { padding: 28px 16px 56px; }
  .van-ban { font-size: 16px; }
  .van-ban h2 { font-size: 28px; }
  .van-ban h3 { font-size: 22px; }
  .van-ban table { font-size: 14px; }
  .van-ban th, .van-ban td { padding: 8px 9px; }
  .hoi-dap summary { font-size: 20px; padding: 15px 2px; }
  .luoi-tin-ds { grid-template-columns: 1fr !important; }
  .loc-tin { gap: 8px; margin-bottom: 22px; }
  .loc-tin a { padding: 8px 12px; font-size: 12px; }
  .bai-anh { border-width: 14px; }
  .bai-khac h2 { font-size: 32px; }
  .hop-tuong[open] { grid-template-columns: 1fr; }
  .hop-tuong-anh img { height: 240px; }
  .hop-tuong-chu { padding: 18px 16px 16px; }
  .hop-tuong h3 { font-size: 32px; }
}