/* Giao diện Tranhbeto, dựa trên bộ nhận diện Tranhbeto Design System. */
[data-theme="dem"] { color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 25px; background: var(--paper); color: var(--ink); }
a { color: var(--link); }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: 6px; }
[hidden] { display: none !important; }
#app { background: var(--paper); color: var(--ink); min-height: 70vh; }

/* ---------- Bố cục chung ---------- */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 48px; }
.trang { display: flex; flex-direction: column; gap: 28px; padding-block: 36px 72px; }
.khoi { padding-block: 72px; }
.hep { max-width: 880px; }
.dai { background: var(--paper-2); padding-block: 72px; }
.dai-dacbiet { background: var(--paper); border-block: 1px solid var(--line); padding-block: 36px; color: var(--ink); }
.cot-doc { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cot-doc.nho { gap: 6px; }
.hang { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.hang-giua { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.rong { flex: 1; min-width: 0; }
.can-giua { text-align: center; justify-content: center; }
.mo { color: var(--ink-muted); }
.nho { font-size: 14px; }
.dam { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.khong-dau { list-style: none; margin: 0; padding: 0; }
.luoi-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.luoi-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.luoi-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.luoi-chon { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.bo-cuc { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cot-chinh { flex: 999 1 560px; }
.cot-phu { flex: 1 1 340px; min-width: 0; }
.the-khoi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.the-xam { background: var(--paper-2); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.hai-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; }
.cuon-ngang { overflow-x: auto; }
.an-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.tb-btn { position: relative; }
.trong { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 48px 16px; border: 2px dashed var(--line); border-radius: var(--radius-lg); color: var(--ink-muted); }
.trong .ico { color: var(--coral); }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Biểu tượng ---------- */
.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.sao, .ico.sao-lon { fill: var(--sun); stroke: #c99a1e; stroke-width: 1.2; }

/* ---------- Đầu trang ---------- */
.top { border-bottom: 1px solid var(--line); background: var(--paper); position: relative; z-index: 2; }
.top-trong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; min-height: 72px; }
.logo { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.logo i { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }
#nav { display: flex; flex-wrap: wrap; gap: 0 22px; flex: 1; font-weight: 600; font-size: 15px; }
#nav a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
#nav a:hover { color: var(--blue); }
#nav a[aria-current] { color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); }
.top-phai { display: flex; align-items: center; gap: 8px; }
.chon-be { min-height: 40px; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 0 12px; background: var(--card); color: var(--ink); font: 600 14px var(--font-sans); }
.nut-ho-so { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); border-radius: 50%; }
.chan { border-top: 1px solid var(--line); background: var(--paper-2); }
.chan-trong { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px; padding-block: 40px; font-size: 14px; }
.chan-trong nav { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Thành phần (theo bộ nhận diện) ---------- */
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--card); color: var(--ink); font: 600 16px/1.2 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.tb-btn:hover { background: var(--paper-2); }
.tb-btn.nho { min-height: 42px; padding: 0 16px; font-size: 14px; }
.tb-btn-primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.tb-btn-primary:hover { background: var(--blue); filter: brightness(.94); }
.tb-btn-sun { background: var(--sun); border-color: var(--sun); color: var(--on-sun); }
.tb-btn-sun:hover { background: var(--sun); filter: brightness(.96); }
.tb-btn:disabled { opacity: .45; cursor: default; }
.tb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink); font: 500 14px var(--font-sans); cursor: pointer; white-space: nowrap; }
.tb-chip[aria-pressed="true"], .chip-radio:has(input:checked) { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.chip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-radio { position: relative; }
.chip-radio:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.tb-badge { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/22px var(--font-sans); padding: 0 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink); white-space: nowrap; align-self: flex-start; }
.tb-badge-blue { background: var(--blue-soft); color: var(--blue); }
.tb-badge-sun { background: var(--sun); color: var(--on-sun); }
.tb-badge-coral { background: var(--coral-soft); color: var(--coral-deep); }
.tb-badge-leaf { background: var(--leaf-soft); color: var(--leaf); }
.tb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tb-field label { font: 600 14px/20px var(--font-sans); }
.tb-field input, .tb-field select, .tb-field textarea, .chon-nho { min-height: 48px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: 400 16px/24px var(--font-sans); padding: 0 12px; width: 100%; }
.tb-field textarea { padding: 12px; resize: vertical; }
.tb-field input[type="file"] { padding: 10px 12px; }
.chon-nho { width: auto; min-height: 44px; }
.chon-nho.so { width: 90px; }
.tb-hint { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.chon-o { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.chon-o input { width: 20px; height: 20px; accent-color: var(--blue); }
.khong-vien { border: 0; margin: 0; padding: 0; }

/* Chữ */
.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -.01em; }
.display { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 700; }
.title { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; }
.heading { font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 700; }
.body-lg { font-size: 18px; line-height: 28px; }
.label { font-size: 14px; line-height: 20px; font-weight: 600; }
.caption { font-size: 13px; line-height: 18px; font-weight: 500; }
.story { font-family: var(--font-display); font-size: 26px; line-height: 40px; font-weight: 500; }
.note { font-family: var(--font-hand); font-size: 20px; line-height: 28px; font-weight: 500; }
.note.lon { font-size: 22px; line-height: 32px; }

/* ---------- Ô hình ---------- */
.hinh { width: 100%; height: 100%; object-fit: cover; display: block; }
.hinh-to { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.hinh-thay { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff; }
.lineart { width: 100%; height: 100%; }
.cho-hinh { width: 100%; height: 100%; min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 12px; background: var(--paper-2); border: 1.5px dashed var(--line-strong); border-radius: inherit; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.cho-hinh small { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; opacity: .9; }

/* Bìa sách */
.bia { position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 4px var(--radius-md) var(--radius-md) 4px; box-shadow: var(--shadow-book); overflow: hidden; }
.bia::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: #00000014; z-index: 2; }
.bia-anh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bia-ten { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 16px; font: 700 21px/25px var(--font-display); z-index: 1; }
.bia:has(.bia-anh) .bia-ten { background: var(--card); color: var(--ink) !important; border-top: 1px solid var(--line); }
.bia-to { background: #fff; border: 2px solid var(--ink); }
.bia-to .bia-ten { color: #1d2033; background: #fff; border-top: 2px solid var(--ink); }
.bia-to-hinh { position: absolute; inset: 10px 10px 70px; }
.bia.lon .bia-ten, .bia-to.lon .bia-ten { font-size: 26px; line-height: 30px; }
.lon-bia, .bia-to.lon { width: 240px; max-width: 100%; margin-inline: auto; }
.anh-tron { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--card); box-shadow: var(--shadow-sm); }
.bia-anh-tron { position: absolute; top: 16px; right: 16px; z-index: 3; }
.tb-book { display: flex; flex-direction: column; gap: 8px; width: 100%; color: var(--ink); text-decoration: none; }
.tb-book-title { margin-top: 4px; font: 700 18px/24px var(--font-display); }
.tb-book-meta { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.tb-book-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ke { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 28px; }
.o-them { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 3 / 4; border-radius: var(--radius-md); border: 2px dashed var(--line-strong); color: var(--blue); font-weight: 600; text-decoration: none; text-align: center; padding: 16px; }
.khu-dem { background: var(--paper); color: var(--ink); padding: 28px; border-radius: var(--radius-lg); }
.khu-dem .tb-book { color: var(--ink); }

/* ---------- Trang chủ ---------- */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; padding-block: 56px 72px; }
.hero-chu { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.hero-hinh { position: relative; width: 100%; max-width: 540px; height: 470px; justify-self: center; }
.hero-mat-troi { position: absolute; right: 2%; top: 0; width: 132px; height: 132px; border-radius: 50%; background: var(--sun); }
.hero-trang { position: absolute; left: 30%; top: 4%; width: 58%; aspect-ratio: 4 / 5; padding: 14px 14px 36px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-book); transform: rotate(-4deg); }
.hero-trang .note-nho { position: absolute; left: 16px; bottom: 8px; }
.note-nho { font-family: var(--font-hand); font-size: 15px; color: var(--ink-muted); }
.hero-bia { position: absolute; left: 2%; top: 30%; width: 46%; transform: rotate(5deg); }
.hero-sap { position: absolute; right: 8%; bottom: 0; display: flex; gap: 10px; align-items: flex-end; }
.hero-sap span { width: 18px; border-radius: 9px; }
.o-buoc { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--line); }
.so-to { font-family: var(--font-display); font-size: 56px; font-weight: 800; line-height: 1; color: var(--blue); }
.o-sp { display: flex; gap: 20px; padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--card); }
.o-sp-icon { width: 56px; height: 56px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ds-tick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ds-tick li { display: flex; gap: 12px; align-items: flex-start; }
.ds-tick .ico { color: var(--leaf); margin-top: 2px; }
.o-gia { display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--paper-2); }
.o-gia div { display: flex; flex-direction: column; }
.khung-anh { aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); }
.quat-the { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.hoi-dap details { border-top: 1px solid var(--line); padding: 16px 0; }
.hoi-dap details:last-child { border-bottom: 1px solid var(--line); }
.hoi-dap summary { cursor: pointer; }
.hoi-dap details p { margin-top: 10px; }

/* ---------- Tạo sách, xem sách, đặt in ---------- */
.buoc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 600; }
.buoc li { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--paper-2); color: var(--ink-muted); }
.buoc li[aria-current] { background: var(--blue); color: var(--on-blue); }
.buoc li.xong { background: var(--leaf-soft); color: var(--leaf); }
.o-chon { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--card); cursor: pointer; }
.o-chon input { position: absolute; opacity: 0; }
.o-chon:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.o-chon:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.luoi-trang { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.luoi-trang.xh { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.o-trang { margin: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.o-trang-hinh { aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.luoi-trang.xh .o-trang-hinh { aspect-ratio: 4 / 3; }
.o-trang-hinh.nen-trang { background: #fff; padding: 8px; }
.o-trang figcaption { font-size: 14px; line-height: 20px; }
.o-trang .nut-tron { position: absolute; top: 34px; right: 34px; }
.bia-xem { border: 0; background: transparent; overflow: visible; }
.bia-to-xem { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; background: #fff; border: 2px solid #1d2033; color: #1d2033; border-radius: 4px 16px 16px 4px; }
.bia-to-xem b { font: 700 24px/28px var(--font-display); }
.buoc-so { display: flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: 999px; }
.buoc-so button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 22px; cursor: pointer; border-radius: 999px; }
.buoc-so b { min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.bia-nho { width: 80px; flex: none; aspect-ratio: 3 / 4; border-radius: 3px 10px 10px 3px; background: var(--blue); color: var(--on-blue); box-shadow: var(--shadow-book); display: flex; align-items: flex-end; padding: 8px; font: 700 12px/14px var(--font-display); }
.bia-nho.bia-trang { background: #fff; color: #1d2033; border: 2px solid #1d2033; }
.dong-tien { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-top: 1px solid var(--line); }
.tin-nhan { white-space: pre-wrap; font: 15px/24px var(--font-sans); background: var(--paper-2); border-radius: var(--radius-md); padding: 16px 18px; margin: 0; }
.hai-cot-nho { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.khung-qr { width: 200px; height: 200px; border-radius: var(--radius-md); overflow: hidden; }
.khung-qr .hinh { object-fit: contain; background: #fff; }
.tim { flex: 0 1 340px; }

/* ---------- Thư viện, đọc truyện ---------- */
.o-doc-tiep { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.bia-mini { width: 60px; flex: none; aspect-ratio: 3 / 4; border-radius: 3px 8px 8px 3px; box-shadow: var(--shadow-book); overflow: hidden; }
.bia-mini.xh { aspect-ratio: 4 / 3; width: 84px; background: var(--paper-2); }
.thanh { display: block; height: 6px; border-radius: 3px; background: var(--paper-2); }
.thanh span { display: block; height: 6px; border-radius: 3px; background: var(--blue); }
.thanh-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.thanh-doc h1 { flex: 1; }
.doc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: center; padding-block: 32px; }
.doc-hinh { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); }
.chu-doc { font-size: 32px; line-height: 48px; }
.chu-doc mark { background: transparent; color: var(--ink); border-radius: 8px; padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.chu-doc mark.dang-doc { background: var(--sun); color: var(--on-sun); }
.dieu-khien { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; border-radius: var(--radius-lg); background: var(--paper-2); margin-bottom: 48px; }
.nut-tron { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.nut-tron.nho { width: 40px; height: 40px; }
.nut-tron:disabled { opacity: .4; cursor: default; }
.nut-phat { width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--blue); color: var(--on-blue); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cham { display: inline-flex; gap: 6px; margin-left: 6px; }
.cham i { width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); }
.cham i.on { width: 22px; background: var(--blue); }

/* ---------- Góc kỷ niệm ---------- */
.dau-ho-so { gap: 20px; }
.vong-ten { width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--sun); color: var(--on-sun); display: inline-flex; align-items: center; justify-content: center; font: 800 34px/1 var(--font-display); }
.vong-ten.nho { width: 40px; height: 40px; font-size: 20px; }
.anh-xem-truoc { width: 140px; border-radius: var(--radius-sm); }
.thang { position: relative; display: flex; flex-direction: column; gap: 16px; padding-left: 28px; border-left: 2px solid var(--line); }
.thang::before { content: ""; position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--leaf); border: 3px solid var(--paper); }
.luoi-kn { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; align-items: start; }
.tb-memory { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px; padding: 8px 8px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.tb-memory-photo { aspect-ratio: 1; border-radius: 6px; background: var(--paper-2); border: 1.5px dashed var(--line-strong); display: flex; align-items: flex-end; padding: 8px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.tb-memory-img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 6px; }
.tb-memory-note { padding: 0 4px; font: 500 20px/28px var(--font-hand); }
.tb-memory-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.o-loi { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radius-md); background: var(--coral-soft); }
.o-moc { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius-md); background: var(--leaf-soft); }
.o-moc > .ico { color: var(--leaf); }
.nut-xoa { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .85; z-index: 2; }
.nut-xoa.tinh { position: static; }
.luoi-tranh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.luoi-tranh figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.luoi-tranh img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.bang { border-collapse: collapse; width: 100%; font-size: 14px; }
.bang th, .bang td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.bang th { font-weight: 600; }
.dang-chon { border-color: var(--blue); }

/* ---------- Kiểm tra hình ---------- */
.luoi-kiem { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.o-kiem { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.o-kiem-hinh { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.o-kiem-hinh img { width: 100%; height: 100%; object-fit: contain; }
.o-kiem figcaption { display: flex; flex-direction: column; font-size: 13px; }
.o-kiem figcaption b { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }

/* ---------- Đặc biệt ---------- */
.db-khung { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 80vh; }
.db-menu { flex: 1 1 250px; max-width: 100%; background: var(--paper-2); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.db-ten { font: 800 22px/1.2 var(--font-display); padding: 0 10px 8px; }
.db-ten b { color: var(--blue); font-weight: 800; }
.db-be { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; }
.db-muc { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
.db-muc:hover { background: var(--card); }
.db-muc[aria-current] { background: var(--card); font-weight: 600; box-shadow: var(--shadow-sm); }
.db-nhom { padding: 14px 10px 4px; }
.db-mo-be { margin-top: 18px; }
.db-noi-dung { flex: 999 1 560px; min-width: 0; padding: 32px 40px 72px; max-width: 1100px; }
.ds-lich { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ds-lich li { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; border-radius: 10px; }
.ds-lich li.xong { color: var(--ink-muted); }
.ds-lich li.xong .ico { color: var(--leaf); }
.ds-lich li.dang { background: var(--coral-soft); font-weight: 600; }
.goi-y { display: flex; gap: 12px; align-items: flex-start; background: var(--paper-2); }
.goi-y > .ico { color: var(--ink-muted); flex: none; }
.goi-y ol { margin: 0; padding-left: 20px; }
.ds-kiem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-kiem li { display: flex; gap: 10px; align-items: flex-start; }
.ds-kiem li.dat .ico { color: var(--leaf); }
.ds-kiem li.chua .ico { color: var(--coral-deep); }
.ds-buoc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-buoc li { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.so-nho { width: 20px; text-align: right; font-size: 13px; color: var(--ink-muted); }
.o-icon { width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.o-icon img { width: 100%; height: 100%; object-fit: cover; }
.luoi-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.o-the-wrap { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.o-the { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1; padding: 10px; border-radius: 14px; border: 3px solid var(--blue); background: var(--card); cursor: pointer; font-weight: 500; text-align: center; overflow: hidden; }
.o-the.vien-cam { border-color: var(--coral); }
.o-the img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.chon-in { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-muted); min-height: 32px; justify-content: center; }
.anh-the-nho { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.xem-be { background: var(--paper-2); }
.luoi-chon-be { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.o-chon-be, .be-chon-o { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1; border-radius: 20px; border: 4px solid var(--card); background: var(--card); font: 600 20px var(--font-display); cursor: pointer; color: var(--ink); }
.o-chon-be img, .be-chon-o img { width: 60%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.o-chon-be.chon, .be-chon-o.chon { border-color: var(--blue); }
.cau-be { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 16px; border-radius: 14px; background: var(--card); font: 500 20px var(--font-display); }
.cau-be .ico { color: var(--blue); }
.bao-xanh { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--blue-soft); color: var(--ink); }
.bao-do { background: var(--coral-soft); border-color: var(--coral); }
.bao-do .heading { color: var(--coral-deep); }
.o-xam { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 12px; background: var(--paper-2); }
.thu-to { font: 500 19px/1.7 var(--font-display); min-height: 320px; width: 100%; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); padding: 20px; background: var(--card); color: var(--ink); }
.the-vi { aspect-ratio: 85.6 / 54; max-width: 380px; width: 100%; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; }
.the-vi.mat-truoc { background: var(--blue); color: var(--on-blue); justify-content: space-between; border-color: var(--blue); }
.the-vi.khan-cap { aspect-ratio: auto; border: 2px solid var(--coral); }

/* ---------- Chế độ bé ---------- */
body.che-do-be .top, body.che-do-be .chan { display: none; }
.be { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper-2); color: var(--ink); font-family: var(--font-display); user-select: none; }
.be-tren { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 10px 24px; }
.be-tren-trai, .be-tren-phai { width: 220px; display: flex; align-items: center; gap: 12px; }
.be-tren-phai { justify-content: flex-end; }
.be-tieu-de { flex: 1; text-align: center; font-size: 28px; font-weight: 600; }
.be-ve { display: inline-flex; align-items: center; gap: 6px; height: 56px; padding: 0 22px 0 14px; border-radius: 28px; border: 0; background: var(--card); font: 600 22px var(--font-display); cursor: pointer; }
.be-sao { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 22px; background: var(--card); font-size: 20px; font-weight: 700; }
.be-khoa { width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; touch-action: none; }
.be-giua { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 24px; }
.be-ba-nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
.be-nut-lon { width: clamp(200px, 27vw, 300px); aspect-ratio: 3 / 4; border-radius: 32px; border: 0; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; cursor: pointer; box-shadow: 0 4px 0 var(--line); font: 600 30px var(--font-display); color: var(--ink); }
.be-o-icon { width: 62%; aspect-ratio: 1; border-radius: 32px; display: flex; align-items: center; justify-content: center; }
.be-ke { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.be-bia { width: 280px; border-radius: 28px; border: 4px solid var(--card); background: var(--card); padding: 14px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; text-align: left; font: 600 24px var(--font-display); color: var(--ink); }
.be-bia-hinh { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--paper-2); }
.be-doc { display: flex; align-items: center; gap: 20px; width: 100%; max-width: 1100px; }
.be-tron { width: 96px; height: 96px; flex: none; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.be-tron:disabled { opacity: .35; }
.be-doc-giua { flex: 1; display: flex; flex-direction: column; gap: 16px; align-items: center; min-width: 0; }
.be-doc-hinh { width: 100%; max-width: 820px; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--card); }
.be-doc-chu { font-size: 34px; line-height: 1.4; text-align: center; text-wrap: balance; }
.be-nghe { display: inline-flex; align-items: center; gap: 10px; height: 64px; padding: 0 28px; border-radius: 32px; border: 0; background: var(--blue); color: var(--on-blue); font: 600 24px var(--font-display); cursor: pointer; }
.be-so { font-size: 22px; color: var(--ink-muted); }
.be-lich { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; align-items: center; }
.be-lich-trai { display: flex; flex-direction: column; gap: 18px; width: min(440px, 90vw); }
.be-buoc-hien { aspect-ratio: 1.1; border-radius: 36px; background: var(--card); border: 5px solid var(--blue); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; font-size: 40px; font-weight: 600; }
.be-buoc-hien span { font-size: 18px; }
.be-buoc-hien img { width: 50%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; }
.be-xong { height: 96px; border-radius: 28px; border: 0; background: var(--blue); color: var(--on-blue); font: 600 34px var(--font-display); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 14px; }
.be-lich-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: min(420px, 90vw); }
.be-lich-ds li { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 18px; border-radius: 16px; background: var(--card); font-size: 22px; }
.be-lich-ds li i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.be-lich-ds li.xong { background: transparent; color: var(--ink-muted); }
.be-lich-ds li.xong i { background: var(--blue); border-color: var(--blue); }
.be-lich-ds li.dang { font-weight: 600; outline: 3px solid var(--blue); }
.be-lich-ds li.dang i { background: var(--sun); border-color: var(--sun); }
.be-chon { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.be-chon-luoi { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.be-chon-o { width: min(260px, 40vw); font-size: 32px; }
.be-cau { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 0 28px; border-radius: 28px; background: var(--card); font-size: 32px; width: min(760px, 92vw); }
.be-cau .ico { color: var(--blue); }
.be-duoi { display: flex; justify-content: safe center; overflow-x: auto; gap: 12px; padding: 14px 24px; background: var(--card); border-top: 1px solid var(--line); }
.be-the-noi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1 1 0; min-width: 84px; max-width: 140px; height: 92px; border-radius: 18px; border: 0; background: var(--paper-2); cursor: pointer; font: 500 18px var(--font-display); color: var(--ink); }
.be-the-noi:active { background: var(--blue-soft); }

/* ---------- Hộp thoại, thông báo ---------- */
#hop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.hop-nen { position: absolute; inset: 0; background: #1d203366; }
.hop { position: relative; width: min(460px, 100%); background: var(--card); color: var(--ink); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-book); }
.o-pin { font: 700 32px/1 var(--font-display); letter-spacing: .4em; text-align: center; height: 64px; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); width: 100%; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; max-width: min(560px, calc(100% - 32px)); padding: 14px 20px; border-radius: 16px; background: #1d2033; color: #fff; font-size: 15px; line-height: 22px; box-shadow: var(--shadow-book); }

/* ---------- Sách lật có tiếng, chế độ video ---------- */
.lat-trang { display: flex; flex-direction: column; gap: 16px; padding-block: 16px 0; }
.bia-ngang { background: var(--paper-2); }
.bia-ngang .bia-mo { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(12px) brightness(.9); }
.bia-ngang .bia-anh { object-fit: contain; }
.lat-trang[data-che-do="sach"] .lat-video { display: none; }
.lat-trang[data-che-do="video"] .lat-sach, .lat-trang[data-che-do="video"] .lat-dk { display: none; }
.lat-video video { display: block; margin: 0 auto; max-width: 100%; max-height: min(78vh, 820px); border-radius: var(--radius-md); background: #000; box-shadow: var(--shadow-book); }
.lat-sach { position: relative; display: flex; align-items: flex-start; justify-content: center; width: fit-content; max-width: 100%; margin: 0 auto; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px var(--radius-md) var(--radius-md) 8px; box-shadow: var(--shadow-book); }
.la { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: fit-content; background: var(--card); }
.la img { display: block; height: min(calc(100vh - 400px), 560px); min-height: 280px; width: auto; max-width: none; flex: none; border-radius: 4px; transition: box-shadow .2s; }
.an-chu .la img { height: min(calc(100vh - 280px), 660px); }
.lat-ngang .la img, .lat-ngang.an-chu .la img { height: auto; min-height: 0; width: min(520px, calc(50vw - 90px)); }
.lat-ngang .la-mot img { width: min(720px, calc(100vw - 120px)); }
.la-trai { padding-right: 14px; border-right: 1px solid var(--line); box-shadow: inset -20px 0 20px -18px #1d203338; }
.la-phai { padding-left: 14px; box-shadow: inset 20px 0 20px -18px #1d203338; }
.la.dang img { box-shadow: 0 0 0 3px var(--sun); }
.la-chu { display: flex; flex-direction: column; gap: 8px; width: 0; min-width: 100%; padding: 0 4px 4px; box-sizing: border-box; font: 500 18px/28px var(--font-display); }
.an-chu .la-chu { display: none; }
.la-chu p { margin: 0 -4px; padding: 0 4px; border-radius: 6px; transition: background .25s; }
.la-chu p.thoai { color: var(--blue); }
.la-chu p.dang-doc { background: var(--sun); color: var(--on-sun); }
.la-trong img { visibility: hidden; }
.la-che, .la-lat { position: absolute; margin: 0; pointer-events: none; }
.la-che { z-index: 3; background: var(--card); overflow: hidden; }
.la-lat { z-index: 4; transform-style: preserve-3d; }
.la-mat { position: absolute; inset: 0; overflow: hidden; background: var(--card); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 18px #1d203326; }
.la-sau { transform: rotateY(180deg); }
.la-che > .la, .la-mat > .la { height: 100%; }
.lat-dk { position: sticky; bottom: 10px; z-index: 5; margin: 0 auto 32px; max-width: 1040px; width: 100%; padding-block: 12px; box-shadow: var(--shadow-book); }
.lat-tien { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.lat-tien input { flex: 1; accent-color: var(--blue); }
.lat-tien span { white-space: nowrap; min-width: 92px; }

/* ---------- Điện thoại ---------- */
@media (max-width: 760px) {
  .lat-sach { width: 100%; padding: 10px; }
  .la { width: 100%; }
  .la img, .an-chu .la img, .lat-ngang .la img, .lat-ngang .la-mot img { width: 100%; height: auto; max-height: 55vh; min-height: 0; object-fit: contain; }
  .la-chu { font-size: 18px; line-height: 28px; }
  .lat-dk { bottom: 8px; padding: 10px 14px; gap: 8px 14px; margin-bottom: 16px; }
  .lat-dk .nut-phat { width: 56px; height: 56px; }
  .lat-dk .nut-tron { width: 44px; height: 44px; }
  .lat-dk .hang { gap: 8px; }
  .lat-tien { min-width: 120px; gap: 8px; }
  .lat-tien span { min-width: 0; }
  .lat-dk .chon-o { font-size: 13px; line-height: 18px; }
  .wrap { padding-inline: 16px; }
  .display-xl { font-size: 40px; line-height: 44px; }
  .display { font-size: 30px; line-height: 36px; }
  .title { font-size: 23px; line-height: 29px; }
  .khoi, .dai { padding-block: 48px; }
  .hero-hinh { height: 360px; }
  .top-trong { padding-block: 10px; }
  #nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; gap: 0 18px; }
  #nav a { white-space: nowrap; }
  .db-menu { flex-basis: 100%; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; align-items: center; }
  .db-ten, .db-nhom, .db-be { display: none; }
  .db-muc { white-space: nowrap; }
  .db-mo-be { margin-top: 0; }
  .db-noi-dung { padding: 20px 16px 56px; }
  .chu-doc { font-size: 26px; line-height: 40px; }
  .be-tren { padding: 10px 12px; }
  .be-tren-trai, .be-tren-phai { width: auto; }
  .be-tieu-de { font-size: 22px; }
  .be-tron { width: 64px; height: 64px; }
  .be-doc-chu { font-size: 26px; }
  .be-the-noi { min-width: 84px; height: 78px; font-size: 15px; }
  .be-ba-nut { flex-direction: column; width: 100%; gap: 16px; }
  .be-nut-lon { width: 100%; aspect-ratio: auto; height: 128px; flex-direction: row; justify-content: flex-start; gap: 20px; padding: 0 20px; font-size: 26px; }
  .be-o-icon { width: 92px; flex: none; border-radius: 24px; }
  .be-o-icon .ico { width: 56px; height: 56px; }
}

/* ---------- In khổ A4 ---------- */
#in-root { display: none; }
@page { size: A4; margin: 0; }
@media print {
  body.dang-in > *:not(#in-root) { display: none !important; }
  body.dang-in #in-root { display: block; }
  body.dang-in { background: #fff; }
  #in-root, #in-root * { color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .a4 { width: 210mm; height: 297mm; padding: 14mm; page-break-after: always; break-after: page; overflow: hidden; position: relative; display: flex; flex-direction: column; font-family: var(--font-sans); background: #fff; }
  .a4:last-child { page-break-after: auto; break-after: auto; }
  .in-bia, .in-cuoi { align-items: center; justify-content: center; text-align: center; gap: 10mm; }
  .in-nho { font-size: 10pt; color: #444 !important; }
  .in-tieu-de { font: 800 34pt/1.15 var(--font-display); margin: 0; }
  .in-tieu-de.nho { font-size: 24pt; }
  .in-anh-tron { width: 70mm; height: 70mm; border-radius: 50%; object-fit: cover; border: 1.2mm solid #111; }
  .in-bia-hinh { width: 120mm; height: 140mm; border: 0.6mm solid #111; border-radius: 4mm; overflow: hidden; }
  .in-de-tang { font: 500 16pt/1.4 var(--font-hand); max-width: 150mm; margin: 0; }
  .in-khung { flex: 1; border: 0.5mm solid #111; border-radius: 4mm; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .in-khung.mau { border: 0; flex: 0 0 auto; height: 170mm; border-radius: 6mm; }
  .in-hinh { width: 100%; height: 100%; object-fit: contain; }
  .in-khung.mau .in-hinh { object-fit: cover; }
  .in-khung .hinh-thay svg, .in-bia-hinh .hinh-thay svg { width: 100%; height: 100%; }
  .in-khung .cho-hinh { border-radius: 0; font-size: 11pt; }
  .in-cau { font: 700 24pt/1.25 var(--font-display); text-align: center; margin: 6mm 0 0; }
  .in-chu-truyen { font: 500 22pt/1.45 var(--font-display); margin: 10mm 4mm 0; }
  .in-so { position: absolute; bottom: 7mm; right: 12mm; font-size: 10pt; }
  .in-dong { font-size: 16pt; }
  .in-o-ky { width: 80mm; height: 60mm; border: 0.5mm dashed #111; border-radius: 4mm; display: flex; align-items: flex-end; justify-content: center; padding: 4mm; font-size: 11pt; }
  .in-kn { gap: 8mm; }
  .in-kn-o { flex: 1; display: flex; flex-direction: column; gap: 3mm; border: 0.3mm solid #999; border-radius: 4mm; padding: 5mm; overflow: hidden; }
  .in-kn-o img { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: 2mm; }
  .in-kn-chu { font: 500 16pt/1.4 var(--font-hand); margin: 0; }
  .in-the-luoi { display: grid; grid-template-columns: repeat(var(--cot), var(--o)); border-top: 0.3mm dashed #666; border-left: 0.3mm dashed #666; margin: 4mm auto 0; }
  .in-the-o { width: var(--o); height: var(--o); border-right: 0.3mm dashed #666; border-bottom: 0.3mm dashed #666; padding: 2.5mm; }
  .in-the-trong { width: 100%; height: 100%; border: 0.8mm solid #1f6b63; border-radius: 3mm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5mm; text-align: center; overflow: hidden; }
  .in-the-trong.vien-cam { border-color: #e07a5f; }
  .in-the-trong .ico { width: 55%; height: 55%; stroke-width: 1.4; }
  .in-the-trong img { width: 70%; height: 60%; object-fit: cover; border-radius: 2mm; }
  .in-the-trong b { font: 600 12pt/1.15 var(--font-display); }
  .in-vi { gap: 5mm; align-items: center; }
  .in-gap { display: flex; border: 0.3mm dashed #666; width: 171.2mm; height: 54mm; }
  .in-mat { width: 85.6mm; height: 100%; padding: 4mm 5mm; display: flex; flex-direction: column; gap: 1.5mm; font-size: 10pt; line-height: 1.35; }
  .in-mat + .in-mat { border-left: 0.3mm dotted #888; }
  .in-mat.mat-truoc { background: #ddede9; justify-content: space-between; }
  .in-mat.vien-tren { border-top: 2.5mm solid #e07a5f; }
  .in-mat small { margin-top: auto; font-size: 9pt; }
  .in-ten-the { font: 700 15pt/1.2 var(--font-display); }
  .in-thu { gap: 6mm; padding: 22mm; }
  .in-thu p { font: 500 17pt/1.6 var(--font-display); margin: 0; }
  .in-vecon { gap: 6mm; padding: 18mm; }
  .in-vecon-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm 10mm; }
  .in-vecon-luoi h2 { font-size: 10pt; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 1.5mm; }
  .in-vecon-luoi p { font-size: 13pt; line-height: 1.45; margin: 0; }
  .in-lich { align-items: center; gap: 4mm; }
  .in-lich-cot { display: flex; flex-direction: column; border: 0.3mm dashed #666; }
  .in-lich-o { width: 120mm; height: 34mm; display: flex; align-items: center; gap: 6mm; padding: 0 6mm; border-bottom: 0.3mm dashed #666; }
  .in-lich-o .ico { width: 24mm; height: 24mm; }
  .in-lich-o img { width: 26mm; height: 26mm; object-fit: cover; border-radius: 2mm; }
  .in-lich-o b { flex: 1; font: 700 18pt var(--font-display); }
  .in-lich-so { font: 700 16pt var(--font-display); width: 8mm; }
  .in-lich-xong { width: 22mm; height: 12mm; border: 0.4mm solid #111; border-radius: 6mm; display: flex; align-items: center; justify-content: center; font-size: 10pt; }
}