@charset "utf-8";
/* Website Tìm Bạn Hẹn Hò Gần: hệ thiết kế chung của bốn trang.
   Ngôn ngữ lấy từ video mẫu của chủ app: rất ít chữ mỗi màn, chữ hoa mảnh rộng khổng lồ, gam đơn sắc ngà và đen, đường sợi tóc, chú thích tí hon.
   Màu thương hiệu chỉ ở nút chính, chấm nhỏ, tiêu điểm. Mọi màu khác trên trang đến từ ảnh giao diện.
   Mỗi khối đặt data-nen="ngà", "đen" hoặc "xám": nền, chữ, đường kẻ đổi theo khối. Thành phần chỉ dùng biến nên tự đúng trên cả ba nền.
   Không gradient, không bóng, không thẻ nổi, không viền màu. */

/* ---------- phông: chỉ đúng bốn nặng đang dùng, tổng khoảng 107 KB ---------- */
@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 100; font-display: swap; src: url("/gioi-thieu/font/lexend-exa-100-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 100; font-display: swap; src: url("/gioi-thieu/font/lexend-exa-100-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 200; font-display: swap; src: url("/gioi-thieu/font/lexend-exa-200-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lexend Exa"; font-style: normal; font-weight: 200; font-display: swap; src: url("/gioi-thieu/font/lexend-exa-200-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/gioi-thieu/font/be-vietnam-pro-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/gioi-thieu/font/be-vietnam-pro-400-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/gioi-thieu/font/be-vietnam-pro-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/gioi-thieu/font/be-vietnam-pro-600-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
/* chữ dự phòng cùng bề ngang, phông thật về không làm nhảy dòng */
@font-face { font-family: "Du phong"; src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial"); size-adjust: 109%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Du phong rong"; src: local("Arial"), local("Roboto"), local("Helvetica Neue"); size-adjust: 114%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --nga: #E9E6E1;
  --den: #0B0B0C;
  --xam: #BEBBB5;
  --tim: #6C5CE7;
  --tim-dam: #5445C9;
  --trang: #FFFFFF;

  --phong-lon: "Lexend Exa", "Du phong rong", "Segoe UI", Roboto, Arial, sans-serif;
  --phong-than: "Be Vietnam Pro", "Du phong", "Segoe UI", Roboto, Arial, sans-serif;

  /* năm cỡ cách xa nhau, thêm cỡ khổng lồ tính riêng theo bề ngang từng khối */
  --co-nho: 0.75rem;                                        /* chú thích tí hon viết hoa */
  --co-ghi: 0.875rem;                                       /* ghi chú, nguồn ảnh */
  --co-than: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);       /* thân bài */
  --co-dan: clamp(1.125rem, 1.05rem + 0.5vw, 1.5rem);       /* câu dẫn */
  --co-phan: clamp(1.25rem, 1.05rem + 1vw, 2rem);           /* tiêu đề phần */
  --co-chuong: clamp(1.75rem, 1.1rem + 3.4vw, 4rem);        /* tiêu đề chương */

  --margin: clamp(1rem, 3.4vw, 4rem);
  --le: max(var(--margin), calc((100vw - 1760px) / 2));
  --gutter: clamp(1rem, 2.5vw, 2.5rem);
  --khoang: clamp(4rem, 9vw, 9rem);
  --bo: 2px;

  --cao-hang: 44px;   /* hàng logo trên máy rất hẹp, cuộn đi mất */
  --cao-dau: 44px;    /* phần đầu trang luôn dính */
  --cao-ghim: var(--cao-dau);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --stagger-item: 70ms;
}
@media (min-width: 23.5em) { :root { --cao-hang: 0px; --cao-dau: 52px; } }
@media (min-width: 40em) { :root { --cao-dau: 64px; } }

/* ---------- ba nền: mọi thành phần chỉ đọc các biến này ---------- */
:root, [data-nen="ngà"] { --nen: var(--nga); --chu: var(--den); --chu-phu: #5B5853; --soi: rgb(11 11 12 / 0.2); --tieu-diem: var(--tim); --kh-than: #0B0B0C; --kh-mep: #0B0B0C; --kh-loa: #3A3A3E; }
[data-nen="đen"] { --nen: var(--den); --chu: #EFEDE8; --chu-phu: #ABA8A2; --soi: rgb(239 237 232 / 0.24); --tieu-diem: #9A8FF5; --kh-than: #19191C; --kh-mep: rgb(239 237 232 / 0.34); --kh-loa: #48484D; }
[data-nen="xám"] { --nen: var(--xam); --chu: var(--den); --chu-phu: #33312D; --soi: rgb(11 11 12 / 0.28); --tieu-diem: #3D2FA8; --kh-than: #0B0B0C; --kh-mep: #0B0B0C; --kh-loa: #3A3A3E; }
[data-nen] { background-color: var(--nen); color: var(--chu); }

/* ---------- nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; scrollbar-color: var(--den) var(--nga); scroll-padding-top: calc(var(--cao-ghim) + 0.75rem); -webkit-tap-highlight-color: rgb(108 92 231 / 0.18); }
:root:has([data-trang="huong-dan"]) { --cao-ghim: calc(var(--cao-dau) + 44px); }
a, button, summary { touch-action: manipulation; }
body { margin: 0; background: var(--nga); color: var(--chu); font-family: var(--phong-than); font-size: var(--co-than); line-height: 1.6; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; overflow-wrap: anywhere; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
b { font-weight: 600; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--tim); color: var(--trang); }
:focus-visible { outline: 3px solid var(--tieu-diem); outline-offset: 3px; }
main section[id] { scroll-margin-top: calc(var(--cao-dau) - var(--cao-ghim) - 0.75rem); }

/* Chữ khổng lồ. Hàng dấu tiếng Việt cao tới 1 em, chấm nặng thò xuống 0,14 em: khoảng dòng 1,18 là đủ để dấu hai dòng không đè nhau */
h1, h2, .phan__ten { font-family: var(--phong-lon); font-weight: 200; letter-spacing: -0.01em; line-height: 1.24; text-transform: uppercase; text-wrap: balance; hyphens: none; overflow-wrap: normal; }
h2 { font-size: var(--co-chuong); }
h1, .o__ten, .cai > h2, #quanh-day h2, .thu__mail, .hoi__dau h2, .cuoi__ten { font-weight: 100; letter-spacing: -0.02em; line-height: 1.18; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
h3, h4 { font-size: var(--co-than); font-weight: 600; line-height: 1.35; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
p { max-width: 62ch; }
p + p { margin-top: 0.75em; }
figcaption, .chu-thich { font-size: var(--co-ghi); line-height: 1.5; color: var(--chu-phu); }
.nho { font-size: max(0.9375rem, var(--co-ghi)); line-height: 1.5; color: var(--chu-phu); }
/* chú thích tí hon như video: chỉ dùng cho nhãn một hai từ, câu dài luôn viết thường */
.nhan, .muc-luc__ten, .o__hop, .hoi__nhom, .viet h3, .them > summary, .tu-lam__ds h3 { font-family: var(--phong-than); font-size: var(--co-nho); font-weight: 600; letter-spacing: 0.14em; line-height: 1.5; text-transform: uppercase; }
.only-js { display: none; }
.js .only-js { display: inline; }
.only-js-nut { display: none; }
.js .only-js-nut { display: inline-flex; }

.bo-qua { position: fixed; left: var(--le); top: 8px; z-index: 40; max-width: calc(100vw - 2 * var(--le)); padding: 0.6em 1em; background: var(--den); color: var(--nga); transform: translateY(-200%); }
.bo-qua:focus { transform: none; }

/* đường cong sợi tóc của video: vẽ trong một khung kéo giãn, nét luôn đúng 1px */
.cong { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; fill: none; stroke: var(--chu); stroke-opacity: 0.32; stroke-width: 1; pointer-events: none; }
.cong path { vector-effect: non-scaling-stroke; }
.tieu-de .cong { bottom: auto; height: 36vw; }
.chon .cong { bottom: auto; height: 56vw; }

/* ---------- hai kiểu nút ---------- */
.nut { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 52px; padding: 0.5em 1.5em; border: 1px solid transparent; border-radius: var(--bo); font-size: var(--co-than); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.nut:active { transform: scale(0.98); }
.nut--chinh { background: var(--tim); color: var(--trang); }
[data-nen="xám"] .nut--chinh { background: var(--tim-dam); }
.nut--vien { background: transparent; color: var(--chu); border-color: var(--chu); }
.nut:disabled, .nut[aria-disabled="true"] { background: transparent; color: var(--chu-phu); border-color: var(--soi); cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .nut--chinh:hover { background: var(--tim-dam); }
  [data-nen="xám"] .nut--chinh:hover { background: #43359F; }
  .nut--vien:hover { background: var(--chu); border-color: var(--chu); color: var(--nen); }
  .nut:disabled:hover, .nut[aria-disabled="true"]:hover { background: transparent; color: var(--chu-phu); border-color: var(--soi); }
  a:not(.nut):hover { text-decoration-thickness: 2px; }
}
.mui::after { content: ""; flex: none; display: inline-block; width: 1.1em; height: 1.1em; margin-left: 0.4em; vertical-align: -0.2em; background: currentColor; -webkit-mask: var(--mui) center / contain no-repeat; mask: var(--mui) center / contain no-repeat; }
:root { --mui: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }

/* ---------- đầu trang: logo nhỏ và bốn mục, giống hệt nhau ở bốn trang ---------- */
.dau { position: sticky; top: calc(var(--cao-hang) * -1); z-index: 30; padding-inline: var(--le); transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.logo { display: flex; align-items: center; gap: 0.5rem; min-height: var(--cao-hang); font-size: var(--co-ghi); font-weight: 600; line-height: 1.1; text-decoration: none; }
.logo img { flex: none; width: 26px; height: 26px; max-width: none; }
.logo:focus-visible { outline-offset: 2px; }
.dau__nut { display: none; } /* HTML trang Giới thiệu cũ còn nút này; đầu trang mới chỉ có logo và bốn mục */
.menu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.25rem; }
.menu a { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--cao-dau); font-size: clamp(0.75rem, 3.5vw, 0.8125rem); line-height: 1.1; text-decoration: none; white-space: nowrap; }
.menu a[aria-current="page"] { font-weight: 600; }
/* chấm nhỏ màu thương hiệu dưới mục đang xem, không chiếm chỗ của chữ */
.cham { position: absolute; left: 50%; bottom: calc(50% - 1.05em); width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--tim); opacity: 0; transition: opacity var(--t-hover) ease; }
[data-nen="đen"] .cham { background: var(--tieu-diem); }
[aria-current="page"] > .cham { opacity: 1; }
.menu a:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { text-decoration: none; } .menu a:hover > .cham { opacity: 1; } }
.chi-rong { display: none; }
@media (min-width: 23.5em) {
  .dau { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--cao-dau); }
  .logo { flex: none; min-height: 44px; }
  .logo span { display: none; }
  .menu { flex: 0 1 19rem; }
}
@media (min-width: 40em) {
  .logo span { display: inline; }
  .logo img { width: 30px; height: 30px; }
  .menu { flex: 0 1 auto; gap: 0 clamp(1.25rem, 2.6vw, 2.5rem); }
  .menu a { font-size: var(--co-ghi); }
}
@media (min-width: 62.5em) { .chi-rong { display: inline; } }

/* ---------- khung điện thoại: đổi sang ảnh khung dựng 3D thì chỉ sửa đúng khối biến này ---------- */
.khung-may {
  --kh-anh: none;
  --kh-tren: 1.05rem;
  --kh-phai: 0.375rem;
  --kh-duoi: 0.375rem;
  --kh-trai: 0.375rem;
  --kh-bo: 1.5rem;
  --kh-bo-man: 1.1rem;
  position: relative; display: block; width: min(100%, 18.75rem);
  padding: var(--kh-tren) var(--kh-phai) var(--kh-duoi) var(--kh-trai);
  border-radius: var(--kh-bo);
  background: var(--kh-than) var(--kh-anh) center / 100% 100% no-repeat;
  outline: 1px solid var(--kh-mep);
}
.khung-may::before { content: ""; position: absolute; left: 50%; top: 0.4rem; width: 2.25rem; height: 0.25rem; margin-left: -1.125rem; border-radius: 1rem; background: var(--kh-loa); }
.khung-may img { display: block; width: 100%; border-radius: 0.2rem 0.2rem var(--kh-bo-man) var(--kh-bo-man); background: var(--trang); }
/* ảnh chỉ là một phần màn hình: máy bị cắt ở đáy như vật thể trong video, không vẽ cạnh dưới */
.khung-may--cat { padding-bottom: 0; border-radius: var(--kh-bo) var(--kh-bo) 0 0; }
.khung-may--cat img { border-radius: 0.2rem 0.2rem 0 0; }
/* ảnh chụp trên máy tính: không có thân máy, chỉ một sợi tóc quanh ảnh */
.khung-man { display: block; padding: 0.375rem; outline: 1px solid var(--soi); }
.khung-man img { display: block; width: 100%; }

/* ---------- phần đầu Hướng dẫn ---------- */
.tieu-de { position: relative; padding: clamp(1.5rem, 4vw, 3rem) var(--le) clamp(2.5rem, 6vw, 5rem); overflow: hidden; overflow: clip; container-type: inline-size; }
.tieu-de__chu { position: relative; display: grid; }
.tieu-de h1 { grid-area: 1 / 1; font-size: calc((100vw - 2 * var(--le)) / 7.06); font-size: calc(100cqw / 7.06); margin-left: -0.04em; text-wrap: nowrap; }
.tieu-de h1 span { display: block; }
.tieu-de h1 span:last-child { text-align: right; margin-right: -0.02em; }
.tieu-de__chu p { margin-top: 1.5rem; font-size: var(--co-dan); line-height: 1.4; max-width: 34ch; }

/* ---------- mục lục ---------- */
.muc-luc { position: relative; padding: 0.75rem var(--le) 0; }
.muc-luc ol { counter-reset: muc; margin-top: 0.75rem; border-bottom: 1px solid var(--soi); }
.muc-luc ol > li { counter-increment: muc; border-top: 1px solid var(--soi); }
.muc-luc a { display: flex; align-items: center; min-height: 44px; text-decoration: none; line-height: 1.3; }
.muc-luc ol > li > a { min-height: 4rem; padding-block: 0.6rem; font-family: var(--phong-lon); font-size: clamp(0.9375rem, 0.8rem + 0.6vw, 1.25rem); font-weight: 200; text-transform: uppercase; }
.muc-luc ol > li > a::before { content: counter(muc); flex: none; width: 3rem; font-size: 1.75rem; font-weight: 200; line-height: 1; }
.muc-luc ul { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: -0.5rem; padding: 0 0 0.5rem 3rem; }
.muc-luc ul a { font-size: var(--co-ghi); color: var(--chu-phu); }
@media (hover: hover) and (pointer: fine) { .muc-luc a:hover { text-decoration: underline; } }

/* dãy số chương ở lề trái trên màn rộng: luôn biết mình ở đâu, bấm là tới. Màu đổi theo khối đang nằm dưới nó */
.muc-nho { display: none; }
@media (min-width: 81.25em) and (hover: hover) and (pointer: fine) {
  .js .muc-nho { position: fixed; left: 0; top: 50%; z-index: 20; display: block; width: var(--le); translate: 0 -50%; background: none; visibility: hidden; opacity: 0; transition: color var(--t-ui) ease, opacity var(--t-ui) ease, visibility var(--t-ui); }
  .js .muc-nho.hien { visibility: visible; opacity: 1; }
  .muc-nho ol { display: grid; justify-items: center; }
  .muc-nho a { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font-family: var(--phong-lon); font-size: 1rem; font-weight: 200; line-height: 1; text-decoration: none; }
  .muc-nho a::after { content: ""; position: absolute; left: 50%; bottom: 0.15rem; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--tieu-diem); opacity: 0; transition: opacity var(--t-hover) ease; }
  .muc-nho a.dang-xem::after, .muc-nho a:hover::after { opacity: 1; }
  .muc-nho a:focus-visible { outline-offset: -2px; }
}

/* ---------- chương ---------- */
.chuong { counter-increment: chuong; position: relative; padding: 0 var(--le) clamp(3.5rem, 7vw, 6rem); }
main { counter-reset: chuong; }
.chuong__dau { display: grid; gap: 0.5rem var(--gutter); padding-block: clamp(3rem, 8vw, 8rem) clamp(2rem, 4vw, 3.5rem); }
.chuong__dau::before { content: counter(chuong); font-family: var(--phong-lon); font-size: clamp(6.5rem, 4rem + 13vw, 15rem); font-weight: 100; letter-spacing: -0.04em; line-height: 1; margin-left: -0.05em; }
.chuong__dau h2 { max-width: 15em; }
.chuong__dau div p { margin-top: 1rem; font-size: var(--co-dan); line-height: 1.4; max-width: 34ch; }
.ghim { position: sticky; top: var(--cao-dau); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; height: 44px; margin: -44px calc(var(--le) * -1) 0; padding-inline: var(--le); border-bottom: 1px solid var(--soi); background: var(--nen); color: var(--chu); font-size: var(--co-ghi); font-weight: 600; text-decoration: none; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--t-ui) ease, visibility var(--t-ui); }
.ghim span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghim span:last-child { flex: none; font-weight: 400; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.ghim.hien { visibility: visible; opacity: 1; pointer-events: auto; }
.ghim:focus-visible { outline-offset: -2px; }

/* chương đen: chữ một dòng chạy hết màn, mặt la bàn sợi tóc của Quanh đây */
#quanh-day .chuong__dau { position: relative; margin-inline: calc(var(--le) * -1); padding-inline: var(--le); overflow: hidden; overflow: clip; container-type: inline-size; }
#quanh-day h2 { max-width: none; font-size: calc((100vw - 2 * var(--le)) / 6.6); font-size: calc(100cqw / 6.6); text-wrap: wrap; }
.la-ban { order: -1; justify-self: end; width: min(100%, 26rem); overflow: visible; fill: none; stroke: var(--chu); stroke-opacity: 0.42; stroke-width: 1; }
.la-ban text { fill: var(--chu); fill-opacity: 1; stroke: none; font-family: var(--phong-than); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-anchor: middle; dominant-baseline: central; text-transform: uppercase; }
.la-ban__cham { fill: var(--tieu-diem); stroke: none; }
.la-ban__vong { transform-origin: 0 0; }
#quanh-day .cong { display: none; }

/* các bước: số mảnh, sợi tóc, ảnh trong khung máy. Chữ thẳng hàng với ảnh */
.buoc { counter-reset: buoc; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); }
.buoc > li { counter-increment: buoc; display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 1.25rem; min-width: 0; padding-top: 1rem; border-top: 1px solid var(--soi); }
.buoc__chu { position: relative; padding-left: 3rem; }
.buoc__chu::before { content: counter(buoc); position: absolute; left: 0; top: -0.1em; font-family: var(--phong-lon); font-size: 2.25rem; font-weight: 200; line-height: 1; }
.buoc__chu .nho { margin-top: 0.5rem; }
/* tên nút ngắn không gãy đôi và dấu câu luôn đi cùng chữ; tên dài (lớp dai) vẫn xuống dòng an toàn ở màn hẹp */
@media (min-width: 19.9em) { .buoc__chu b:not(.dai), .can-biet b:not(.dai), .cai b:not(.dai) { white-space: nowrap; } }
.buoc__anh { min-width: 0; }
.buoc__anh .khung-man { max-width: 26rem; }
.buoc__anh--doi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.buoc__anh--doi .khung-may { --kh-bo: 1.15rem; --kh-bo-man: 0.8rem; width: 100%; }
.chu-thich { margin-top: 1.75rem; }
.can-biet { display: grid; gap: 1.5rem var(--gutter); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.can-biet > div { padding-top: 0.9rem; border-top: 1px solid var(--soi); }
.can-biet h3, .can-biet h4 { margin-bottom: 0.4rem; }
.can-biet p { line-height: 1.55; }
/* trên điện thoại khối ghi chú gập lại, mặc định đóng (trang.js); máy khác luôn mở, tắt JavaScript thì mở sẵn */
.them { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.them > .can-biet { margin-top: 0; }
.them > summary, .hoi summary { position: relative; display: flex; align-items: center; padding-right: 2.5rem; cursor: pointer; list-style: none; }
.them > summary { min-height: 52px; border-top: 1px solid var(--soi); }
.them[open] > summary { margin-bottom: 0.5rem; }
.hoi summary::-webkit-details-marker, .them > summary::-webkit-details-marker { display: none; }
.hoi summary::before, .hoi summary::after, .them > summary::before, .them > summary::after { content: ""; position: absolute; right: 0.25rem; top: 50%; width: 15px; height: 1px; background: currentColor; transition: transform var(--t-ui) var(--ease-out); }
.hoi summary::after, .them > summary::after { transform: rotate(90deg); }
.hoi details[open] summary::after, .them[open] > summary::after { transform: rotate(0deg); }
.hoi summary:focus-visible, .them > summary:focus-visible { outline-offset: -2px; }
.phan { margin-top: clamp(3rem, 6vw, 5rem); }
.phan + .phan { margin-top: clamp(4rem, 8vw, 7rem); }
.phan__ten { margin-bottom: 1.5rem; font-size: var(--co-phan); }
.phan > .can-biet { margin-top: 0; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.phan > .buoc + .can-biet { margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: 0; }
.ghi { max-width: 62ch; margin-bottom: 1.5rem; font-weight: 600; }
.chuong__cuoi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1.5rem; max-width: none; margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: 0.5rem; border-top: 1px solid var(--soi); }
.chuong__cuoi a { display: inline-flex; align-items: center; min-height: 44px; }
:target > .chuong__dau h2, .phan:target > .phan__ten { animation: nhac-cho 1.2s var(--ease-out); }
@keyframes nhac-cho { from { opacity: 0.45; } }

/* ---------- trang Tải và cài đặt ---------- */
.chon { position: relative; padding: clamp(1.5rem, 4vw, 3rem) var(--le) clamp(2.5rem, 5vw, 4rem); overflow: hidden; overflow: clip; container-type: inline-size; }
.chon__dau { position: relative; display: grid; gap: 1.5rem var(--gutter); }
.chon h1 { font-size: calc((100vw - 2 * var(--le)) / 4.52); font-size: calc(100cqw / 4.52); margin-left: -0.04em; text-wrap: nowrap; }
.chon h1 span { display: block; }
.chon__chu p { font-size: var(--co-dan); line-height: 1.4; max-width: 30ch; }
.qr { display: none; }

/* bốn lựa chọn: tên thiết bị mảnh cực lớn, tách nhau bằng sợi tóc, nút của máy đang dùng là nút chính */
.o-chon { position: relative; display: grid; margin-top: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--soi); container-type: inline-size; }
.o { border-top: 1px solid var(--soi); }
.o article { display: grid; gap: 0.5rem var(--gutter); padding-block: 1.5rem; }
.o__dau { display: grid; justify-items: start; gap: 0.25rem; }
.o__hop { display: none; align-items: center; gap: 0.6em; }
.o__hop::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tim); }
[data-may="iphone"] [data-cho="iphone"] .o__hop, [data-may="web"] [data-cho="web"] .o__hop, [data-may="may-tinh"] [data-cho="may-tinh"] .o__hop, [data-may="android"] [data-cho="android"] .o__hop { display: inline-flex; }
[data-may="iphone"] [data-cho="iphone"] .nut, [data-may="web"] [data-cho="web"] .nut, [data-may="may-tinh"] [data-cho="may-tinh"] .nut, [data-may="android"] [data-cho="android"] .nut { background: var(--tim); border-color: transparent; color: var(--trang); }
@media (hover: hover) and (pointer: fine) { [data-may="iphone"] [data-cho="iphone"] .nut:hover, [data-may="web"] [data-cho="web"] .nut:hover, [data-may="may-tinh"] [data-cho="may-tinh"] .nut:hover, [data-may="android"] [data-cho="android"] .nut:hover { background: var(--tim-dam); color: var(--trang); } }
.o__ten { font-size: calc((100vw - 2 * var(--le)) / 5.66); font-size: calc(100cqw / 5.66); margin-left: -0.04em; white-space: nowrap; }
.o__mo { max-width: 34ch; }
.o footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; margin-top: 0.5rem; }
.o__phu { display: inline-flex; align-items: center; min-height: 44px; font-size: max(0.9375rem, var(--co-ghi)); line-height: 1.3; }

