/* Cổng học liệu HTTTQL — giao diện theo tinh thần bìa sách (anh Long chốt 30/10/2026):
   nền xanh đêm, tiêu đề lớn có chữ vàng ánh kim, vệt sáng xanh–vàng, ô số liệu trong suốt kiểu bảng điều khiển.
   Khung trang học theo hệ thống chấm python.dzfullstack.com: thanh đầu viền vàng, thẻ bo góc, nhãn vàng chữ hoa. */
:root {
  --dem: #050d1f; --dem-2: #0a1a36; --dem-3: #0f2448;
  --the: rgba(18, 38, 74, .62); --the-dac: #0d1d3a; --vien: rgba(120, 165, 235, .2); --vien-sang: rgba(140, 190, 255, .5);
  --chu: #e8eef9; --chu-phu: #a9b8d2; --chu-mo: #7f90ae;
  --vang: #f5b80e; --vang-sang: #ffd54a; --vang-dam: #c98f00; --lam: #3d8bff; --lam-sang: #7cc0ff; --xanh-nhat: rgba(61, 139, 255, .14);
  --vang-kim: linear-gradient(180deg, #fff3b0 0%, #ffd23f 38%, #f2a900 62%, #ffcf3a 100%);
  --bong: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  --bo: 14px; --nav: 64px; --rong: 1180px;
  --font: 'Be Vietnam Pro', 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 16px); scroll-behavior: smooth; background: var(--dem); }
body { margin: 0; color: var(--chu); font: 16px/1.68 var(--font); padding-top: var(--nav); -webkit-font-smoothing: antialiased;
  background: radial-gradient(900px 600px at 85% -10%, rgba(61,139,255,.16), transparent 60%), radial-gradient(800px 500px at -10% 40%, rgba(245,184,14,.06), transparent 60%), var(--dem); background-attachment: fixed; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--lam-sang); }
