/* [db8dd01c] Trang riêng Thư viện (thu-vien.html) — Ken 28/10: «nội dung tra cứu → trang riêng». Màn đầu dựng TRÙNG mockup design/mockups/nav/lib-1|2|3.jpg
   trên sân khấu 1672×941 (--u), toạ độ từ bảng design/mockups/nav/lib-inventory.md; điện thoại theo lib-m.jpg (--v = 100vw/390). Dưới: toàn bộ thư viện + hộp xem. */
.pg { margin: 0; background: #0E1A2E; color: #E9EDF2; font-family: "Be Vietnam Pro", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.pg :is(.lb, .lb-all, .lb-box, .nw, .nw-all) *, .pg :is(.lb, .lb-all, .lb-box, .nw, .nw-all) *::before, .pg :is(.lb, .lb-all, .lb-box, .nw, .nw-all) *::after { box-sizing: border-box; }
.pg button { font: inherit; color: inherit; }
/* Ken 28/10 «màu và nút không hợp tổng thể, nặng vibe code» → đúng ngôn ngữ trang chủ đã duyệt (#can-ho ch05 «Navy nhung & vàng ánh kim»):
   kính navy + viền vàng ánh kim mảnh, chữ Lora in hoa giãn; CHỈ mục đang chọn / nút chính đổ vàng kim */
.pg { --g-line: linear-gradient(120deg, rgba(255, 255, 255, .34), rgba(233, 211, 166, .16) 45%, rgba(255, 255, 255, .34)); --g-navy: linear-gradient(170deg, rgba(17, 36, 66, .82), rgba(13, 27, 50, .9)); --g-btn: linear-gradient(#F3E6D0, #C9A574); --g-ink: #0E1A2E; --g-champ: #E9D3A6; } /* style-4 (Ken 28/10): kính mực + viền bạch kim mảnh, MỘT điểm nhấn cam hoàng hôn cho mục đang chọn / nút chính */
.pg main ul { margin: 0; padding: 0; list-style: none; }
/* chọn kiểu 1/2/3 (Ken 28/10 «lựa chọn khác thì chọn ở đâu?»): ô ảnh thu nhỏ từng kiểu trên kính navy viền vàng — như dock trang chủ, KHÔNG dãy nút chữ; điện thoại 1 bố cục chung → ẩn */
.kieu { position: fixed; z-index: 30; right: 16px; top: 50%; translate: 0 -50%; display: grid; gap: 9px; padding: 12px 9px 9px; border: 1px solid transparent; border-radius: 14px;
  background: var(--g-navy) padding-box, var(--g-line) border-box; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.kieu p { margin: 0; text-align: center; font: 500 10px / 1 "Lora V", serif; letter-spacing: .26em; text-transform: uppercase; color: var(--g-champ); }
.kieu a { position: relative; display: block; width: 84px; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; outline: 1px solid rgba(233, 211, 166, .35); opacity: .6; transition: opacity .3s, outline-color .3s, box-shadow .3s; }
.kieu img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kieu span { position: absolute; left: 6px; bottom: 4px; font: 600 12px / 1 "Lora V", serif; color: #F3E6D0; text-shadow: 0 1px 4px rgba(0, 0, 0, .85); }
.kieu a:is(:hover, :focus-visible) { opacity: .92; }
.kieu a[aria-current] { opacity: 1; outline: 2px solid #E8826A; box-shadow: 0 0 14px rgba(232, 130, 106, .45); }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { .kieu { display: none; } }

/* ===== màn đầu: nền (Codex vẽ lại từ mockup, không giao diện) + sân khấu ===== */
:is(.lb, .nw) { --u: min(100vw / 1672, 100vh / 941); position: relative; height: 100vh; min-height: calc(941 * var(--u)); overflow: hidden; background: #0E1A2E; }
:is(.lb__plate, .nw__plate) { position: absolute; inset: 0; background: center / cover no-repeat; }
:root[data-lib="1"] .lb__plate { background-image: url(assets/lib/plate-1.webp); }
:root[data-lib="2"] .lb__plate { background-image: url(assets/lib/plate-2.webp); }
:root[data-lib="3"] .lb__plate { background-image: url(assets/lib/plate-3.webp); }
:is(.lb__stage, .nw__stage) { position: absolute; left: 50%; top: 0; width: calc(1672 * var(--u)); height: calc(941 * var(--u)); translate: -50% 0; } /* neo đỉnh: màn cao hơn 16:9 dư ở đáy, chữ không tụt xa menu */
.lb__stage > *, .lb__title > span, .nw__stage > * { position: absolute; margin: 0; }
.lb__title { position: static; margin: 0; }

/* chữ */
.lb__kicker, .lb__kicker3 { font: 400 calc(var(--fk, 17) * var(--u)) / 1 "Lora V", serif; letter-spacing: .32em; text-transform: uppercase; color: #E9EDF2; white-space: nowrap; }
.lb__it, .lb__caps, .nw__title { font: italic 500 calc(var(--ft, 116) * var(--u)) / 1 "Playfair Display", serif; white-space: nowrap; padding: .16em .12em .24em 0; margin-top: -.16em; /* nền tô chữ chỉ phủ hộp chữ: chừa chỗ dấu chồng (Ấ, Ề) + dấu nặng (Ệ, Ự) kẻo mất dấu */
  background: linear-gradient(180deg, #FFFFFF 18%, #E9EDF2 52%, #C9A574 82%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .35)); }
.lb__caps { font-style: normal; text-transform: uppercase; }
.lb__it, .nw__title { font-family: "Lora V", serif; } /* mockup: nghiêng nét đều, «v» thẳng = Lora (Playfair nghiêng uốn «v») */
.lb__line { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lb__line path { fill: none; stroke: url(#lb-g); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(233, 211, 166, .8)); display: none; }
.lb__sub { left: calc(68 * var(--u)); top: calc(298 * var(--u)); font: 400 calc(21 * var(--u)) / 1.2 "Lora V", serif; color: #E9EDF2; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.lb__note { left: calc(34 * var(--u)); top: calc(890 * var(--u)); font: italic 400 calc(14 * var(--u)) / 1 "Lora V", serif; color: rgba(233, 211, 166, .78); }
:is(.lb__kicker3, .lb__caps, .lb__sub, .lb__note, .lb__arrow, .lb__logo) { display: none; }
.lb__filters { display: flex; align-items: center; padding: calc(4 * var(--u)); border: 1px solid transparent; border-radius: 99px; isolation: isolate;
  background: var(--g-navy) padding-box, var(--g-line) border-box; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, .35); }
.lb__filters::before { content: ""; position: absolute; z-index: -1; left: var(--px, 0); top: calc(4 * var(--u)); bottom: calc(4 * var(--u)); width: var(--pw, 0); border-radius: 99px; background: var(--g-btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(233, 211, 166, .35); transition: left .5s cubic-bezier(.22, 1, .36, 1), width .5s cubic-bezier(.22, 1, .36, 1); }
.lb__filters button { position: relative; flex: 1 1 auto; height: 100%; padding: 0 calc(var(--fpad, 18) * var(--u)); border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 500 calc(var(--fp, 14) * var(--u)) / 1 "Lora V", serif; letter-spacing: .16em; text-transform: uppercase; color: var(--g-champ); transition: color .4s; }
.lb__filters button + button::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #E8826A; translate: -50% -50%; transition: opacity .3s; }
.lb__filters [aria-pressed="true"]::before, .lb__filters [aria-pressed="true"] + button::before { opacity: 0; }
.lb__filters [aria-pressed="true"] { color: var(--g-ink); }
.lb__filters button:not([aria-pressed="true"]):is(:hover, :focus-visible) { color: #F3E6D0; }
.lb__filters button:focus-visible { outline: 1px solid #E8826A; outline-offset: -3px; border-radius: 99px; }
:root[data-lib="2"] .lb__filters { left: calc(83 * var(--u)); top: calc(214 * var(--u)); width: calc(535 * var(--u)); height: calc(40 * var(--u)); }
:root[data-lib="1"] .lb__filters { left: calc(80 * var(--u)); top: calc(243 * var(--u)); width: calc(498 * var(--u)); height: calc(46 * var(--u)); }
:root[data-lib="3"] .lb__filters { left: calc(651 * var(--u)); top: calc(727 * var(--u)); width: calc(354 * var(--u)); height: calc(47 * var(--u)); --fp: 12.5; --fpad: 8; }

/* lọc */

/* thẻ */
.lb__feat { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.lb__feat li { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); pointer-events: auto;
  animation: lb-in .9s cubic-bezier(.22, 1, .36, 1) calc(.25s + var(--i, 0) * 80ms) backwards; transition: opacity .45s, filter .45s; }
@keyframes lb-in { from { opacity: 0; translate: 0 calc(26 * var(--u)); } }
.lb__item { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; overflow: hidden; cursor: pointer; text-decoration: none; color: #fff; }
.lb__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.lb__item:is(:hover, :focus-visible) img { transform: scale(1.04); }
.lb__item:focus-visible { outline: 2px solid #E8826A; outline-offset: 3px; }
.lb__feat .lb__item { border: 1.5px solid rgba(233, 211, 166, .92); border-radius: calc(10 * var(--u)); box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, .45); }
.lb__feat .lb__item > span { position: absolute; z-index: 1; left: calc(20 * var(--u)); bottom: calc(17 * var(--u)); font: 500 calc(22 * var(--u)) / 1 "Lora V", serif; letter-spacing: .02em; color: #F3E6D0; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.lb__feat .lb__item::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(14, 26, 46, .72)); pointer-events: none; }
.lb__ico { position: absolute; z-index: 1; right: calc(16 * var(--u)); bottom: calc(13 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); border: 1px solid transparent; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='M4 17.5l5-5 4 4 2.5-2.5 5 4'/%3E%3C/svg%3E") center / 52% no-repeat padding-box, var(--g-navy) padding-box, var(--g-line) border-box; } /* huy hiệu: kính navy + viền vàng ánh kim như trang chủ */
.lb__ico--film { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='2'/%3E%3Cpath d='M7.5 3.5v17M16.5 3.5v17M3.5 8h4M3.5 12h4M3.5 16h4M16.5 8h4M16.5 12h4M16.5 16h4'/%3E%3C/svg%3E") center / 52% no-repeat padding-box, var(--g-navy) padding-box, var(--g-line) border-box; }
.lb__play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); translate: -50% -50%; border: 1px solid transparent; border-radius: 50%; background: var(--g-navy) padding-box, var(--g-line) border-box; transition: scale .35s; }
.lb__play::before { content: ""; width: calc(20 * var(--u)); height: calc(22 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(5 * var(--u)); background: var(--g-btn); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lb__play em { position: absolute; bottom: calc(9 * var(--u)); font: 500 calc(12 * var(--u)) / 1 "Be Vietnam Pro", sans-serif; font-style: normal; }
.lb__item:is(:hover, :focus-visible) .lb__play { scale: 1.08; }
/* Ken 28/10 chọn kiểu 4 «Tiêu điểm» (hover-lab.html): thẻ đang trỏ phóng lên, các thẻ cùng nhóm lùi nhẹ. Ken 29/10: bỏ lớp phủ tối các ảnh khác. Chỉ transform */
.lb__item { transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .4s; }
:is(.lb__feat, .lb-all__grid):has(.lb__item:hover) .lb__item:not(:hover) { transform: scale(.97); }
.is-scroll .lb__item { pointer-events: none; } /* pages.js: đang cuộn thì không đổi ô tiêu điểm */
:is(.lb__feat, .lb-all__grid) .lb__item:hover { transform: scale(1.05); z-index: 1; }
@media (prefers-reduced-motion: reduce) { .lb__item, .lb__item img { transition: none; } }
.lb__360 { position: absolute; z-index: 1; right: calc(20 * var(--u)); bottom: calc(13 * var(--u)); display: grid; place-items: center; width: calc(84 * var(--u)); height: calc(52 * var(--u)); padding-bottom: calc(8 * var(--u));
  border: 1px solid transparent; border-radius: 99px; background: var(--g-navy) padding-box, var(--g-line) border-box; font: 500 calc(19 * var(--u)) / 1 "Lora V", serif; color: #F3E6D0; }
.lb__360::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: calc(9 * var(--u)); height: calc(8 * var(--u)); border: 1.2px solid #B8935E; border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; }

/* ===== kiểu 2 «Lưới kính» (mặc định) — lib-2.jpg ===== */
:root[data-lib="2"] .lb__kicker { left: calc(93 * var(--u)); top: calc(53 * var(--u)); }
:root[data-lib="2"] .lb__l2 { display: block; }
:root[data-lib="2"] .lb__it { --ft: 108; left: calc(86 * var(--u)); top: calc(84 * var(--u)); }
:root[data-lib="2"] .lb__feat li:nth-child(1) { --x: 83; --y: 267; --w: 462; --h: 218; }
:root[data-lib="2"] .lb__feat li:nth-child(2) { --x: 553; --y: 267; --w: 449; --h: 218; }
:root[data-lib="2"] .lb__feat li:nth-child(3) { --x: 1011; --y: 267; --w: 487; --h: 218; }
:root[data-lib="2"] .lb__feat li:nth-child(4) { --x: 83; --y: 493; --w: 512; --h: 216; }
:root[data-lib="2"] .lb__feat li:nth-child(5) { --x: 604; --y: 493; --w: 472; --h: 216; }
:root[data-lib="2"] .lb__feat li:nth-child(6) { --x: 1085; --y: 493; --w: 413; --h: 216; }
:root[data-lib="2"] .lb__feat li:nth-child(7) { --x: 83; --y: 717; --w: 1415; --h: 166; }
.lb__feat li:nth-child(7) img[src^="assets/lib/plan"] { width: 131%; max-width: none; margin-left: -31%; object-position: 50% 56%; } /* mặt bằng: cắt bảng chú thích bên trái ảnh (mockup chỉ thấy bản đồ + biển) */

/* ===== kiểu 1 «Phòng tranh» — lib-1.jpg: khung vàng treo tường, đèn rọi tranh ===== */
:root[data-lib="1"] .lb__kicker { --fk: 15; left: calc(84 * var(--u)); top: calc(96 * var(--u)); letter-spacing: .44em; }
:root[data-lib="1"] .lb__l1 { display: block; }
:root[data-lib="1"] .lb__it { --ft: 97; left: calc(80 * var(--u)); top: calc(124 * var(--u)); } /* cả khối tiêu đề + thanh lọc hạ 14 khỏi đáy viên logo (Ken 29/10); thêm nữa thì thanh lọc chạm đèn rọi tranh y 298 */
:root[data-lib="1"] .lb__feat li:nth-child(1) { --x: 70; --y: 311; --w: 315; --h: 215; }
:root[data-lib="1"] .lb__feat li:nth-child(2) { --x: 1250; --y: 265; --w: 264; --h: 205; }
:root[data-lib="1"] .lb__feat li:nth-child(3) { --x: 970; --y: 275; --w: 258; --h: 197; }
:root[data-lib="1"] .lb__feat li:nth-child(4) { --x: 407; --y: 307; --w: 539; --h: 413; }
:root[data-lib="1"] .lb__feat li:nth-child(5) { --x: 67; --y: 552; --w: 318; --h: 208; }
:root[data-lib="1"] .lb__feat li:nth-child(6) { --x: 969; --y: 501; --w: 252; --h: 223; }
:root[data-lib="1"] .lb__feat li:nth-child(7) { --x: 1238; --y: 500; --w: 287; --h: 220; }
:root[data-lib="1"] .lb__feat .lb__item { padding: calc(5 * var(--u)); border: 0; border-radius: 0; background: linear-gradient(135deg, #F3E6D0, #B8935E 38%, #E9EDF2 66%, #8A6A3F);
  box-shadow: inset 0 0 0 calc(5 * var(--u)) transparent, 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .6); }
:root[data-lib="1"] .lb__feat .lb__item img { outline: 1px solid rgba(0, 0, 0, .7); }
:root[data-lib="1"] .lb__feat .lb__item::after, :root[data-lib="1"] .lb__feat :is(.lb__item > span, .lb__ico) { display: none; }
:root[data-lib="1"] .lb__feat li::before { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(-13 * var(--u)); width: calc(48 * var(--u)); height: calc(7 * var(--u)); translate: -50% 0; border-radius: calc(3 * var(--u));
  background: linear-gradient(#F3E2C2, #9C7A48); box-shadow: 0 calc(6 * var(--u)) calc(26 * var(--u)) calc(8 * var(--u)) rgba(233, 211, 166, .32); } /* đèn rọi tranh bằng đồng + quầng sáng hắt xuống khung */
:root[data-lib="1"] .lb__play { left: calc(33 * var(--u)); top: auto; bottom: calc(-6 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-width: 2px; }
:root[data-lib="1"] .lb__play::before { width: calc(13 * var(--u)); height: calc(15 * var(--u)); margin: 0 0 0 calc(4 * var(--u)); }
:root[data-lib="1"] .lb__play em { left: calc(155 * var(--u)); bottom: calc(7 * var(--u)); padding: calc(5 * var(--u)) calc(8 * var(--u)); border-radius: 99px; border: 1px solid transparent; background: var(--g-navy) padding-box, var(--g-line) border-box; font: 500 calc(14 * var(--u)) / 1 "Lora V", serif; letter-spacing: .08em; color: #F3E6D0; }
:root[data-lib="1"] .lb__360 { right: calc(16 * var(--u)); bottom: calc(16 * var(--u)); width: calc(72 * var(--u)); height: calc(46 * var(--u)); font-size: calc(17 * var(--u)); }

/* ===== kiểu 3 «Băng chuyền vòm» — lib-3.jpg: thẻ vòm xếp vòng cung, thẻ giữa lớn; ‹ › / bấm thẻ bên để xoay ===== */
:root[data-lib="3"] .lb__kicker { display: none; }
:root[data-lib="3"] .lb__kicker3 { display: block; left: calc(68 * var(--u)); top: calc(87 * var(--u)); letter-spacing: .36em; }
:root[data-lib="3"] .lb__l3 { display: block; }
:root[data-lib="3"] .lb__caps { display: block; --ft: 76; left: calc(64 * var(--u)); top: calc(124 * var(--u)); letter-spacing: .005em; }
:root[data-lib="3"] .lb__it { --ft: 73; left: calc(62 * var(--u)); top: calc(196 * var(--u)); }
:root[data-lib="3"] :is(.lb__sub, .lb__note) { display: block; }
:root[data-lib="3"] .lb__arrow { display: grid; place-items: center; top: calc(709 * var(--u)); width: calc(58 * var(--u)); height: calc(58 * var(--u)); padding: 0; border: 1px solid transparent; border-radius: 50%; color: var(--g-champ);
  background: var(--g-navy) padding-box, var(--g-line) border-box; box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .35); cursor: pointer; transition: background .35s, color .35s; }
:root[data-lib="3"] .lb__arrow[data-d="-1"] { left: calc(569 * var(--u)); } :root[data-lib="3"] .lb__arrow[data-d="1"] { left: calc(1029 * var(--u)); }
:root[data-lib="3"] .lb__arrow:is(:hover, :focus-visible) { background: var(--g-btn) padding-box, var(--g-line) border-box; color: var(--g-ink); }
.lb__arrow svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root[data-lib="3"] .lb__feat li { transition: left .7s cubic-bezier(.22, 1, .36, 1), top .7s cubic-bezier(.22, 1, .36, 1), width .7s cubic-bezier(.22, 1, .36, 1), height .7s cubic-bezier(.22, 1, .36, 1), opacity .5s, filter .5s; }
:root[data-lib="3"] .lb__feat li[data-o="0"] { --x: 657; --y: 357; --w: 346; --h: 335; z-index: 4; }
:root[data-lib="3"] .lb__feat li[data-o="-1"] { --x: 428; --y: 400; --w: 222; --h: 280; z-index: 3; }
:root[data-lib="3"] .lb__feat li[data-o="1"] { --x: 1013; --y: 400; --w: 217; --h: 280; z-index: 3; }
:root[data-lib="3"] .lb__feat li[data-o="-2"] { --x: 250; --y: 432; --w: 168; --h: 230; z-index: 2; }
:root[data-lib="3"] .lb__feat li[data-o="2"] { --x: 1240; --y: 432; --w: 170; --h: 230; z-index: 2; }
:root[data-lib="3"] .lb__feat li[data-o="-3"] { --x: 80; --y: 455; --w: 162; --h: 205; z-index: 1; }
:root[data-lib="3"] .lb__feat li[data-o="3"] { --x: 1418; --y: 460; --w: 137; --h: 200; z-index: 1; }
:root[data-lib="3"] .lb__feat li[data-o="x"] { --x: 760; --y: 520; --w: 140; --h: 140; opacity: 0; pointer-events: none; }
:root[data-lib="3"] .lb__feat .lb__item { border: 2px solid #C9A574; border-radius: 50% 50% calc(9 * var(--u)) calc(9 * var(--u)) / calc(70 * var(--u)) calc(70 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)); }
:root[data-lib="3"] .lb__feat li:not([data-o="0"]) .lb__item img { filter: brightness(.86); }
:root[data-lib="3"] .lb__feat li[data-o="0"] .lb__item { box-shadow: 0 0 calc(34 * var(--u)) rgba(233, 211, 166, .5), 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .5); }
:root[data-lib="3"] .lb__feat :is(.lb__item > span, .lb__ico), :root[data-lib="3"] .lb__feat .lb__item::after { display: none; }
:root[data-lib="3"] .lb__play { left: calc(26 * var(--u)); top: auto; bottom: calc(18 * var(--u)); width: auto; height: calc(34 * var(--u)); translate: none; padding: 0 calc(12 * var(--u)) 0 calc(38 * var(--u)); border: 0; border-radius: 0; background: none; backdrop-filter: none; }
:root[data-lib="3"] .lb__play::before { position: absolute; left: 0; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin: 0; border-radius: 50%; border: 1px solid transparent; background: var(--g-navy) padding-box, var(--g-line) border-box; clip-path: none; }
:root[data-lib="3"] .lb__play::after { content: ""; position: absolute; left: calc(12 * var(--u)); width: calc(10 * var(--u)); height: calc(12 * var(--u)); background: var(--g-btn); clip-path: polygon(0 0, 100% 50%, 0 100%); }
:root[data-lib="3"] .lb__play em { position: static; font-size: calc(15 * var(--u)); font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
:root[data-lib="3"] .lb__360 { right: auto; left: calc(16 * var(--u)); bottom: calc(14 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); font-size: calc(15 * var(--u)); border-radius: 50%; }

/* ===== toàn bộ thư viện ===== */
.lb-all { padding: 72px max(24px, 5vw) 120px; background: linear-gradient(#0E1A2E, #0E1A2E 40%, #0E1A2E); }
.lb-all h2 { margin: 0 0 28px; font: italic 500 clamp(34px, 3.4vw, 52px) / 1.1 "Playfair Display", serif; color: #F3E6D0; }
.lb-all__n { font: 400 .42em / 1 "Be Vietnam Pro", sans-serif; font-style: normal; letter-spacing: .08em; color: #9AA6B8; vertical-align: middle; }
.lb-all__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.lb-all__grid li { aspect-ratio: 4 / 3; }
.lb-all__grid li[hidden] { display: none; }
.lb-all .lb__item { border: 1px solid rgba(233, 211, 166, .5); border-radius: 12px; }
.lb-all .lb__item:is(:hover, :focus-visible) { border-color: rgba(233, 211, 166, .9); }
.lb-all .lb__item > span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 11px; font: 500 16px / 1.25 "Lora V", serif; color: #F3E6D0; text-align: left; background: linear-gradient(transparent, rgba(14, 26, 46, .85)); }
.lb-all .lb__play { --u: .75px; }
.lb-all .lb__360 { --u: .7px; top: 10px; bottom: auto; right: 10px; }

/* ===== hộp xem ảnh / phim ===== */
.lb-box { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: radial-gradient(70% 60% at 50% 45%, rgba(20, 34, 58, .55), transparent 70%), rgba(14, 26, 46, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #E9EDF2; overscroll-behavior: contain; }
.lb-box::backdrop { background: transparent; }
.lb-box[open] { display: grid; place-items: center; animation: lb-fade .35s ease-out; }
@keyframes lb-fade { from { opacity: 0; } }
.lb-box img[hidden], .lb-box video[hidden] { display: none; }
.lb-box figure { display: grid; justify-items: center; gap: 16px; margin: 0; }
.lb-box :is(img, video) { display: block; max-width: min(90vw, 1500px); max-height: calc(100vh - 190px); border: 1px solid transparent; border-radius: 6px; background: var(--g-line) border-box; box-shadow: 0 24px 70px rgba(0, 0, 0, .65); }
.lb-box figcaption { font: italic 400 19px / 1.3 "Lora V", serif; letter-spacing: .02em; color: #E9EDF2; }
.lb-box button { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--g-champ); cursor: pointer; }
.lb-box svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-box .lb-box__x { position: fixed; right: 26px; top: 22px; gap: 10px; height: 42px; padding: 0 18px 0 20px; border: 1px solid transparent; border-radius: 99px;
  background: var(--g-navy) padding-box, var(--g-line) border-box; font: 500 12.5px / 1 "Lora V", serif; letter-spacing: .2em; text-transform: uppercase; transition: color .3s; }
.lb-box__x svg { width: 13px; height: 13px; }
.lb-box__bar { position: fixed; left: 50%; bottom: 26px; translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid transparent; border-radius: 99px;
  background: var(--g-navy) padding-box, var(--g-line) border-box; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.lb-box .lb-box__nav { width: 40px; height: 40px; border-radius: 50%; transition: background .35s, color .35s; }
.lb-box__nav svg { width: 17px; height: 17px; }
.lb-box .lb-box__x:is(:hover, :focus-visible) { color: #F3E6D0; }
.lb-box .lb-box__nav:is(:hover, :focus-visible) { background: var(--g-btn); color: var(--g-ink); }
.lb-box__n { min-width: 76px; text-align: center; font: 500 14px / 1 "Lora V", serif; letter-spacing: .16em; color: #E9EDF2; font-variant-numeric: lining-nums tabular-nums; }
.lb-box.is-film .lb-box__bar { display: none; }

/* ===== điện thoại — lib-m.jpg (mọi kiểu chung 1 bố cục): --v = 100vw/390 ===== */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .lb { --v: calc(100vw / 390); --u: var(--v); height: calc(850 * var(--v)); min-height: 0; }
  .lb__plate, :root[data-lib] .lb__plate { background: url(assets/lib/plate-m.webp) 50% 0 / 100% auto no-repeat, #0E1A2E; }
  .lb__stage { left: 0; top: 0; width: 100%; height: 100%; translate: none; }
  :root[data-lib] .lb__kicker { display: block; --fk: 12; left: calc(27 * var(--v)); top: calc(86 * var(--v)); letter-spacing: .26em; }
  :root[data-lib] .lb__kicker::after { content: ""; position: absolute; left: calc(150 * var(--v)); top: 50%; width: calc(68 * var(--v)); border-top: 1px solid rgba(233, 211, 166, .7); }
  :root[data-lib] :is(.lb__kicker3, .lb__caps, .lb__sub, .lb__note, .lb__arrow, .lb__line) { display: none; }
  :root[data-lib] .lb__it { --ft: 64; left: calc(20 * var(--v)); top: calc(118 * var(--v)); }
  .lb__logo { display: block; left: calc(25 * var(--v)); top: calc(29 * var(--v)); width: calc(148 * var(--v)); filter: brightness(.95) saturate(1.2); } /* menu điện thoại chỉ có ☰ → logo theo mockup đặt trong màn đầu */
  :root[data-lib] .lb__filters { left: calc(18 * var(--v)); top: calc(198 * var(--v)); width: calc(280 * var(--v)); height: calc(36 * var(--v)); padding: calc(3 * var(--v)); --fp: 10; --fpad: 4; }
  :root[data-lib] .lb__filters::before { top: calc(3 * var(--v)); bottom: calc(3 * var(--v)); }
  :root[data-lib] .lb__filters button { letter-spacing: .1em; }
  :root[data-lib] .lb__feat li { transition: opacity .45s, filter .45s; }
  :root[data-lib] .lb__feat li:nth-child(1) { --x: 11; --y: 245; --w: 181; --h: 115; }
  :root[data-lib] .lb__feat li:nth-child(2) { --x: 198; --y: 245; --w: 181; --h: 117; }
  :root[data-lib] .lb__feat li:nth-child(3) { --x: 11; --y: 368; --w: 181; --h: 130; }
  :root[data-lib] .lb__feat li:nth-child(4) { --x: 198; --y: 371; --w: 181; --h: 144; }
  :root[data-lib] .lb__feat li:nth-child(5) { --x: 11; --y: 506; --w: 181; --h: 160; }
  :root[data-lib] .lb__feat li:nth-child(6) { --x: 198; --y: 520; --w: 181; --h: 146; }
  :root[data-lib] .lb__feat li:nth-child(7) { --x: 11; --y: 675; --w: 368; --h: 160; }
  :root[data-lib] .lb__feat li::before { content: none; }
  :root[data-lib] .lb__feat .lb__item { padding: 0; border: 1.2px solid rgba(233, 211, 166, .85); border-radius: calc(10 * var(--v)); background: none; box-shadow: 0 calc(8 * var(--v)) calc(20 * var(--v)) rgba(0, 0, 0, .4); }
  :root[data-lib] .lb__feat li .lb__item img { filter: none; outline: 0; }
  :root[data-lib] .lb__feat :is(.lb__item > span, .lb__ico), :root[data-lib] .lb__feat .lb__item::after { display: none; }
  :root[data-lib] .lb__play { left: 50%; top: 50%; bottom: auto; width: calc(40 * var(--v)); height: calc(40 * var(--v)); padding: 0; translate: -50% -50%; border-radius: 50%; border: 1px solid transparent; background: var(--g-navy) padding-box, var(--g-line) border-box; }
  :root[data-lib] .lb__play::before { position: static; width: calc(13 * var(--v)); height: calc(15 * var(--v)); margin: 0 0 0 calc(3 * var(--v)); border: 0; border-radius: 0; background: var(--g-btn); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  :root[data-lib] .lb__play::after { content: none; }
  :root[data-lib] .lb__play em { position: absolute; left: calc(56 * var(--v)); top: calc(60 * var(--v)); bottom: auto; padding: calc(3 * var(--v)) calc(6 * var(--v)); border-radius: 99px; border: 1px solid transparent; background: var(--g-navy) padding-box, var(--g-line) border-box; font: 500 calc(10.5 * var(--v)) / 1 "Lora V", serif; color: #F3E6D0; white-space: nowrap; }
  :root[data-lib] .lb__360 { left: calc(10 * var(--v)); right: auto; bottom: calc(10 * var(--v)); width: calc(52 * var(--v)); height: calc(32 * var(--v)); border-radius: 99px; font-size: calc(13 * var(--v)); padding-bottom: calc(5 * var(--v)); }
  :root[data-lib] .lb__360::after { bottom: calc(5 * var(--v)); height: calc(5 * var(--v)); }
  .lb-all { padding: 48px 11px 110px; }
  .lb-all__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lb-all .lb__item > span { padding: 22px 9px 8px; font-size: 12.5px; }
  .lb-box .lb-box__x { right: 14px; top: 14px; height: 38px; } .lb-box__bar { bottom: 18px; } .lb-box :is(img, video) { max-width: 94vw; max-height: calc(100vh - 170px); }
}
@media (prefers-reduced-motion: reduce) { .lb__feat li, .lb-box[open] { animation: none; } .lb__feat li, .lb__item, .lb__item img { transition: none; } }

/* ======================================================================================================================
   [db8dd01c] Trang riêng Tin tức (tin-tuc.html) — Ken 28/10: vòm kem cũ lệch màu → Codex mockup lại news2-v1|v2|v3.jpg theo ngôn ngữ trang chủ
   («Navy nhung & vàng ánh kim», biến --g-*). Ken giữ cả 3: ?news=3 = v3 «tạp chí» (mặc định), 1 = v1 «khung kính + 3 dòng», 2 = v2 «3 thẻ + dải đối tác».
   Toạ độ: design/mockups/nav/news2-inventory.md. Bài THẬT từ site gốc (scripts/build_news.py): tiêu đề / tóm tắt dài hơn chữ mockup → kẹp số dòng (line-clamp), không tràn khung. ====================================================== */
/* Ken 28/10 «font to đến mức thô thiển, mọi thứ to quá đáng»: khung 1672 phóng theo cả màn → thu còn 80% (--k), đặt giữa màn; nền vẫn tràn */
.nw { --k: .8; --u: calc(min(100vw / 1672, 100vh / 941) * var(--k)); }
.nw__stage { top: calc((100vh - 941 * var(--u)) / 2); }
:root[data-news="1"] .nw__plate { background-image: url(assets/news/plate2-1.jpg); }
:root[data-news="2"] .nw__plate { background-image: url(assets/news/plate2-2.jpg); }
:root[data-news="3"] .nw__plate { background-image: url(assets/news/plate2-3.jpg); }
.nw__kicker { z-index: 1; display: flex; align-items: center; gap: calc(var(--kg, 14) * var(--u)); font: 400 calc(var(--fk, 15) * var(--u)) / 1 "Lora V", serif; letter-spacing: .3em; text-transform: uppercase; color: #E9EDF2; white-space: nowrap; }
.nw__kicker::after { content: ""; width: calc(var(--kl, 70) * var(--u)); border-top: 1px solid rgba(233, 211, 166, .7); }
.nw__title { z-index: 1; font-style: normal; } /* mockup news2: Lora ĐỨNG (khác tiêu đề nghiêng Thư viện) */
.nw__lead { width: calc(520 * var(--u)); font: 400 calc(18 * var(--u)) / calc(25 * var(--u)) "Lora V", serif; color: #E9EDF2; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
:is(.nw__logo, .nw__glass, .nw__panel, .nw__band, .nw__lead) { display: none; }
/* tấm kính navy + viền vàng ánh kim: viền vẽ ở ::before (mask cắt lõi) → nền kính KHÔNG ánh vàng xuyên qua */
:is(.nw__panel, .nw__post)::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; background: var(--g-line); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.nw__post::before { content: none; }
.nw__panel { background: linear-gradient(170deg, rgba(14, 26, 46, .9), rgba(14, 26, 46, .94)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, .45); }

.nw__feat { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; counter-reset: nw -1; }
.nw__feat li { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); pointer-events: auto; counter-increment: nw;
  animation: lb-in .9s cubic-bezier(.22, 1, .36, 1) calc(.25s + var(--i, 0) * 90ms) backwards; }
.nw__post { position: relative; height: 100%; margin: 0; cursor: pointer; }
.nw__post > * { position: absolute; margin: 0; }
.nw__post img { left: 0; top: 0; width: calc(var(--iw) * var(--u)); height: 100%; object-fit: cover; border-radius: calc(10 * var(--u)); transition: filter .4s; }
.nw__post:is(:hover, :focus-within) img { filter: brightness(1.08) saturate(1.05); }
.nw__meta { display: flex; align-items: center; gap: calc(22 * var(--u)); white-space: nowrap; }
.nw__meta time { font: 400 calc(var(--fd, 15) * var(--u)) / 1 "Be Vietnam Pro", sans-serif; color: #B4BFCE; }
.nw__tag { display: inline-grid; place-items: center; height: calc(var(--th, 31) * var(--u)); padding: 0 calc(var(--tp, 18) * var(--u)); border: 1px solid #B8935E; border-radius: calc(var(--tr, 6) * var(--u));
  font: 400 calc(var(--ftg, 15) * var(--u)) / 1 "Be Vietnam Pro", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #E9EDF2; background: rgba(14, 26, 46, .35); }
.nw__post h2 { font-weight: 400; color: #F3E6D0; transition: color .3s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--cl, 2); overflow: hidden; text-wrap: pretty; }
.nw__post:is(:hover, :focus-within) h2 { color: #FFFFFF; }
.nw__ex { color: #B4BFCE; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--cle, 2); overflow: hidden; }
/* «Đọc tiếp →»: chữ + gạch chân vàng ánh kim, mũi tên mảnh trượt khi rê */
.nw__read { display: inline-flex; align-items: center; gap: .75em; text-decoration: none; padding: 0 0 calc(var(--rp, 10) * var(--u)); border: 0; cursor: pointer; white-space: nowrap;
  font: 400 calc(var(--fr, 17) * var(--u)) / 1 "Be Vietnam Pro", sans-serif; color: #E9EDF2; background: linear-gradient(90deg, #E8826A, #E8826A 70%, rgba(232, 130, 106, .2)) 0 100% / 100% 1px no-repeat; }
:is(.nw__read, .nw__more)::after { content: ""; width: 1.15em; height: .75em; background: currentColor; transition: translate .35s cubic-bezier(.22, 1, .36, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 15' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7.5h20M15 1.5l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 15' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7.5h20M15 1.5l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.nw__post:is(:hover, :focus-within) .nw__read::after, .nw__more:is(:hover, :focus-visible)::after { translate: .3em 0; }
.nw__read:focus-visible, .nw__more:focus-visible { outline: 1px solid #E8826A; outline-offset: 4px; }
/* nút chính duy nhất được đổ vàng kim (như «Gửi yêu cầu» ở Form trang chủ) */
.nw__more { z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .6em; border-radius: calc(var(--mr, 12) * var(--u)); border: 1.5px solid rgba(233, 211, 166, .8); background: rgba(14, 26, 46, .55); color: #F3E6D0; text-decoration: none; /* sapphire: viên viền champagne, không đổ đặc (mockup sap-n1/nm) */
  font: 500 calc(var(--fm, 16) * var(--u)) / 1 "Lora V", serif; transition: background .3s, border-color .3s; }
.nw__more:hover { background: rgba(233, 211, 166, .12); border-color: #E9D3A6; }

/* ===== v3 (mặc định) — «Xanh sapphire» (Ken chọn 28/10 từ 3 mockup Codex): design/mockups/theme/sapphire.jpg, bảng design/mockups/theme/sapphire-inventory.md hàng S1–S15.
   Nền = ảnh THẬT assets/news/aerial.webp (phối cảnh dự án bên biển) RÕ ở nửa trên, chuyển mượt sang xanh đêm sâu — không phủ xám. ===== */
@media (min-width: 1101px), (min-width: 761px) and (orientation: landscape) {
  :root[data-news="3"] .nw { --k: 1; background: #0A1220; }
  :root[data-news="3"] .nw__stage { top: 0; }
  :root[data-news="3"] .nw__plate { background: linear-gradient(rgba(14, 26, 46, 0) calc(250 * var(--u)), rgba(14, 26, 46, .45) calc(360 * var(--u)), #0E1A2E calc(455 * var(--u)), #0A1220 100%),
    url(assets/news/aerial.webp) 50% calc(-170 * var(--u)) / calc(1672 * var(--u)) auto no-repeat, #0A1220; } /* S1–S2 — ảnh theo sân khấu (--u) như chữ/thẻ; Ken 29/10: theo 100vw thì màn rộng hơn 16:9 ảnh bị phóng + cắt dải giữa sau tiêu đề */
  @media (min-aspect-ratio: 1673 / 941) { /* màn rộng: 2 bên ngoài sân khấu tan vào nền, không mép cứng */
    :root[data-news="3"] .nw__plate::before { content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(90deg, #0A1220 calc(50% - 836 * var(--u)), rgba(10, 18, 32, 0) calc(50% - 680 * var(--u)), rgba(10, 18, 32, 0) calc(50% + 680 * var(--u)), #0A1220 calc(50% + 836 * var(--u))); } }
  :root[data-news="3"] .nw__kicker { --fk: 15; left: calc(70 * var(--u)); top: calc(297 * var(--u)); gap: calc(18 * var(--u)); font-family: "Be Vietnam Pro", sans-serif; letter-spacing: .2em; color: #D6DAE0; } /* S3 */
  :root[data-news="3"] .nw__kicker::before { content: ""; order: -1; width: calc(4 * var(--u)); height: calc(22 * var(--u)); background: #E8826A; }
  :root[data-news="3"] .nw__kicker::after { display: none; }
  :root[data-news="3"] .nw__title { --ft: 86; left: calc(71 * var(--u)); top: calc(315 * var(--u)); font-weight: 400; background: none; color: #F3E6D0; filter: none; } /* S4 */
  :root[data-news="3"] .nw__title::after { content: ""; position: absolute; left: calc(-1 * var(--u)); top: calc(99 * var(--u)); width: calc(50 * var(--u)); height: 2px; background: #E8826A; } /* S5 */
  /* S6–S14 thay theo mockup design/mockups/theme/feat/f1.png (Ken 29/10 chọn «ảnh 16:9 + chữ cạnh»): khung cũ 868×342 dẹt 2,5:1 → ảnh 16:9 thừa 2 dải mờ */
  :root[data-news="3"] .nw__feat li:nth-child(1) { --x: 61; --y: 465; --w: 1074; --h: 428; --iw: 662; }
  :root[data-news="3"] .nw__feat li:nth-child(1)::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(233, 211, 166, .32); border-radius: calc(14 * var(--u));
    background: linear-gradient(160deg, rgba(20, 38, 66, .78), rgba(12, 22, 40, .86)); box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .35); } /* thẻ kính */
  :root[data-news="3"] .nw__feat li:nth-child(1) img { left: calc(17 * var(--u)); top: calc(13 * var(--u)); height: calc(400 * var(--u)); }
  :root[data-news="3"] .nw__feat li img { border-radius: calc(10 * var(--u)); }
  :root[data-news="3"] .nw__feat li:nth-child(1) :is(.nw__meta, h2, .nw__ex, .nw__read) { left: calc(709 * var(--u)); }
  :root[data-news="3"] .nw__feat li:nth-child(1) .nw__meta { top: calc(32 * var(--u)); gap: calc(13 * var(--u)); --fd: 15; }
  :root[data-news="3"] .nw__feat .nw__tag { height: auto; padding: 0; border: 0; background: none; font-size: calc(15 * var(--u)); letter-spacing: .06em; color: #E9D3A6; }
  :root[data-news="3"] .nw__feat .nw__meta time { color: #9AA6B8; }
  :root[data-news="3"] .nw__feat li time { padding-left: calc(16 * var(--u)); border-left: 1px solid rgba(154, 166, 184, .5); }
  :root[data-news="3"] .nw__feat li:nth-child(1) h2 { top: calc(62 * var(--u)); width: calc(345 * var(--u)); font: 500 calc(37 * var(--u)) / calc(43 * var(--u)) "Lora V", serif; --cl: 3; }
  :root[data-news="3"] .nw__feat li:nth-child(1) .nw__ex { display: -webkit-box; top: calc(207 * var(--u)); width: calc(345 * var(--u)); font: 400 calc(16.5 * var(--u)) / calc(26 * var(--u)) "Be Vietnam Pro", sans-serif; --cle: 4; }
  :root[data-news="3"] .nw__feat li:nth-child(1) .nw__read { top: calc(338 * var(--u)); --fr: 17; --rp: 8; color: #E9EDF2; background: linear-gradient(#E8826A, #E8826A) 0 100% / 100% 2px no-repeat; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__ex, :root[data-news="3"] .nw__feat li:nth-child(n + 2) :is(.nw__tag, .nw__read) { display: none; }
  :root[data-news="3"] .nw__post h2 { color: #F4EEE4; }
  :root[data-news="3"] .nw__post:is(:hover, :focus-within) h2 { color: #fff; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) { --x: 1194; --w: 452; --iw: 148; --h: 104; }
  :root[data-news="3"] .nw__feat li:nth-child(2) { --y: 480; } :root[data-news="3"] .nw__feat li:nth-child(3) { --y: 603; } :root[data-news="3"] .nw__feat li:nth-child(4) { --y: 726; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) img { border-radius: calc(10 * var(--u)); }
  :root[data-news="3"] .nw__feat li:nth-child(2)::before, :root[data-news="3"] .nw__feat li:nth-child(3)::before { content: ""; position: absolute; left: calc(165 * var(--u)); right: calc(6 * var(--u)); top: calc(113 * var(--u)); border-top: 1px solid rgba(150, 165, 190, .3); } /* kẻ y 593 / 716 */
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__post::after { content: counter(nw, decimal-leading-zero); position: absolute; left: calc(170 * var(--u)); top: calc(3 * var(--u));
    font: 400 calc(34 * var(--u)) / 1 "Lora V", serif; font-variant-numeric: lining-nums; color: #E9C99A; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__meta { left: calc(219 * var(--u)); top: calc(12 * var(--u)); --fd: 13.5; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) h2 { left: calc(172 * var(--u)); top: calc(44 * var(--u)); width: calc(240 * var(--u)); font: 400 calc(18 * var(--u)) / calc(22.5 * var(--u)) "Lora V", serif; --cl: 3; }
  :root[data-news="3"] .nw__more { left: calc(1282 * var(--u)); top: calc(849 * var(--u)); width: calc(233 * var(--u)); height: calc(43 * var(--u)); --mr: 99; --fm: 17; font-weight: 400;
    border: 1.5px solid rgba(233, 211, 166, .75); background: none; color: #F3E6D0; box-shadow: none; transition: background .3s, border-color .3s; } /* S15 */
  :root[data-news="3"] .nw__more::after { width: .9em; }
  :root[data-news="3"] .nw__more:hover { filter: none; background: rgba(233, 211, 166, .1); border-color: #E9D3A6; }
}
/* điện thoại: bố cục news2-m (navy) cũ — đổi bảng màu sau */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  :root[data-news="3"] .nw__glass { display: block; left: calc(37 * var(--u)); top: calc(591 * var(--u)); width: calc(973 * var(--u)); height: calc(302 * var(--u)); border: 1px solid #B8935E; border-radius: calc(20 * var(--u));
    background: linear-gradient(90deg, rgba(14, 26, 46, .9), rgba(14, 26, 46, .78) 50%, rgba(14, 26, 46, .2)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    -webkit-mask: linear-gradient(90deg, #000 52%, transparent 96%); mask: linear-gradient(90deg, #000 52%, transparent 96%); } /* mockup: kính + viền tan dần sang phải, không có mép phải */
  :root[data-news="3"] .nw__panel { display: block; left: calc(1026 * var(--u)); top: calc(106 * var(--u)); width: calc(630 * var(--u)); height: calc(811 * var(--u)); border-radius: calc(22 * var(--u)); }
  :root[data-news="3"] .nw__kicker { --fk: 16; --kl: 80; --kg: 12; left: calc(78 * var(--u)); top: calc(626 * var(--u)); font-family: "Be Vietnam Pro", sans-serif; letter-spacing: .2em; }
  :root[data-news="3"] .nw__title { --ft: 92; left: calc(75 * var(--u)); top: calc(652 * var(--u)); }
  :root[data-news="3"] .nw__feat li:nth-child(1) { --x: 37; --y: 591; --w: 973; --h: 302; }
  :root[data-news="3"] .nw__feat li:nth-child(1) img { display: none; } /* ảnh bài = chính nền tràn màn */
  :root[data-news="3"] .nw__feat li:nth-child(1) .nw__meta { left: calc(250 * var(--u)); top: calc(33 * var(--u)); --th: 32; --tp: 15; --ftg: 14; --fd: 14; }
  :root[data-news="3"] .nw__feat li:nth-child(1) h2 { left: calc(40 * var(--u)); top: calc(150 * var(--u)); width: calc(860 * var(--u)); font: 400 calc(30 * var(--u)) / 1.25 "Lora V", serif; }
  :root[data-news="3"] .nw__feat li:nth-child(1) .nw__read { left: calc(41 * var(--u)); top: calc(246 * var(--u)); --fr: 16; --rp: 10; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) { --x: 1050; --w: 582; --iw: 308; }
  :root[data-news="3"] .nw__feat li:nth-child(2) { --y: 141; --h: 198; }
  :root[data-news="3"] .nw__feat li:nth-child(3) { --y: 381; --h: 195; }
  :root[data-news="3"] .nw__feat li:nth-child(4) { --y: 615; --h: 193; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 3)::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-27 * var(--u)); border-top: 1px solid rgba(233, 211, 166, .4); } /* vạch ngăn y 354 / 591 */
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__post::after { content: counter(nw, decimal-leading-zero); position: absolute; left: calc(328 * var(--u)); top: calc(2 * var(--u));
    font: 600 calc(60 * var(--u)) / 1 "Lora V", serif; font-variant-numeric: lining-nums; background: linear-gradient(180deg, #FFFFFF 18%, #E9EDF2 55%, #C9A574 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__tag, :root[data-news="3"] .nw__feat .nw__ex { display: none; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__meta { right: calc(28 * var(--u)); top: calc(26 * var(--u)); --fd: 13.5; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) h2 { left: calc(330 * var(--u)); top: calc(66 * var(--u)); width: calc(240 * var(--u)); font: 400 calc(18 * var(--u)) / calc(24 * var(--u)) "Lora V", serif; --cl: 3; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__read { left: calc(332 * var(--u)); top: calc(160 * var(--u)); --rp: 10; --fr: 15; }
  :root[data-news="3"] .nw__more { left: calc(1050 * var(--u)); top: calc(836 * var(--u)); width: calc(582 * var(--u)); height: calc(52 * var(--u)); --fm: 19; }
}

/* ===== v1 «Khung kính + 3 dòng» — news2-v1.jpg ===== */
:root[data-news="1"] .nw__kicker { --fk: 15; --kl: 66; --kg: 18; left: calc(112 * var(--u)); top: calc(124 * var(--u)); font-family: "Be Vietnam Pro", sans-serif; letter-spacing: .5em; }
:root[data-news="1"] .nw__kicker::before { content: ""; width: calc(66 * var(--u)); border-top: 1px solid rgba(233, 211, 166, .7); }
:root[data-news="1"] .nw__title { --ft: 96; left: calc(109 * var(--u)); top: calc(140 * var(--u)); }
:root[data-news="1"] .nw__glass { display: block; left: calc(112 * var(--u)); top: calc(248 * var(--u)); width: calc(400 * var(--u)); height: 2px;
  background: linear-gradient(90deg, rgba(232, 130, 106, .2), #FFFFFF 45%, rgba(232, 130, 106, 0)); box-shadow: 0 0 calc(10 * var(--u)) rgba(233, 211, 166, .8); } /* vạch sáng dưới «Tin tức» */
:root[data-news="1"] .nw__panel { display: block; left: calc(983 * var(--u)); top: calc(278 * var(--u)); width: calc(607 * var(--u)); height: calc(619 * var(--u)); border-radius: calc(24 * var(--u)); }
:root[data-news="1"] .nw__feat li:nth-child(1) { --x: 82; --y: 275; --w: 881; --h: 622; --iw: 881; }
:root[data-news="1"] .nw__feat li:nth-child(1) .nw__post { overflow: hidden; border-radius: calc(70 * var(--u)); box-shadow: 0 calc(20 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, .5), 0 0 calc(18 * var(--u)) rgba(233, 211, 166, .45); }
:root[data-news="1"] .nw__feat li:nth-child(1) .nw__post::before { content: ""; z-index: 2; padding: calc(3 * var(--u)); background: linear-gradient(135deg, #FFFFFF, #E8826A 35%, #E8826A 60%, #B8935E); } /* khung vàng ánh kim dày phát sáng */
:root[data-news="1"] .nw__feat li:nth-child(1) .nw__post::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(14, 26, 46, .82) 45%, rgba(14, 26, 46, .95)); }
:root[data-news="1"] .nw__feat li:nth-child(1) img { height: auto; max-height: 100%; border-radius: 0; } /* ảnh bài gốc = banner 16:9 có chữ in sẵn → giữ trọn khổ ở trên, không cắt 2 bên */
:root[data-news="1"] .nw__feat li:nth-child(1) .nw__post { background: #0E1A2E; }
:root[data-news="1"] .nw__feat li:nth-child(1) :is(.nw__meta, h2, .nw__ex, .nw__read) { z-index: 1; }
:root[data-news="1"] .nw__feat li:nth-child(1) .nw__meta { left: calc(42 * var(--u)); top: calc(318 * var(--u)); --th: 31; --tp: 16; }
:root[data-news="1"] .nw__feat li:nth-child(1) .nw__meta time::before { content: "|"; margin-right: calc(16 * var(--u)); opacity: .7; }
:root[data-news="1"] .nw__feat li:nth-child(1) h2 { left: calc(40 * var(--u)); top: calc(368 * var(--u)); width: calc(780 * var(--u)); font: 500 calc(34 * var(--u)) / 1.22 "Lora V", serif; color: #F3E6D0; }
:root[data-news="1"] .nw__feat li:nth-child(1) .nw__ex { left: calc(42 * var(--u)); top: calc(472 * var(--u)); width: calc(760 * var(--u)); font: 400 calc(16 * var(--u)) / calc(24 * var(--u)) "Be Vietnam Pro", sans-serif; }
:root[data-news="1"] .nw__feat li:nth-child(1) .nw__read { left: calc(44 * var(--u)); top: calc(558 * var(--u)); --fr: 17; --rp: 9; font-family: "Lora V", serif; font-weight: 500; color: #E9EDF2; }
:root[data-news="1"] .nw__feat li:nth-child(n + 2) { --x: 1015; --w: 545; --iw: 207; }
:root[data-news="1"] .nw__feat li:nth-child(2) { --y: 306; --h: 153; }
:root[data-news="1"] .nw__feat li:nth-child(3) { --y: 491; --h: 147; }
:root[data-news="1"] .nw__feat li:nth-child(4) { --y: 667; --h: 152; }
:root[data-news="1"] .nw__feat li:nth-child(n + 3)::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-15 * var(--u)); border-top: 1px solid rgba(233, 211, 166, .4); }
:root[data-news="1"] .nw__feat li:nth-child(n + 2) .nw__tag { display: none; }
:root[data-news="1"] .nw__feat li:nth-child(n + 2) .nw__meta { left: calc(229 * var(--u)); top: calc(4 * var(--u)); --fd: 13.5; }
:root[data-news="1"] .nw__feat li:nth-child(n + 2) h2 { left: calc(229 * var(--u)); top: calc(26 * var(--u)); width: calc(305 * var(--u)); font: 500 calc(17 * var(--u)) / calc(22 * var(--u)) "Lora V", serif; color: #F3E6D0; }
:root[data-news="1"] .nw__feat li:nth-child(n + 2) .nw__ex { left: calc(229 * var(--u)); top: calc(78 * var(--u)); width: calc(305 * var(--u)); font: 400 calc(13.5 * var(--u)) / calc(19 * var(--u)) "Be Vietnam Pro", sans-serif; }
:root[data-news="1"] .nw__feat li:nth-child(n + 2) .nw__read { left: calc(229 * var(--u)); top: calc(130 * var(--u)); --fr: 14; --rp: 6; font-family: "Lora V", serif; font-weight: 500; color: #E9EDF2; }
:root[data-news="1"] .nw__more { left: calc(1140 * var(--u)); top: calc(845 * var(--u)); width: calc(298 * var(--u)); height: calc(39 * var(--u)); --mr: 10; font-family: "Be Vietnam Pro", sans-serif; }

/* ===== v2 «3 thẻ kính + dải đối tác» — news2-v2.jpg ===== */
:root[data-news="2"] .nw__kicker { --fk: 14; --kl: 45; --kg: 18; left: calc(126 * var(--u)); top: calc(114 * var(--u)); letter-spacing: .44em; }
:root[data-news="2"] .nw__title { --ft: 76; left: calc(120 * var(--u)); top: calc(136 * var(--u)); }
:root[data-news="2"] .nw__lead { display: block; left: calc(126 * var(--u)); top: calc(222 * var(--u)); width: calc(480 * var(--u)); font-size: calc(15.5 * var(--u)); }
:root[data-news="2"] .nw__feat li:nth-child(1) { --x: 182; --w: 431; }
:root[data-news="2"] .nw__feat li:nth-child(2) { --x: 627; --w: 418; }
:root[data-news="2"] .nw__feat li:nth-child(3) { --x: 1060; --w: 431; }
:root[data-news="2"] .nw__feat li:nth-child(-n + 3) { --y: 302; --h: 486; }
:root[data-news="2"] .nw__feat li:nth-child(4) { display: none; }
:root[data-news="2"] .nw__feat .nw__post { display: flex; flex-direction: column; align-items: flex-start; padding: 0 calc(30 * var(--u)) calc(11 * var(--u)); border-radius: calc(14 * var(--u)); overflow: hidden;
  background: linear-gradient(170deg, rgba(14, 26, 46, .9), rgba(14, 26, 46, .94)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .45);
  transition: translate .45s cubic-bezier(.22, 1, .36, 1); }
:root[data-news="2"] .nw__feat .nw__post::before { content: ""; }
:root[data-news="2"] .nw__feat .nw__post:is(:hover, :focus-within) { translate: 0 calc(-4 * var(--u)); }
:root[data-news="2"] .nw__feat .nw__post > * { position: static; }
:root[data-news="2"] .nw__feat .nw__post img { flex: none; width: calc(100% + 60 * var(--u)); max-width: none; height: calc(228 * var(--u)); margin: 0 calc(-30 * var(--u)); border-radius: 0; }
:root[data-news="2"] .nw__feat .nw__meta { align-self: stretch; margin: calc(15 * var(--u)) 0 0 calc(-4 * var(--u)); gap: calc(29 * var(--u)); --th: 26; --tp: 11; --tr: 99; --ftg: 11; --fd: 12.5; }
:root[data-news="2"] .nw__feat .nw__meta::after { content: ""; order: 1; width: calc(88 * var(--u)); border-top: 1px solid rgba(233, 211, 166, .55); }
:root[data-news="2"] .nw__feat .nw__tag { font-family: "Lora V", serif; letter-spacing: .1em; }
:root[data-news="2"] .nw__feat .nw__meta time { order: 2; margin-left: auto; font-family: "Lora V", serif; letter-spacing: .12em; }
:root[data-news="2"] .nw__feat .nw__post h2 { margin-top: calc(11 * var(--u)); font: 500 calc(21 * var(--u)) / calc(27 * var(--u)) "Lora V", serif; color: #F3E6D0; --cl: 3; }
:root[data-news="2"] .nw__feat .nw__ex { --cle: 3; margin-top: calc(10 * var(--u)); font: 400 calc(15 * var(--u)) / calc(21 * var(--u)) "Lora V", serif; }
:root[data-news="2"] .nw__feat .nw__read { margin-top: auto; --fr: 15; --rp: 6; font-family: "Lora V", serif; }
:root[data-news="2"] .nw__more { left: calc(710 * var(--u)); top: calc(802 * var(--u)); width: calc(252 * var(--u)); height: calc(40 * var(--u)); --mr: 99; }
/* dải «Đối tác đồng hành»: mockup vẽ logo bịa → logo THẬT của trang chủ, trôi như #chu-dau-tu; tràn ngang màn, dính đáy màn đầu */
:root[data-news="2"] .nw__band { display: grid; grid-template-columns: calc(305 * var(--u)) minmax(0, 1fr); align-items: center; left: calc(836 * var(--u) - 50vw); width: 100vw;
  bottom: calc((941 * var(--u) - 100vh) / 2); height: calc(89 * var(--u)); padding-left: calc(50vw - 836 * var(--u)); border-top: 1px solid #E8826A;
  background: linear-gradient(rgba(14, 26, 46, .94), rgba(14, 26, 46, .97)); box-shadow: 0 calc(-1 * var(--u)) calc(14 * var(--u)) rgba(233, 211, 166, .25); }
:root[data-news="2"] .nw__band h3 { width: calc(120 * var(--u)); margin: 0 0 0 calc(149 * var(--u)); font: 400 calc(13 * var(--u)) / calc(21 * var(--u)) "Lora V", serif; letter-spacing: .3em; text-transform: uppercase; color: #E9EDF2; }
:root[data-news="2"] .nw__band .ip__track { --fade: 6%; --clear: 1%; height: 100%; display: flex; align-items: center; border-left: 1px solid rgba(233, 211, 166, .45); }
:root[data-news="2"] .nw__band .ip__p { height: calc(32 * var(--u)); }
:root[data-news="2"] .nw__band .ip__run { gap: calc(80 * var(--u)); padding-right: calc(80 * var(--u)); }

/* ===== tất cả tin + hộp đọc ===== */
.nw-all { padding: 72px max(24px, 6vw) 120px; background: radial-gradient(60% 40% at 50% 0, rgba(40, 80, 150, .35), transparent 70%), linear-gradient(#0A1220, #0E1A2E 40%, #0A1220); } /* quầng xanh trên như mockup sap-nall */
.nw-all > h2 { margin: 0 0 30px; font: 500 clamp(34px, 3.4vw, 52px) / 1.1 "Lora V", serif; color: #F3E6D0; }
.nw-all > h2 span { font: 400 .36em / 1 "Be Vietnam Pro", sans-serif; letter-spacing: .04em; color: #9AA6B8; vertical-align: middle; }
.nw-all__list { display: grid; gap: 18px; max-width: 1100px; }
.nw-all__list li { position: static; animation: none; }
.nw-all__list .nw__post { display: grid; grid-template-columns: minmax(140px, 300px) 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 26px; padding: 14px; border-radius: 14px;
  background: rgba(150, 165, 190, .07); border: 1px solid rgba(150, 165, 190, .16); transition: translate .4s cubic-bezier(.22, 1, .36, 1); }
.nw-all__list .nw__post::before { content: ""; }
.nw-all__list .nw__post:is(:hover, :focus-within) { translate: 0 -3px; }
.nw-all__list .nw__post > * { position: static; }
.nw-all__list img { grid-row: 1 / -1; width: 100%; height: 100%; min-height: 150px; aspect-ratio: 16 / 10; border-radius: 9px; }
.nw-all__list .nw__meta { gap: 14px; margin-top: 4px; --th: 24; --tp: 11; --ftg: 11; --fd: 13; --u: 1px; }
.nw-all__list h2 { margin: 12px 0 6px; font: 500 clamp(19px, 1.7vw, 25px) / 1.25 "Lora V", serif; white-space: normal; }
.nw-all__list .nw__ex { --cle: 3; font: 400 14.5px / 1.5 "Be Vietnam Pro", sans-serif; color: #9AA6B8; }
.nw-pg { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1100px; margin-top: 34px; }
.nw-pg button { min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid rgba(233, 211, 166, .3); border-radius: 99px; background: none; font: 400 15px / 1 "Be Vietnam Pro", sans-serif; color: #E9EDF2; cursor: pointer; transition: background .25s, border-color .25s; }
.nw-pg button:hover:not(:disabled) { border-color: rgba(233, 211, 166, .8); }
.nw-pg button[aria-current="page"] { background: var(--g-btn); border-color: transparent; color: var(--g-ink); }
.nw-pg button:disabled { opacity: .35; cursor: default; }
.nw-all__list .nw__read { justify-self: start; margin-top: 10px; --u: 1px; --fr: 14; --rp: 6; }

/* ===== trang bài tin/*.html (sinh bởi scripts/build_news.py): ảnh đại diện tràn đầu trang + cột đọc 780, chữ cùng ngôn ngữ navy–vàng ánh kim ===== */
.ar__hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(74vh, 680px); padding: 130px max(24px, 8vw) 52px; overflow: hidden; }
.ar__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.25) contrast(1.08) brightness(1.06); } /* ảnh bài (đa số ảnh mạng xỉn) tươi như mockup sap-art */
.ar__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(14, 26, 46, .35), rgba(14, 26, 46, 0) 30%, rgba(14, 26, 46, .82) 80%, #0E1A2E); } /* ảnh đầu bài rõ, tươi như mockup sap-art */
.ar__head { max-width: 1000px; }
.ar__kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 400 14px / 1 "Be Vietnam Pro", sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.ar__kicker::after { content: ""; width: 70px; border-top: 1px solid rgba(233, 211, 166, .7); }
.ar__kicker a { color: #E9EDF2; text-decoration: none; } .ar__kicker a:hover { color: #E8826A; }
.ar h1 { margin: -.16em 0 0; padding: .16em .1em .2em 0; font: 500 clamp(32px, 4vw, 58px) / 1.16 "Lora V", serif; text-wrap: balance; /* chừa chỗ dấu chồng / dấu nặng như tiêu đề trang riêng */
  background: linear-gradient(180deg, #FFF4E2 18%, #F3E6D0 60%, #D9B880); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .4)); }
.ar__meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; font: 400 14px / 1 "Be Vietnam Pro", sans-serif; color: #B4BFCE; }
.ar__meta span::before { content: "·"; margin-right: 12px; color: #E8826A; }
.ar__body { max-width: 780px; margin: 0 auto; padding: 44px 24px 72px; font: 400 17px / 1.75 "Be Vietnam Pro", sans-serif; color: #CDD5E0; overflow-wrap: break-word; }
.ar__body .ar__lead { margin: 0 0 36px; padding-left: 20px; border-left: 2px solid #E8826A; font: italic 400 20px / 1.6 "Lora V", serif; color: #E9EDF2; }
.ar__body h2 { margin: 52px 0 14px; font: 500 clamp(23px, 2.3vw, 29px) / 1.32 "Lora V", serif; color: #F3E6D0; }
.ar__body h3 { margin: 34px 0 10px; font: 500 21px / 1.4 "Lora V", serif; color: #F3E6D0; }
.ar__body h4 { margin: 26px 0 8px; font: 600 17px / 1.4 "Be Vietnam Pro", sans-serif; color: #F3E6D0; }
.ar__body p { margin: 0 0 16px; }
.ar__body :is(ul, ol) { margin: 0 0 18px; padding-left: 22px; } .ar__body li { margin: 7px 0; } .ar__body li::marker { color: #E8826A; }
.ar__body strong { font-weight: 600; color: #F3E6D0; }
.ar__body a { color: #E8826A; text-decoration: underline; text-decoration-color: rgba(232, 130, 106, .45); text-underline-offset: 3px; } .ar__body a:hover { text-decoration-color: currentColor; }
.ar__body figure { margin: 30px 0; }
.ar__body img { display: block; width: 100%; height: auto; border: 1px solid rgba(233, 211, 166, .5); border-radius: 10px; }
.ar__body figcaption { margin-top: 9px; font: italic 400 14px / 1.5 "Lora V", serif; color: #9AA6B8; text-align: center; }
.ar__table { margin: 26px 0; overflow-x: auto; border: 1px solid rgba(233, 211, 166, .45); border-radius: 10px; background: rgba(14, 26, 46, .55); }
.ar__body table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.ar__body :is(td, th) { padding: 10px 14px; border-bottom: 1px solid rgba(233, 211, 166, .2); text-align: left; vertical-align: top; }
.ar__body :is(th, tr:first-child td) { background: rgba(232, 130, 106, .12); font-weight: 600; color: #F3E6D0; }
.ar__body blockquote { margin: 24px 0; padding: 14px 22px; border-left: 2px solid #E8826A; background: rgba(14, 26, 46, .6); font-style: italic; }
.ar-rel { display: grid; justify-items: center; gap: 28px; padding: 56px max(24px, 6vw) 120px; background: linear-gradient(#0E1A2E, #0E1A2E); }
.ar-rel h2 { width: 100%; max-width: 1100px; margin: 0; font: 500 clamp(28px, 2.6vw, 40px) / 1.1 "Lora V", serif; color: #F3E6D0; }
.ar-rel .nw-all__list { width: 100%; }
.ar-rel .nw__more { --u: 1px; --fm: 17; --mr: 99; height: 50px; padding: 0 34px; }

/* ===== điện thoại — news2-m.jpg (chung mọi kiểu) ===== */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  /* điện thoại — news2-m.jpg (Codex vẽ theo v3, CHUNG mọi kiểu: đầu trang ép data-news = 3) — thang --v = 100vw/390; tiêu đề bài thật 2 dòng → hộp kính cao thêm 24 so với mockup, phần dưới lùi 24 */
  .nw { --v: calc(100vw / 390); --u: var(--v); height: calc(880 * var(--v)); min-height: 0; }
  :root[data-news] .nw__plate { background: linear-gradient(transparent calc(270 * var(--v)), #0E1A2E calc(352 * var(--v))), url(assets/news/plate2-3.jpg) 0 calc(16 * var(--v)) / calc(595 * var(--v)) auto no-repeat, #0E1A2E; }
  .nw__stage { left: 0; top: 0; width: 100%; height: 100%; translate: none; }
  .nw__logo { display: block; left: calc(24 * var(--v)); top: calc(14 * var(--v)); width: calc(116 * var(--v)); }
  :root[data-news="3"] .nw__glass { left: calc(10 * var(--v)); top: calc(277 * var(--v)); width: calc(370 * var(--v)); height: calc(188 * var(--v)); border-radius: calc(10 * var(--v));
    background: linear-gradient(90deg, rgba(14, 26, 46, .86), rgba(14, 26, 46, .62)); -webkit-mask: none; mask: none; }
  :root[data-news="3"] .nw__kicker { --fk: 11; --kl: 50; --kg: 10; left: calc(27 * var(--v)); top: calc(296 * var(--v)); }
  :root[data-news="3"] .nw__title { --ft: 55; left: calc(24 * var(--v)); top: calc(314 * var(--v)); }
  :root[data-news="3"] .nw__feat li:nth-child(1) { --x: 10; --y: 277; --w: 370; --h: 188; }
  :root[data-news="3"] .nw__feat li:nth-child(1) .nw__meta { left: calc(148 * var(--v)); top: calc(15 * var(--v)); gap: calc(14 * var(--v)); --th: 21; --tp: 9; --ftg: 10; --fd: 11; }
  :root[data-news="3"] .nw__feat li:nth-child(1) h2 { left: calc(17 * var(--v)); top: calc(95 * var(--v)); width: calc(345 * var(--v)); font-size: calc(20 * var(--v)); line-height: calc(24 * var(--v)); }
  :root[data-news="3"] .nw__feat li:nth-child(1) .nw__read { left: calc(17 * var(--v)); top: calc(155 * var(--v)); --fr: 14; --rp: 8; }
  :root[data-news="3"] .nw__panel { left: calc(10 * var(--v)); top: calc(475 * var(--v)); width: calc(370 * var(--v)); height: calc(393 * var(--v)); border-radius: calc(10 * var(--v)); }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) { --x: 19; --w: 352; --iw: 179; }
  :root[data-news="3"] .nw__feat li:nth-child(2) { --y: 497; --h: 96; }
  :root[data-news="3"] .nw__feat li:nth-child(3) { --y: 609; --h: 104; }
  :root[data-news="3"] .nw__feat li:nth-child(4) { --y: 727; --h: 101; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 3)::before { top: calc(-8 * var(--v)); }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__post::after { left: calc(191 * var(--v)); top: calc(-11 * var(--v)); font-size: calc(44 * var(--v)); }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__meta { right: calc(7 * var(--v)); top: calc(5 * var(--v)); --fd: 11; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) h2 { left: calc(191 * var(--v)); top: calc(32 * var(--v)); width: calc(160 * var(--v)); font-size: calc(16 * var(--v)); line-height: calc(19 * var(--v)); --cl: 2; }
  :root[data-news="3"] .nw__feat li:nth-child(n + 2) .nw__read { left: calc(191 * var(--v)); top: calc(73 * var(--v)); --fr: 13; --rp: 7; }
  :root[data-news="3"] .nw__feat li img { border-radius: calc(8 * var(--v)); }
  :root[data-news="3"] .nw__more { left: calc(19 * var(--v)); top: calc(826 * var(--v)); width: calc(352 * var(--v)); height: calc(34 * var(--v)); --mr: 8; --fm: 15; }
  .nw-all { padding: 48px 14px 110px; }
  .nw-all__list .nw__post { grid-template-columns: 1fr; padding: 10px; }
  .nw-all__list img { grid-row: auto; min-height: 0; margin-bottom: 10px; }
  .ar__hero { min-height: 72vh; padding: 110px 20px 36px; }
  .ar__body { padding: 32px 18px 56px; font-size: 16px; }
  .ar__body .ar__lead { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .nw__feat li { animation: none; } .nw__post, .nw__post img { transition: none; } }