.cai { display: grid; gap: 2rem var(--gutter); padding: var(--khoang) var(--le); container-type: inline-size; }
.cai > * { min-width: 0; }
.cai > h2 { grid-column: 1 / -1; font-size: calc((100vw - 2 * var(--le)) / 6.86); font-size: calc(100cqw / 6.86); margin-left: -0.04em; text-wrap: wrap; }
.cai__dan { font-size: var(--co-dan); line-height: 1.4; max-width: 30ch; }
.cai__chu > * + * { margin-top: 1rem; }
.cai h3 { font-family: var(--phong-lon); font-size: var(--co-phan); font-weight: 200; letter-spacing: -0.01em; line-height: 1.24; text-transform: uppercase; }
.cai .nho { max-width: 62ch; }
.cai__nut { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cai__nut .nut { flex: 1 1 auto; }
.cai__nut .nhan-cho { flex: 1 1 100%; }
.trang-thai { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.75rem; max-width: none; padding-block: 0.75rem; border-block: 1px solid var(--soi); font-size: var(--co-ghi); color: var(--chu-phu); line-height: 1.4; }
.trang-thai b { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--co-than); color: var(--chu); }
.trang-thai--mo b::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tieu-diem); }
.cai .trang-thai b { white-space: normal; }
/* dòng trạng thái, không nền không viền để không ai tưởng là nút */
.nhan-cho { display: inline-flex; align-items: center; gap: 0.6em; min-height: 44px; font-size: max(0.9375rem, var(--co-ghi)); line-height: 1.3; }
.nhan-cho::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tieu-diem); }
[data-trang-thai="cho-duyet"] [data-khi="mo-thu"], [data-trang-thai="mo-thu"] [data-khi="cho-duyet"] { display: none; }
.so { counter-reset: so; border-bottom: 1px solid var(--soi); }
.so li { counter-increment: so; position: relative; padding: 0.85rem 0 0.85rem 3rem; border-top: 1px solid var(--soi); line-height: 1.5; }
.so li::before { content: counter(so); position: absolute; left: 0; top: 0.65rem; font-family: var(--phong-lon); font-size: 1.75rem; font-weight: 200; line-height: 1; }
.cai__buoc > h3 { margin-bottom: 1rem; }
.cai__buoc .nho { margin-top: 1rem; }
.dia-chi { max-width: none; font-family: var(--phong-lon); font-size: calc((100vw - 2 * var(--le)) / 15.8); font-size: calc(100cqw / 15.8); font-weight: 100; letter-spacing: -0.02em; line-height: 1.3; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.dia-chi a { text-decoration: none; white-space: nowrap; overflow-wrap: normal; }
.cai__hinh figcaption { margin-top: 0.75rem; }
.cai__hinh--ba > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.5rem, 1.5vw, 1.25rem); align-items: start; }
.cai__hinh--ba .khung-may { --kh-tren: 0.75rem; --kh-phai: 0.25rem; --kh-duoi: 0.25rem; --kh-trai: 0.25rem; --kh-bo: 0.9rem; --kh-bo-man: 0.65rem; width: 100%; }
.cai__hinh--ba .khung-may::before { top: 0.28rem; width: 1.4rem; height: 0.18rem; margin-left: -0.7rem; }
.cai-web { margin-top: 1rem; }
.cai-web:empty { display: none; }
.cai__chu .cai__hinh { max-width: 30rem; }