a:hover { color: var(--vang-sang); }
h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0; color: #fff; }
p { margin: 0 0 12px; }
code { font-size: .9em; background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 5px; }
:focus-visible { outline: 3px solid var(--vang); outline-offset: 2px; }
.an { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trang { max-width: var(--rong); margin: 0 auto; padding: 8px 20px 64px; position: relative; }
.thu p, .van p, .van li, .the-mo p, .hero-dan, .hero-nho p, .ch-mo, .mo-ta-muc, .buoc p, .ch-dau .cau-hoi, .ch-dau .mo-dau, .chan-trong p, .tep-mo, .ds-chon small, .dai-anh figcaption { text-align: justify; hyphens: manual; }

/* ---------- Thanh đầu ---------- */
.thanh-tien { position: fixed; left: 0; right: 0; top: calc(var(--nav) - 3px); height: 3px; z-index: 60; background: linear-gradient(90deg, var(--lam), var(--vang-sang)); transform-origin: 0 50%; transform: scaleX(0); }
.dau { position: fixed; inset: 0 0 auto 0; height: var(--nav); z-index: 50; display: flex; align-items: center; gap: 8px; padding: 0 20px;
  background: rgba(6, 16, 38, .82); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 3px solid var(--vang); box-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.nhan-hieu { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: 18px; }
.mis { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--vang-kim); color: #0a1a36; font-weight: 800; font-size: 14px; letter-spacing: -.02em; box-shadow: 0 0 18px rgba(245,184,14,.35); }
.nhan-chu { display: flex; flex-direction: column; line-height: 1.15; }
.nhan-chu small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--vang); font-weight: 600; }
.nhan-chu b { font-size: 15px; color: #fff; white-space: nowrap; }
.dieu-huong { display: flex; height: 100%; }
.dieu-huong a { display: flex; align-items: center; height: 100%; padding: 0 13px; color: #c9d6ee; text-decoration: none; font-size: 14.5px; font-weight: 500; position: relative; }
.dieu-huong a:hover { background: rgba(255,255,255,.07); color: #fff; }
.dieu-huong a[aria-current="page"] { color: #fff; font-weight: 600; }
.dieu-huong a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--vang-sang); border-radius: 3px 3px 0 0; box-shadow: 0 0 10px var(--vang); }
.dau-phai { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; color: #fff; font-weight: 600; font-size: 14px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 9px; }
.menu summary::-webkit-details-marker { display: none; }
.menu-ds { position: absolute; right: 0; top: 48px; min-width: 250px; background: var(--the-dac); border: 1px solid var(--vien); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.5); padding: 6px; display: grid; }
.menu-ds a { padding: 10px 14px; border-radius: 8px; color: var(--chu); text-decoration: none; font-size: 15px; }
.menu-ds a:hover, .menu-ds a[aria-current="page"] { background: var(--xanh-nhat); color: #fff; }

/* ---------- Nút ---------- */
.nut { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 11px; font: 600 15px/1.2 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; color: #fff; background: rgba(255,255,255,.06); border-color: var(--vien); }
.nut:hover { transform: translateY(-1px); color: #fff; border-color: var(--vien-sang); }
.nut-chinh { background: var(--vang-kim); color: #0a1a36; border-color: transparent; box-shadow: 0 6px 22px rgba(245,184,14,.28); }
.nut-chinh:hover { color: #0a1a36; box-shadow: 0 8px 30px rgba(245,184,14,.45); }
.nut-nho { padding: 8px 14px; font-size: 14px; border-radius: 9px; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Thẻ, nhãn, mục ---------- */
.the { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); box-shadow: var(--bong); padding: 24px 26px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nhan { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vang); }
.nhan::before { content: ""; width: 28px; height: 2px; background: var(--vang); box-shadow: 0 0 8px var(--vang); }
.muc { margin-top: 56px; }
.tieu-de-muc { font-size: clamp(1.45em, 2.6vw, 1.9em); margin: 8px 0 6px; }
.mo-ta-muc { color: var(--chu-phu); margin: 0 0 22px; }

/* ---------- Khối mở đầu theo bìa ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--vien);
  background: radial-gradient(1000px 520px at 78% 30%, rgba(40,110,230,.35), transparent 62%), linear-gradient(180deg, #071533 0%, #050d1f 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(140,190,255,.35) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(600px 420px at 80% 40%, #000, transparent 75%); mask-image: radial-gradient(600px 420px at 80% 40%, #000, transparent 75%); }
.vet-sang { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.4) 40%, #000 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.4) 40%, #000 60%); }
@media (max-width: 960px) { .vet-sang { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 40%, #000 75%); mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 40%, #000 75%); } }
.vet-sang path { fill: none; stroke-linecap: round; }
.vet-nen { stroke-width: 2; opacity: .55; }
.vet-hao { stroke-width: 9; opacity: .18; filter: blur(6px); }
.vet-chay { stroke-width: 3; stroke-dasharray: 90 1400; animation: chay 7s linear infinite; filter: drop-shadow(0 0 6px #fff3b0); }
.vet-chay.c2 { animation-duration: 9s; animation-delay: -3s; }
.vet-chay.c3 { animation-duration: 11s; animation-delay: -6s; }
@keyframes chay { from { stroke-dashoffset: 1490; } to { stroke-dashoffset: 0; } }
.hero-trong { position: relative; z-index: 1; max-width: var(--rong); margin: 0 auto; padding: 64px 20px 72px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.ten-lon { font-size: clamp(40px, 6.2vw, 80px); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; margin: 16px 0 18px; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.ten-lon span { display: block; }
.ten-lon .kim { background: var(--vang-kim); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(245,184,14,.35)); }
.hero-phu { font-size: clamp(18px, 2vw, 22px); line-height: 1.45; color: #e6edf8; margin: 0; max-width: 560px; }
.gach-vang { width: 150px; height: 2px; margin: 20px 0; border: 0; background: linear-gradient(90deg, var(--vang), transparent); box-shadow: 0 0 10px var(--vang); }
.hero-dan { color: var(--chu-phu); max-width: 560px; }
.tac-gia-dong { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; font-size: 14.5px; color: #dfe8f7; line-height: 1.45; }
.tac-gia-dong img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--vang); background: #1667d4; flex: none; }
.tac-gia-dong small { display: block; color: var(--chu-mo); font-size: 13px; margin-top: 2px; }
/* bảng điều khiển bên phải: số thật của học liệu */
.bang-dk { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; }
.o-dk { background: linear-gradient(160deg, rgba(40,90,170,.42), rgba(12,30,64,.7)); border: 1px solid var(--vien-sang); border-radius: 14px; padding: 16px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.o-dk b { display: block; font-size: 34px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.o-dk span { display: block; font-size: 13px; color: #c3d2ea; line-height: 1.4; margin-top: 4px; }
.o-dk.rong { grid-column: 1 / -1; transform: none; }
.o-dk.rong .tieu { display: flex; justify-content: space-between; font-size: 12.5px; color: #c3d2ea; margin-bottom: 10px; }
.o-dk.rong .tieu b { font-size: 12.5px; display: inline; color: var(--vang); }
.cot-bd { display: flex; align-items: flex-end; gap: 8px; height: 92px; }
.cot-bd i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--lam-sang), rgba(61,139,255,.25)); height: var(--h); transform-origin: bottom; animation: moc 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms + .3s); }
.cot-bd i.v { background: var(--vang-kim); box-shadow: 0 0 14px rgba(245,184,14,.5); }
@keyframes moc { from { transform: scaleY(0); } }
.cot-ten { display: flex; gap: 8px; margin-top: 6px; }
.cot-ten em { flex: 1; text-align: center; font-style: normal; font-size: 11px; color: var(--chu-mo); }

/* đầu trang con (gọn) */
.hero-nho .hero-trong { grid-template-columns: 1fr; padding: 44px 20px 46px; }
.hero-nho h1 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.12; margin: 12px 0 10px; }
.hero-nho p { color: var(--chu-phu); max-width: 760px; margin: 0; }
.hero-nho .hang-nut { margin-top: 18px; }

/* ---------- Nền trang chủ: video dòng chảy dữ liệu trên ảnh thật Đà Nẵng (nguồn: video_nen/) ---------- */
.hero-chu { background: #020a1c; }
.hero-chu::before { display: none; }
.hero-chu .hero-trong { padding-bottom: 270px; }
.nen-video { position: absolute; inset: 0; pointer-events: none; background: #020a1c url(../tn/nen_ngang.jpg) center bottom / cover no-repeat; }
.nen-video video { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.nen-video::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3,10,26,.9) 0%, rgba(3,10,26,.72) 34%, rgba(3,10,26,.25) 58%, rgba(3,10,26,0) 75%),
              linear-gradient(180deg, rgba(3,10,26,.35) 0%, rgba(3,10,26,0) 30%);
  background-size: 100% calc(100% - 250px), 100% 100%; background-repeat: no-repeat; }
.nen-video::before { content: ""; position: absolute; left: 0; right: 0; bottom: 250px; height: 90px; z-index: 1;
  background: linear-gradient(90deg, rgba(3,10,26,.9) 0%, rgba(3,10,26,.72) 34%, rgba(3,10,26,.25) 58%, rgba(3,10,26,0) 75%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
@media (max-width: 960px) {
  .hero-chu .hero-trong { padding-bottom: 300px; }
  .nen-video { top: auto; height: min(108vw, 760px); background-image: url(../tn/nen_doc.jpg); background-position: center bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
  .nen-video::after { background: linear-gradient(180deg, rgba(3,10,26,.6) 0%, rgba(3,10,26,0) 40%); }
  .nen-video::before { display: none; }
}

/* ---------- Lưới chương ---------- */
.luoi-ch { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
a.ch { display: flex; flex-direction: column; text-decoration: none; color: var(--chu); background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); box-shadow: var(--bong); overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; position: relative; }
a.ch:hover { border-color: var(--vang); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(245,184,14,.35), 0 0 28px rgba(245,184,14,.15); color: var(--chu); }
.ch-anh { aspect-ratio: 16 / 9; overflow: hidden; background: var(--dem-3); position: relative; }
.ch-anh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,13,31,.85)); }
.ch-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; filter: saturate(.9); }
a.ch:hover .ch-anh img { transform: scale(1.06); }
.ch-so-lon { position: absolute; left: 14px; bottom: 6px; z-index: 1; font-size: 40px; font-weight: 800; line-height: 1; background: var(--vang-kim); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-than { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ch-so { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lam-sang); }
.ch-ten { font-weight: 600; font-size: 16px; line-height: 1.35; color: #fff; }
.ch-mo { font-size: 13.5px; color: var(--chu-phu); line-height: 1.5; }
.ch-mo b { color: var(--vang); font-weight: 600; }

/* ---------- Bốn bước ---------- */
.buoc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: buoc; }
.buoc > div { position: relative; padding-top: 30px; }
.buoc > div::before { counter-increment: buoc; content: counter(buoc); position: absolute; top: -16px; left: 22px; width: 34px; height: 34px; border-radius: 50%; background: var(--vang-kim); color: #0a1a36; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--dem), 0 0 18px rgba(245,184,14,.45); }
.buoc h3 { font-size: 1.05em; margin: 4px 0 6px; }
.buoc p { margin: 0; color: var(--chu-phu); font-size: 14.5px; }

/* ---------- Lời tác giả ---------- */
.trich { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; border-left: 4px solid var(--vang); }
.trich figure { margin: 0; position: sticky; top: calc(var(--nav) + 20px); }
.trich figure img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top; border-radius: 12px; background: #1667d4; box-shadow: 0 0 0 1px var(--vien-sang), 0 18px 40px rgba(0,0,0,.45); }
.trich figcaption { font-size: 13px; color: var(--chu-phu); margin-top: 10px; text-align: center; }
.thu p { font-size: 16.5px; line-height: 1.8; color: #dbe4f3; }
.thu p:first-child::first-letter { float: left; font-size: 3.4em; line-height: .9; font-weight: 800; margin: 6px 10px 0 0; background: var(--vang-kim); -webkit-background-clip: text; background-clip: text; color: transparent; }
.thu .ky { text-align: right; font-weight: 700; margin-top: 20px; color: #fff; }
.thu .ky span { display: block; font-weight: 400; color: var(--chu-phu); font-size: 14px; }

/* ---------- Dữ liệu: ô tìm, nhóm tệp, xem trước ---------- */
.tim-gon { margin-bottom: 18px; }
.tim-nhan { display: block; font-weight: 600; margin-bottom: 8px; color: #fff; }
.o-tim { width: 100%; font: 500 17px var(--font); padding: 13px 16px; border-radius: 11px; border: 1px solid var(--vien); background: rgba(5,13,31,.6); color: var(--chu); }
.o-tim:focus { outline: none; border-color: var(--vang); box-shadow: 0 0 0 3px rgba(245,184,14,.18); }
.goi-y { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 14px; color: var(--chu-phu); }
.goi-y button { font: 500 13.5px var(--font); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--vien); background: rgba(255,255,255,.04); color: var(--chu); cursor: pointer; }
.goi-y button:hover { border-color: var(--vang); color: var(--vang-sang); }
.ket-qua { display: grid; gap: 8px; margin-top: 14px; }
.kq { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 4px 18px; text-align: left; font: inherit; color: inherit; background: rgba(5,13,31,.5); border: 1px solid var(--vien); border-radius: 10px; padding: 12px 14px; cursor: pointer; width: 100%; }
.kq:hover { border-color: var(--vang); }
.kq-ten { font-weight: 600; word-break: break-word; color: #fff; }
.kq-ch { font-size: 13px; color: var(--chu-phu); }
.kq-dong { grid-column: 2; grid-row: 1 / span 2; font-size: 13.5px; color: var(--chu-phu); }
.kq-dong mark { background: var(--vang); color: #0a1a36; border-radius: 3px; padding: 0 2px; }
.kq-trong { color: var(--chu-phu); font-size: 14px; }
.nhom-ch { margin-top: 16px; }
.nhom-ch h2 { display: flex; align-items: center; gap: 14px; font-size: 1.1em; margin-bottom: 12px; flex-wrap: wrap; }
.nhom-ch h2 img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--vien); }
.nhom-ch h2 span { flex: 1; min-width: 200px; }
.nhom-ch h2 a { font-size: 13.5px; font-weight: 600; }
.tep { display: grid; grid-template-columns: minmax(200px, 300px) 1fr auto; gap: 6px 18px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--vien); }
.tep-ten button { all: unset; cursor: pointer; color: var(--lam-sang); font-weight: 600; word-break: break-word; }
.tep-ten button:hover { color: var(--vang-sang); text-decoration: underline; }
.tep-ten button:focus-visible { outline: 3px solid var(--vang); }
.tep-mo { color: var(--chu-phu); font-size: 14px; overflow-wrap: anywhere; }
.tep-tai { font-size: 13.5px; white-space: nowrap; }
.bang, .bang-ui { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.bang th, .bang td, .bang-ui th, .bang-ui td { white-space: nowrap; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.bang th, .bang-ui th { color: var(--vang); font-weight: 600; background: #0b1b38; position: sticky; top: 0; white-space: nowrap; }
.bang td.so, .bang-ui td.so { text-align: right; white-space: nowrap; }
.bang tr:hover td, .bang-ui tr:hover td { background: rgba(61,139,255,.07); }
.cuon-ngang { overflow: auto; max-height: 460px; border: 1px solid var(--vien); border-radius: 10px; background: rgba(5,13,31,.5); }
.hop-xem { border: 1px solid var(--vien-sang); padding: 0; width: min(1100px, calc(100vw - 24px)); max-height: 86vh; border-radius: 14px; background: var(--the-dac); color: var(--chu); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.hop-xem::backdrop { background: rgba(2,6,16,.72); backdrop-filter: blur(3px); }
.hop-xem-dau { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--vien); }
.hop-xem-dau b { color: #fff; }
.hop-xem-dau div { display: flex; gap: 8px; }
.hop-xem-than { padding: 14px 18px 18px; }
.hop-xem .cuon-ngang { max-height: calc(86vh - 110px); }
.goi-zip .nut { padding: 8px 14px; font-size: 14px; }

/* ---------- Trang chương ---------- */
.ch-dau .hero-trong { grid-template-columns: 1.2fr 1fr; padding: 48px 20px 52px; }
.ch-dau h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; margin: 12px 0 14px; }
.ch-dau .cau-hoi { font-size: 18px; font-weight: 500; color: #e6edf8; }
.ch-dau .mo-dau { color: var(--chu-phu); }
.ch-dau .mo-dau b { color: var(--vang); }
.ch-dau figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--vien-sang); box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 40px rgba(61,139,255,.18); position: relative; }
.ch-dau figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ch-dau figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; font-size: 12.5px; color: #e6edf8; background: linear-gradient(180deg, transparent, rgba(5,13,31,.9)); }
.ch-dl { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.ch-dl > * { min-width: 0; }
.ds-chon { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ds-chon button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--vien); font-weight: 600; font-size: 14.5px; word-break: break-word; color: #fff; background: rgba(5,13,31,.35); }
.ds-chon button:hover { border-color: var(--vien-sang); }
.ds-chon button[aria-pressed="true"] { background: var(--xanh-nhat); border-color: var(--vang); box-shadow: inset 3px 0 0 var(--vang); }
.ds-chon button:focus-visible { outline: 3px solid var(--vang); }
.ds-chon small { display: block; font-weight: 400; font-size: 12.5px; color: var(--chu-phu); margin-top: 2px; }
.khung-xem-dau { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.khung-xem-dau b { color: #fff; }
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.hai-cot h2 { font-size: 1.2em; margin-bottom: 10px; }
.ds-bai { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-bai li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; font-size: 15px; }
.ds-bai b { color: var(--vang); font-variant-numeric: tabular-nums; }
.ds-bai .ghi { display: block; color: var(--chu-mo); font-size: 13.5px; margin-top: 6px; }
.chuyen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chuyen a { display: grid; grid-template-columns: 96px 1fr; gap: 4px 14px; align-items: center; text-decoration: none; color: var(--chu); background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px; transition: border-color .2s, transform .2s; }
.chuyen a:hover { border-color: var(--vang); transform: translateY(-2px); color: var(--chu); }
.chuyen img { grid-row: 1 / span 2; width: 96px; height: 64px; object-fit: cover; border-radius: 8px; }
.chuyen small { color: var(--lam-sang); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.chuyen span { font-weight: 600; line-height: 1.35; color: #fff; }
.chuyen a:last-child { text-align: right; grid-template-columns: 1fr 96px; }
.chuyen a:last-child img { grid-column: 2; grid-row: 1 / span 2; }
.chuyen a:last-child small, .chuyen a:last-child span { grid-column: 1; }

/* ---------- Trang văn bản, dải ảnh ---------- */
.van h2 { font-size: 1.2em; margin: 24px 0 8px; }
.van h2:first-child { margin-top: 0; }
.van ol, .van ul { padding-left: 1.3em; }
.van li { margin-bottom: 6px; }
.tltk p { padding-left: 2em; text-indent: -2em; font-size: 15px; margin: 6px 0; text-align: left; color: #d5deee; }
.tltk a { word-break: break-all; }
.tltk h1, .tltk h2 { font-size: 1.15em; margin: 22px 0 8px; color: var(--vang); }
.dai-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.dai-anh figure { margin: 0; background: var(--the); border: 1px solid var(--vien); border-radius: 12px; overflow: hidden; }
.dai-anh img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dai-anh figcaption { padding: 10px 12px; font-size: 13px; color: var(--chu-phu); }

/* ---------- Chân trang ---------- */
.chan { background: linear-gradient(180deg, #071533, #040a18); color: var(--chu-phu); border-top: 3px solid var(--vang); margin-top: 24px; }
.chan-trong { max-width: var(--rong); margin: 0 auto; padding: 34px 20px 24px; display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 28px; font-size: 14px; line-height: 1.6; }
.chan-trong p { margin: 0 0 8px; }
.chan b { color: #fff; display: block; margin-bottom: 8px; }
.chan a { color: #c9d6ee; text-decoration: none; }
.chan a:hover { color: var(--vang-sang); text-decoration: underline; }
.chan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.chan details summary { cursor: pointer; color: #c9d6ee; }
.chan details ul { margin-top: 8px; font-size: 12.5px; max-height: 220px; overflow: auto; }
.chan-day { max-width: var(--rong); margin: 0 auto; padding: 14px 20px 20px; border-top: 1px solid var(--vien); font-size: 13px; color: var(--chu-mo); display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }

/* ---------- Hiện dần (nội dung vẫn hiện nếu script lỗi) ---------- */
html.js [data-r] { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i, 0) * 55ms); }
html.js [data-r].in, html.js.mo-het [data-r] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-r] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .vet-chay { animation: none; display: none; } .cot-bd i { animation: none; }
}

/* ---------- Khổ nhỏ ---------- */
@media (max-width: 1100px) { .dieu-huong a { padding: 0 9px; font-size: 14px; } }
@media (max-width: 960px) {
  .dieu-huong { display: none; } .menu { display: block; }
  .hero-trong, .ch-dau .hero-trong { grid-template-columns: 1fr; padding: 44px 20px 52px; gap: 34px; }
  .buoc { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .trich { grid-template-columns: 1fr; } .trich figure { position: static; max-width: 220px; }
  .ch-dl, .hai-cot { grid-template-columns: 1fr; }
  .chan-trong { grid-template-columns: 1fr 1fr; } .chan-trong > div:first-child { grid-column: 1 / -1; }
  .tep { grid-template-columns: 1fr auto; } .tep-mo { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
  .nhan-chu b { font-size: 13.5px; } .nhan-chu small { display: none; }
  .dau-phai .nut-chinh { display: none; }
  .trang { padding: 4px 14px 48px; }
  .the { padding: 18px 16px; }
  .hero-trong { padding: 34px 16px 42px; }
  .ten-lon { font-size: clamp(34px, 10.5vw, 46px); }
  .o-dk b { font-size: 28px; }
  .buoc { grid-template-columns: 1fr; }
  .kq { grid-template-columns: 1fr; } .kq-dong { grid-column: 1; grid-row: auto; }
  .chuyen, .chan-trong { grid-template-columns: 1fr; }
  .thu p, .van p, .van li, .the-mo p, .hero-dan, .hero-nho p, .ch-mo, .mo-ta-muc, .buoc p { text-align: justify; }
  .thu p:first-child::first-letter { font-size: 2.8em; }
}