/* ---------- trang Liên hệ: tối giản nhất, địa chỉ email là nhân vật chính ---------- */
.thu { position: relative; display: grid; min-height: min(calc(100vh - var(--cao-dau)), 52rem); min-height: min(calc(100svh - var(--cao-dau)), 52rem); padding: clamp(1.5rem, 4vw, 3rem) var(--le) clamp(2rem, 5vw, 4rem); overflow: hidden; overflow: clip; container-type: inline-size; }
.thu__chu { position: relative; display: grid; grid-template-rows: auto 1fr auto; row-gap: 1rem; }
.thu h1 { font-size: var(--co-phan); font-weight: 200; }
.thu__dan { margin-top: 0.5rem; font-size: var(--co-dan); line-height: 1.4; }
.thu__mail { align-self: center; max-width: none; font-size: calc((100vw - 2 * var(--le)) / 8.14); font-size: calc(100cqw / 8.14); margin-left: -0.03em; font-family: var(--phong-lon); }
.thu__mail a { display: inline-block; text-decoration: none; overflow-wrap: normal; }
.thu__mail span { display: block; white-space: nowrap; }
.thu__nut { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.viet, .tu-lam, .hoi, .luat { padding: var(--khoang) var(--le); }
.viet__cot { display: grid; gap: 2.5rem var(--gutter); margin-top: clamp(2rem, 4vw, 3.5rem); }
.viet h2, .tu-lam h2 { max-width: 15em; }
.viet h3 { padding-bottom: 0.75rem; }
.viet p { padding-top: 0.75rem; border-top: 1px solid var(--soi); }
.dau-cham { border-bottom: 1px solid var(--soi); }
.dau-cham li { padding-block: 0.65rem; border-top: 1px solid var(--soi); line-height: 1.5; }
.tu-lam { padding-bottom: 0; overflow: hidden; overflow: clip; }
.tu-lam .chu-thich { margin-top: 0; padding-block: 1.25rem; }
.tu-lam__ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem var(--gutter); margin-top: clamp(2rem, 4vw, 3.5rem); }
.tu-lam__ds a { display: block; height: 100%; text-decoration: none; }
.tu-lam__ds h3 { min-height: 3em; }
.tu-lam__ds .khung-may { --kh-bo: 1.15rem; height: min(62vw, 24rem); overflow: hidden; overflow: clip; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tu-lam__ds a:hover .khung-may { transform: translateY(-6px); } .tu-lam__ds a:hover h3 { text-decoration: underline; text-underline-offset: 0.3em; } }
.hoi__dau h2 { font-size: calc((100vw - 2 * var(--le)) / 5.2); }
.hoi__dau p { margin-top: 1rem; }
.hoi__dau .nut { margin-top: 0.75rem; }
.hoi__ds { margin-top: clamp(2rem, 4vw, 3rem); }
.hoi__nhom { margin-top: 2.75rem; padding-bottom: 0.75rem; }
.hoi__nhom:first-child { margin-top: 0; }
.hoi details { border-top: 1px solid var(--soi); }
.hoi details:last-child { border-bottom: 1px solid var(--soi); }
.hoi summary { min-height: 60px; padding-block: 0.7rem; font-size: var(--co-than); line-height: 1.35; }
.tra-loi { padding-bottom: 1.25rem; line-height: 1.6; }
.luat h2 { font-size: var(--co-phan); }
.luat__ds { margin-top: 1.5rem; border-bottom: 1px solid var(--soi); }
.luat__ds li { border-top: 1px solid var(--soi); }
.luat__ds a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding-block: 0.6rem; font-family: var(--phong-lon); font-size: var(--co-phan); font-weight: 200; letter-spacing: -0.01em; line-height: 1.24; text-decoration: none; text-transform: uppercase; }
.luat__ds a::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; background: currentColor; -webkit-mask: var(--mui) center / contain no-repeat; mask: var(--mui) center / contain no-repeat; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .luat__ds a:hover { text-decoration: none; } .luat__ds a:hover::after { transform: translateX(6px); } }

/* ---------- trang Giới thiệu: kiểu riêng của trang mới đặt ngay dưới đây hoặc tệp riêng cạnh trang.css.
   Khối mới chỉ cần data-nen; chữ khổng lồ dùng h1, h2 có sẵn, cỡ tính bằng 100cqw trên khối đặt container-type: inline-size.
   Trang cũ tạm sống bằng trang-tam.css, làm lại trang thì bỏ dòng nạp tệp đó và xoá tệp. ---------- */

/* ---------- chân trang: giống hệt nhau ở bốn trang ---------- */
.cuoi { padding: var(--khoang) var(--le) 1.5rem; overflow: hidden; overflow: clip; container-type: inline-size; }
.cuoi__tren { display: grid; gap: 2.5rem var(--gutter); }
.cuoi__gt p { max-width: 26ch; font-size: var(--co-dan); line-height: 1.4; }
.cuoi__gt .nut { margin-top: 1.25rem; }
.cuoi__lk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
.cuoi__lk a { display: flex; align-items: center; min-height: 44px; line-height: 1.25; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cuoi__lk a:hover { text-decoration: underline; text-underline-offset: 0.3em; } }
/* tên app khổng lồ. Cỡ tính theo khối chứa, luôn vừa khít một hàng; text-size-adjust giữ nguyên cỡ khi iPhone phóng chữ 200% */
.cuoi__ten { max-width: none; margin-top: clamp(3rem, 7vw, 6rem); font-family: var(--phong-lon); font-size: calc((100vw - 2 * var(--le)) / 12.4); font-size: calc(100cqw / 12.4); margin-left: -0.03em; white-space: nowrap; text-transform: uppercase; }
@media (max-width: 62.49em) {
  .cuoi__ten span { display: block; }
  .cuoi__ten span:first-child { font-size: calc((100vw - 2 * var(--le)) / 4.78); font-size: calc(100cqw / 4.78); }
  .cuoi__ten span:last-child { font-size: calc((100vw - 2 * var(--le)) / 7.3); font-size: calc(100cqw / 7.3); }
}
.cuoi__ghi { display: grid; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--soi); font-size: var(--co-ghi); line-height: 1.5; color: var(--chu-phu); }
.cuoi__ghi p { margin: 0; }
.cuoi__ghi b { margin-right: 0.35em; color: var(--chu); }
.cuoi__ghi a { color: var(--chu); padding-block: 13px; }

/* ---------- từ 640px ---------- */
@media (min-width: 40em) {
  .buoc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buoc > li:has(> .buoc__anh--doi) { grid-column: 1 / -1; }
  .can-biet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .can-biet--ba { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .them > summary { display: none; }
  .cai__nut .nut { flex: none; }
  .cai__nut .nhan-cho { flex: none; }
  .chon .cong { height: 30vw; }
  .chon h1 { font-size: calc((100vw - 2 * var(--le)) / 8.36); font-size: calc(100cqw / 8.36); }
  .chon h1 span { display: inline; }
  #quanh-day .chuong__dau { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: clamp(2rem, 4vw, 3.5rem); }
  #quanh-day .chuong__dau::before { grid-column: 1; grid-row: 1; align-self: start; }
  #quanh-day .chuong__dau > div { grid-column: 1 / -1; grid-row: 2; margin-top: 1rem; }
  .la-ban { grid-column: 2; grid-row: 1; order: 0; }
  .o__ten { font-size: calc((100vw - 2 * var(--le)) / 10); font-size: calc(100cqw / 10); }
  .o article { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); padding-block: 1.75rem; align-items: center; }
  .o__dau { grid-row: 1 / 3; }
  .o footer { margin-top: 0; }
  .viet__cot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tu-lam__ds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tu-lam__ds .khung-may { height: min(34vw, 26rem); }
  .thu__mail { font-size: calc((100vw - 2 * var(--le)) / 8.14); font-size: calc(100cqw / 8.14); }
  .cuoi__tren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* máy bảng dọc: bước lẻ cuối hàng dùng cả hàng, chữ một bên ảnh một bên */
@media (min-width: 40em) and (max-width: 62.49em) {
  .buoc > li:nth-child(odd):not(:has(> .buoc__anh--doi)):last-child, .buoc > li:nth-child(odd):has(+ li > .buoc__anh--doi) { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .buoc > li:nth-child(odd):not(:has(> .buoc__anh--doi)):last-child > .buoc__chu, .buoc > li:nth-child(odd):has(+ li > .buoc__anh--doi) > .buoc__chu { grid-area: 1 / 1 / 3 / 2; }
  .buoc > li:nth-child(odd):not(:has(> .buoc__anh--doi)):last-child > .buoc__anh, .buoc > li:nth-child(odd):has(+ li > .buoc__anh--doi) > .buoc__anh { grid-area: 1 / 2 / 3 / 3; }
}

/* ---------- từ 1000px ---------- */
@media (min-width: 62.5em) {
  .tieu-de .cong { height: 100%; bottom: 0; }
  .tieu-de__chu p { grid-area: 1 / 1; align-self: end; max-width: calc(100cqw * 0.235); margin: 0 0 3.5cqw; font-size: var(--co-than); line-height: 1.5; }

  .muc-luc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .muc-luc__ten { grid-column: 1 / 4; }
  .muc-luc ol { grid-column: 4 / -1; margin-top: 0; }

  .chuong__dau { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .chuong__dau::before { grid-column: 1 / 4; }
  .chuong__dau > div { grid-column: 4 / -1; }
  /* chương chẵn đảo số sang phải, tránh mọi chương cùng một dáng */
  #ho-so .chuong__dau::before, #ket-noi .chuong__dau::before { grid-column: 10 / -1; grid-row: 1; justify-self: end; margin: 0 -0.02em 0 0; }
  #ho-so .chuong__dau > div, #ket-noi .chuong__dau > div { grid-column: 1 / 10; grid-row: 1; }

  #quanh-day .chuong__dau { grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: calc(100vh - var(--cao-dau)); min-height: calc(100svh - var(--cao-dau)); align-content: space-between; }
  #quanh-day .chuong__dau::before { grid-column: 1 / 5; }
  #quanh-day h2 { font-size: calc(100cqw / 9.06); white-space: nowrap; }
  #quanh-day .cong { display: block; bottom: auto; height: 56%; stroke-opacity: 0.26; }
  .la-ban { grid-column: 6 / -1; width: min(100%, calc(100vh - 30rem), 34rem); min-width: 16rem; }

  .buoc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buoc:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buoc > li:has(> .buoc__anh--doi), .buoc > li:nth-child(3n + 2):has(+ li > .buoc__anh--doi) { grid-template-columns: subgrid; }
  .buoc > li:nth-child(3n + 2):has(+ li > .buoc__anh--doi) { grid-column: span 2; }
  .buoc > li:has(> .buoc__anh--doi) > .buoc__chu, .buoc > li:nth-child(3n + 2):has(+ li > .buoc__anh--doi) > .buoc__chu { grid-area: 1 / 1 / 3 / 2; }
  .buoc > li:has(> .buoc__anh--doi) > .buoc__anh { grid-area: 1 / 2 / 3 / 4; }
  .buoc > li:nth-child(3n + 2):has(+ li > .buoc__anh--doi) > .buoc__anh { grid-area: 1 / 2 / 3 / 3; }
  .buoc__anh--doi { max-width: 39.5rem; }

  .can-biet { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .chon__dau { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .chon h1 { grid-column: 1 / -1; }
  .o__ten { font-size: calc(100cqw / 9.6); }
  .o article { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .o__dau { grid-column: 1 / 8; }
  .o__mo { grid-column: 8 / -1; align-self: end; }
  .o footer { grid-column: 8 / -1; align-self: start; }

  .cai { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 3.5rem; align-items: start; }
  .cai > h2 { font-size: calc(100cqw / 9.2); }
  .cai__chu { grid-column: 1 / 6; }
  .cai__buoc, .cai__hinh { grid-column: 7 / -1; }
  .cai__chu .cai__hinh { max-width: none; }
  .dia-chi { font-size: calc(100cqw * 0.4 / 15.8); }

  .thu__mail { font-size: calc(100cqw / 15.1); }
  .thu__mail span { display: inline; }
  .thu__nut { margin-top: 0.5rem; }

  .viet h2, .tu-lam h2 { grid-column: 1 / -1; }
  .hoi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .hoi__dau { grid-column: 1 / 6; position: sticky; top: calc(var(--cao-dau) + 2rem); }
  .hoi__dau h2 { font-size: min(calc((100vw - 2 * var(--le)) * 0.4 / 4.9), 7rem); }
  .hoi__ds { grid-column: 6 / -1; margin: 0; }
  .luat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .luat h2 { grid-column: 1 / 6; }
  .luat__ds { grid-column: 6 / -1; margin: 0; }

  .cuoi__tren { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cuoi__gt { grid-column: 1 / 7; }
  .cuoi__lk { grid-column: 7 / -1; }
  .cuoi__ghi { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }
}

/* máy tính có chuột: hiện mã QR để mở trang trên điện thoại */
@media (min-width: 62.5em) and (hover: hover) and (pointer: fine) {
  .qr { display: flex; align-items: center; gap: 1rem; max-width: 22rem; }
  .qr img { flex: none; width: 108px; height: 108px; }
  .qr p { font-size: var(--co-ghi); line-height: 1.45; }
}

/* ngang điện thoại: màn thấp, chữ khổng lồ không được ăn hết màn */
@media (orientation: landscape) and (max-height: 520px) {
  .thu { min-height: 0; }
  .thu__mail { margin-block: 1rem; font-size: calc(100cqw / 15.1); }
  .thu__mail span { display: inline; }
  #quanh-day .chuong__dau { min-height: 0; }
}

/* ---------- chuyển động: mọi trạng thái ẩn nằm trong no-preference ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* đường cong tự vẽ lúc vào trang, chữ rõ dần, chưa tới 1,2 giây là yên */
  .js .cong { clip-path: inset(-2% 100% -2% -2%); animation: ve-cong 1500ms var(--ease-in-out) 100ms forwards; }
  .js [data-load] { opacity: 0; transform: translateY(14px); animation: rise-in 700ms var(--ease-expo) forwards; animation-delay: var(--d); }
  /* chữ đang đọc không bao giờ biến mất, chỉ ảnh trồi nhẹ một lần */
  .js [data-in] { opacity: 0.6; transform: translateY(16px); transition: opacity 300ms var(--ease-out) calc(var(--d, 0) * var(--stagger-item)), transform 500ms var(--ease-expo) calc(var(--d, 0) * var(--stagger-item)); }
  .js [data-in].is-in { opacity: 1; transform: none; }
  .js [data-trang="huong-dan"] [data-in] { opacity: 1; transform: none; transition: none; }
  .js [data-trang="huong-dan"] [data-in] .buoc__anh { opacity: 0.6; transform: translateY(24px); transition: opacity 300ms var(--ease-out), transform 700ms var(--ease-expo); }
  .js [data-trang="huong-dan"] [data-in].is-in .buoc__anh { opacity: 1; transform: none; }

  /* cuộn tới đâu số chương và vòng la bàn trôi tới đó, gợi cuộn phim của trang Giới thiệu; máy chưa hỗ trợ thì đứng yên */
  @supports (animation-timeline: view()) {
    .chuong__dau::before { animation: troi linear both; animation-timeline: view(); animation-range: cover; }
    .la-ban__vong { animation: xoay linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes rise-in { to { opacity: 1; transform: none; } }
@keyframes ve-cong { to { clip-path: inset(-2% -2% -2% -2%); } }
@keyframes troi { from { translate: 0 1.2rem; } to { translate: 0 -1.2rem; } }
@keyframes xoay { from { rotate: -24deg; } to { rotate: 24deg; } }
@media (prefers-reduced-motion: reduce) {
  .nut, .hoi summary::after, .hoi summary::before, .them > summary::after, .them > summary::before, .tu-lam__ds .khung-may, .luat__ds a::after { transition: none; }
  .tu-lam__ds a:hover .khung-may, .luat__ds a:hover::after { transform: none; }
}
@media print {
  .dau, .cuoi, .ghim, .muc-luc, .muc-nho, .cong, .la-ban { display: none; }
  [data-nen] { background: #fff; color: #000; }
}