/* ══════════════════════════════════════════════════════════════════
   Trang chủ Ngàn Thông — bản sáng, màu lấy từ logo

   Đo màu thẳng trên file logo.png (171 × 183):
     · xanh lá  #24843C — 15 % số điểm ảnh, vòng lá thông  → MÀU CHỦ ĐẠO
     · đỏ       #CC1824 —  8 % số điểm ảnh, chiếc nơ       → màu nhấn / nút
     · kem      #F0F0C0 —  1 %, đĩa nền trong logo         → nền trang
   Nền trắng kem, chữ xanh thông, nút đỏ. Không dùng khối nền đen.

   LUẬT VIẾT CSS Ở ĐÂY: mọi luật nền tảng (a, h1-h3, p…) đặt trong
   :where() để có độ ưu tiên BẰNG 0. Trước đây viết ".nt-home a"
   (0,1,1) nên nó đè lên ".nt-btn" (0,1,0) — nút đỏ hiện chữ đen,
   đo được 2,36:1 trong khi mức tối thiểu là 4,5:1. Dùng :where()
   là cả lớp lỗi đó biến mất, không phải đi vá từng chỗ.
   ══════════════════════════════════════════════════════════════════ */

@property --nt-sweep { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
	/* xanh thông — thang màu dựng quanh #24843C của logo */
	--g-950: #071a0e;
	--g-900: #0c2e17;
	--g-800: #124121;
	--g-700: #17572c;
	--g-600: #1d6e37;
	--g-500: #24843c;   /* ← đúng màu logo */
	--g-400: #4ca45e;
	--g-300: #86c294;
	--g-200: #bfdfc7;
	--g-100: #e1f0e5;
	--g-50:  #f1f8f3;

	/* đỏ — chiếc nơ trên logo */
	--r-700: #8f0f1a;
	--r-600: #a81220;
	--r-500: #cc1824;   /* ← đúng màu logo */
	--r-400: #e0323e;
	--r-50:  #fdedee;

	/* kem — đĩa nền trong logo, đã hạ độ bão hoà */
	--cream:   #fbf9f0;
	--cream-2: #f4f1e2;
	--paper:   #ffffff;
	--line:    #e6e2d2;
	--line-2:  #d3ccb6;

	--gold: #b8860f;      /* dùng cho ĐƯỜNG KẺ, viền, icon — không dùng cho chữ */
	--gold-chu: #8a6209;  /* gold đủ đậm để làm chữ: 5,48:1 trên trắng, 5,20:1 trên kem
	                         (bản #b8860f chỉ được 3,25:1 — thiếu chuẩn AA) */

	--ink:   #14261a;
	--ink-2: #43574a;
	--ink-3: #64776b;   /* 4,64:1 trên nền kem — đủ chuẩn AA cho chữ nhỏ */

	--wrap: 1200px;
	--r-s: 10px;
	--r-m: 16px;
	--r-l: 22px;
	--r-xl: 30px;

	--sh-1: 0 1px 2px rgb(12 46 23 / .05), 0 4px 14px rgb(12 46 23 / .06);
	--sh-2: 0 2px 8px rgb(12 46 23 / .07), 0 18px 40px rgb(12 46 23 / .10);
	--sh-3: 0 20px 60px rgb(12 46 23 / .18);

	--ease: cubic-bezier(.22, .8, .28, 1);

	--f-txt: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--f-dis: 'Playfair Display', 'Times New Roman', Georgia, serif;

	--head-h: 74px;
}

/* ── nền tảng (độ ưu tiên 0, xem ghi chú đầu file) ────────────── */

html:has(body.nt-home) { overflow-x: clip; }

.nt-home :where(*, *::before, *::after) { box-sizing: border-box; }

.nt-home {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--f-txt);
	font-size: 16.5px;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .nt-home { scroll-behavior: auto; } }

.nt-home :where(img) { max-width: 100%; height: auto; display: block; }
.nt-home :where(a) { color: inherit; text-decoration: none; }
.nt-home :where(h1, h2, h3) {
	margin: 0; font-family: var(--f-dis); font-weight: 700;
	line-height: 1.16; letter-spacing: -.015em; color: var(--g-900);
	text-wrap: balance;
}
.nt-home :where(p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
.nt-home :where(ul, ol) { list-style: none; }
.nt-home :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.nt-home :where(input, select) { font: inherit; color: inherit; }

.nt-home :focus-visible { outline: 3px solid var(--g-500); outline-offset: 3px; border-radius: 5px; }

.nt-skip {
	position: fixed; inset-inline-start: 12px; top: -100px; z-index: 999;
	background: var(--g-800); color: #fff; padding: 12px 20px;
	border-radius: 0 0 var(--r-s) var(--r-s); font-weight: 600;
	transition: top .2s var(--ease);
}
.nt-skip:focus { top: 0; }

.nt-wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.nt-i { flex: none; }

/* ── nút ──────────────────────────────────────────────────────── */

.nt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 13px 24px; border-radius: 999px;
	background: var(--r-500); color: #fff; border: 1.5px solid var(--r-500);
	font-weight: 600; font-size: .95rem; line-height: 1.35;
	box-shadow: 0 6px 18px rgb(204 24 36 / .2);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
	position: relative; overflow: hidden; isolation: isolate;
}
.nt-btn::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .26) 50%, transparent 70%);
	translate: calc(-120% + var(--nt-sweep)) 0;
	transition: --nt-sweep .7s var(--ease);
}
.nt-btn:hover { background: var(--r-600); border-color: var(--r-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgb(204 24 36 / .28); --nt-sweep: 240%; }
.nt-btn:active { transform: translateY(0); }

.nt-btn--lg { padding: 16px 30px; font-size: 1.02rem; }
.nt-btn--sm { padding: 10px 18px; font-size: .88rem; }

.nt-btn--out {
	background: var(--paper); color: var(--g-800); border-color: var(--line-2);
	box-shadow: var(--sh-1);
}
.nt-btn--out:hover { background: var(--paper); color: var(--g-900); border-color: var(--g-500); box-shadow: var(--sh-2); }

.nt-btn--green { background: var(--g-600); border-color: var(--g-600); box-shadow: 0 6px 18px rgb(29 110 55 / .22); }
.nt-btn--green:hover { background: var(--g-700); border-color: var(--g-700); box-shadow: 0 12px 26px rgb(29 110 55 / .3); }

/* ── thanh trên cùng ──────────────────────────────────────────── */

.nt-topbar { background: var(--g-900); color: var(--g-200); font-size: .8rem; }
.nt-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; }
.nt-topbar p { display: flex; align-items: center; gap: 8px; }
.nt-topbar .nt-i { color: var(--g-300); }
.nt-topbar__right { gap: 18px; }
.nt-topbar a { display: inline-flex; align-items: center; min-height: 30px; padding-block: 4px; }
.nt-topbar a { color: var(--g-100); }
.nt-topbar a:hover { color: #fff; }

/* Máy nhỏ: giấu hẳn dòng địa bàn chứ đừng chỉ giấu chữ — giấu chữ thì
   còn trơ lại mỗi cái ghim, trông như lỗi. */
@media (max-width: 820px) {
	.nt-topbar .nt-topbar__note { display: none; }
	.nt-topbar__in { justify-content: center; }
}

/* ── header ───────────────────────────────────────────────────── */

.nt-head {
	position: sticky; top: 0; z-index: 90;
	background: color-mix(in srgb, var(--cream) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s, box-shadow .3s, background .3s;
}
.nt-head.is-stuck { border-color: var(--line); box-shadow: var(--sh-1); background: color-mix(in srgb, var(--cream) 96%, transparent); }

.nt-head .nt-wrap { width: min(100% - 32px, 1460px); }
.nt-head__in { display: flex; align-items: center; gap: 18px; min-height: var(--head-h); }

.nt-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.nt-brand__logo { width: 44px; height: auto; }
.nt-brand__txt { display: grid; line-height: 1.14; }
.nt-brand__txt b { font-family: var(--f-dis); font-size: 1.3rem; color: var(--g-900); letter-spacing: -.02em; }
.nt-brand__txt i { font-style: normal; font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.nt-burger { display: none; padding: 8px; color: var(--g-800); }

.nt-nav { margin-inline: auto; }
.nt-nav__l1 { display: flex; align-items: center; gap: 0; position: relative; }
.nt-nav__item > a {
	display: block; padding: 10px 11px; border-radius: 999px;
	font-weight: 600; font-size: .9rem; white-space: nowrap; color: var(--ink-2);
	transition: background .2s, color .2s;
}
.nt-nav__item > a:hover { background: var(--g-100); color: var(--g-900); }
.nt-nav__item--mob { display: none; }
.nt-nav__toggle { display: none; }

.nt-nav__item--has { position: relative; }
.nt-nav__item--has > a::after {
	content: ''; display: inline-block; vertical-align: middle;
	width: 5px; height: 5px; margin-inline-start: 7px; margin-block-start: -3px;
	border-inline-end: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor;
	rotate: 45deg; opacity: .5;
}

/* mega menu */
.nt-mega {
	position: absolute; inset-inline-start: 50%; top: calc(100% + 10px);
	translate: -50% 0;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(-8px);
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
	z-index: 5;
}
.nt-nav__item--has:hover .nt-mega,
.nt-nav__item--has:focus-within .nt-mega,
.nt-nav__item--has.is-open .nt-mega {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nt-mega::before { content: ''; position: absolute; inset-inline: 0; top: -12px; height: 12px; }
.nt-mega__in { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-2); padding: 18px; }
.nt-mega--1 .nt-mega__in { width: 470px; }

/* Bảng rộng bám cả thanh menu chứ không bám một mục — bám vào mục thì
   ở mục lệch trái nó thò ra ngoài màn hình (đo được mép trái -117px). */
.nt-nav__item--wide { position: static; }
.nt-mega--wide { inset-inline: 0; translate: 0; }
.nt-mega--wide .nt-mega__in { width: auto; }

.nt-mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 24px; }
.nt-mega__col { min-width: 0; }
.nt-mega__head {
	display: flex; align-items: center; gap: 6px;
	font-family: var(--f-dis); font-size: 1.02rem; font-weight: 700; color: var(--g-900);
	padding: 6px 8px 9px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.nt-mega__head .nt-i { transition: translate .2s var(--ease); }
.nt-mega__head:hover { color: var(--r-600); }
.nt-mega__head:hover .nt-i { translate: 3px 0; }

.nt-mega__list { display: grid; gap: 1px; max-height: min(56vh, 420px); overflow: auto; scrollbar-width: thin; }
.nt-mega__list--2 { grid-template-columns: 1fr 1fr; gap: 1px 10px; }
.nt-mega__list a {
	display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px;
	font-size: .875rem; line-height: 1.4; color: var(--ink-2);
	transition: background .15s, color .15s;
}
.nt-mega__list a:hover { background: var(--g-100); color: var(--g-900); }
.nt-mega__list .nt-i { color: var(--g-500); }

.nt-head__cta { display: flex; align-items: center; gap: 14px; flex: none; margin-inline-start: auto; }

.nt-hotline { display: flex; align-items: center; gap: 10px; }
.nt-hotline__ic {
	display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: var(--r-50); color: var(--r-600);
	animation: nt-ring 3.4s var(--ease) infinite;
}
.nt-hotline__txt { display: grid; line-height: 1.2; }
.nt-hotline__txt b { font-size: 1rem; font-weight: 700; color: var(--r-600); }
.nt-hotline__txt i { font-style: normal; font-size: .7rem; color: var(--ink-3); }

@keyframes nt-ring {
	0%, 74%, 100% { rotate: 0deg; }
	78% { rotate: -12deg; } 82% { rotate: 12deg; }
	86% { rotate: -9deg; }  90% { rotate: 9deg; } 94% { rotate: 0deg; }
}

@media (max-width: 1560px) { .nt-hotline__txt i { display: none; } }
@media (max-width: 1420px) { .nt-hotline__txt { display: none; } }

/* ── header trên máy nhỏ ──────────────────────────────────────── */

@media (max-width: 1259px) {
	/* Menu tụt xuống hàng riêng ⇒ hàng header phải xuống dòng được.
	   Thiếu flex-wrap thì menu bị bóp còn ~90px và logo biến mất. */
	.nt-head__in { flex-wrap: wrap; }
	.nt-burger { display: block; order: 3; }
	.nt-head__cta { order: 2; margin-inline-start: auto; }
	.nt-head__cta .nt-btn { display: none; }

	.nt-nav {
		order: 4; flex-basis: 100%; margin: 0;
		display: grid; grid-template-rows: 0fr;
		transition: grid-template-rows .35s var(--ease);
	}
	.nt-nav.is-open { grid-template-rows: 1fr; }
	.nt-nav__l1 { display: block; overflow: hidden; min-height: 0; }
	.nt-nav.is-open .nt-nav__l1 { padding-bottom: 14px; }

	.nt-nav__item, .nt-nav__item--wide { border-top: 1px solid var(--line); position: relative; }
	.nt-nav__item > a { padding: 14px 4px; border-radius: 0; font-size: 1.02rem; font-weight: 600; color: var(--g-900); }
	.nt-nav__item--has > a::after { display: none; }
	.nt-nav__item--mob { display: block; }

	.nt-nav__toggle { display: block; position: absolute; inset-inline-end: 0; top: 4px; width: 44px; height: 44px; }
	.nt-nav__toggle::before, .nt-nav__toggle::after {
		content: ''; position: absolute; inset-inline: 15px; top: 21px; height: 1.8px;
		background: var(--g-800); border-radius: 2px; transition: rotate .25s var(--ease), opacity .25s;
	}
	.nt-nav__toggle::after { rotate: 90deg; }
	.nt-nav__item.is-open .nt-nav__toggle::after { rotate: 0deg; opacity: 0; }

	.nt-mega {
		position: static; translate: 0; transform: none; opacity: 1; visibility: visible;
		display: grid; grid-template-rows: 0fr; pointer-events: auto;
		transition: grid-template-rows .3s var(--ease);
	}
	.nt-nav__item--has:hover .nt-mega { grid-template-rows: 0fr; }
	.nt-nav__item.is-open .nt-mega { grid-template-rows: 1fr; }
	.nt-mega__in { width: auto !important; min-height: 0; overflow: hidden; border: 0; box-shadow: none; background: none; padding: 0 0 0 6px; }
	.nt-mega__cols { grid-template-columns: 1fr; gap: 4px; }
	.nt-mega__list, .nt-mega__list--2 { grid-template-columns: 1fr; max-height: none; overflow: visible; padding-bottom: 8px; }
	.nt-mega__head { font-size: .95rem; padding: 10px 8px 6px; }
}

@media (max-width: 560px) {
	.nt-head__in { gap: 10px; }
	.nt-brand__logo { width: 38px; }
	.nt-brand__txt b { font-size: 1.12rem; }
	.nt-brand__txt i { font-size: .57rem; letter-spacing: .06em; }
	.nt-hotline__ic { width: 34px; height: 34px; }
	.nt-burger { padding: 6px; }
}

/* ── hero ─────────────────────────────────────────────────────── */

.nt-hero { padding: clamp(40px, 5vw, 76px) 0 clamp(34px, 4vw, 56px); position: relative; overflow: hidden; }
.nt-hero::before {
	content: ''; position: absolute; inset: -30% -20% auto; height: 92%; z-index: -1; pointer-events: none;
	background:
		radial-gradient(46rem 30rem at 10% 0%, color-mix(in srgb, var(--g-400) 22%, transparent), transparent 62%),
		radial-gradient(40rem 26rem at 90% 14%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 64%);
	filter: blur(8px);
}

.nt-hero__in { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (max-width: 980px) { .nt-hero__in { grid-template-columns: 1fr; gap: 36px; } }

.nt-hero__kicker {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 16px; border-radius: 999px;
	background: var(--paper); border: 1px solid var(--line);
	color: var(--g-700); box-shadow: var(--sh-1);
	font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
}
.nt-hero__kicker .nt-i { color: var(--g-500); }

.nt-hero__h1 { margin-top: 22px; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; max-width: 17ch; }
.nt-hero__h1 span { color: var(--g-600); position: relative; }
.nt-hero__h1 span::after {
	content: ''; position: absolute; inset-inline: 0; bottom: .04em; height: .1em;
	background: color-mix(in srgb, var(--g-300) 75%, transparent); border-radius: 2px; z-index: -1;
}

.nt-hero__sub { margin-top: 20px; max-width: 48ch; font-size: 1.06rem; color: var(--ink-2); text-wrap: pretty; }
.nt-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 420px) { .nt-hero__btns .nt-btn { flex: 1 1 100%; } }

.nt-proof {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
	margin-top: clamp(30px, 4vw, 44px); padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--line);
}
@media (max-width: 760px) { .nt-proof { grid-template-columns: 1fr; gap: 18px; } }
.nt-proof li { display: grid; gap: 4px; align-content: start; }
.nt-proof b { font-family: var(--f-dis); font-size: 1.5rem; color: var(--g-800); line-height: 1.15; }
.nt-proof i { font-style: normal; font-size: .84rem; color: var(--ink-3); line-height: 1.5; }
.nt-proof a {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
	padding-block: 6px; min-height: 32px;
	font-size: .82rem; font-weight: 700; color: var(--r-600);
}
.nt-proof a .nt-i { transition: translate .2s var(--ease); }
.nt-proof a:hover .nt-i { translate: 3px 0; }

/* Ảnh ghép đầu trang: bốn ô CÙNG tỉ lệ 3:2, vì ảnh gốc toàn khổ ngang.
   Ép một ô thành dọc thì ảnh bị cắt còn một mẩu tường. */
.nt-hero__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nt-shot {
	position: relative; border-radius: var(--r-l); overflow: hidden; margin: 0;
	box-shadow: var(--sh-2); background: var(--cream-2);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nt-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: scale .7s var(--ease); }
/* KHÔNG dùng translate so le ở đây: đo được ô 1 và ô 3 chồng lên nhau
   12px từ bề rộng 1024px trở lên. Lưới đều bốn ô, thoáng và chắc chắn. */
.nt-shot:hover { transform: translateY(-4px); box-shadow: var(--sh-3); z-index: 2; }
.nt-shot:hover img { scale: 1.05; }
.nt-shot figcaption {
	position: absolute; inset: auto 0 0; padding: 30px 14px 12px; color: #fff;
	font-size: .76rem; font-weight: 600; line-height: 1.4;
	background: linear-gradient(180deg, transparent, rgb(7 26 14 / .86));
}

/* ── logo khách hàng ──────────────────────────────────────────── */

.nt-clients { padding: clamp(28px, 3vw, 42px) 0; border-block: 1px solid var(--line); background: var(--paper); }
.nt-clients__lab {
	text-align: center; font-size: .74rem; letter-spacing: .17em; text-transform: uppercase;
	color: var(--ink-3); font-weight: 700; margin-bottom: 22px;
}
.nt-clients__track {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.nt-clients__track ul { display: flex; align-items: center; gap: 56px; width: max-content; animation: nt-marquee 46s linear infinite; }
.nt-clients__track:hover ul { animation-play-state: paused; }
.nt-clients__track img { height: 40px; width: auto; max-width: 150px; object-fit: contain; opacity: .8; transition: opacity .3s; }
.nt-clients__track li:hover img { opacity: 1; }
@keyframes nt-marquee { to { translate: -50% 0; } }

/* ── khung mục ────────────────────────────────────────────────── */

.nt-sec { padding: clamp(58px, 6.5vw, 96px) 0; position: relative; }
.nt-sec--tint { background: var(--cream-2); }
.nt-sec--paper { background: var(--paper); }

.nt-sech { max-width: 62ch; margin: 0 auto clamp(34px, 4vw, 50px); text-align: center; }
.nt-sech--left { margin-inline: 0; text-align: start; }
.nt-sech__kick {
	font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--r-600);
	display: flex; align-items: center; justify-content: center; gap: 10px;
}
.nt-sech--left .nt-sech__kick { justify-content: flex-start; }
.nt-sech__kick::before, .nt-sech__kick::after { content: ''; width: 24px; height: 1px; background: currentColor; opacity: .45; }
.nt-sech--left .nt-sech__kick::before { display: none; }
.nt-sech__h { margin-top: 12px; font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.nt-sech__sub { margin-top: 14px; color: var(--ink-2); text-wrap: pretty; }

.nt-more { margin-top: 36px; text-align: center; }

/* ── ba lối vào ───────────────────────────────────────────────── */

.nt-loi__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 20px; }

.nt-path {
	display: grid; grid-template-rows: auto 1fr;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
	overflow: hidden; box-shadow: var(--sh-1);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.nt-path:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--g-300); }
.nt-path__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-2); }
.nt-path__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
.nt-path:hover .nt-path__img img { scale: 1.06; }
.nt-path__b { display: grid; align-content: start; gap: 11px; padding: 22px 24px 26px; }
.nt-path__kick {
	display: inline-flex; align-items: center; gap: 7px; width: max-content;
	padding: 5px 12px; border-radius: 999px; background: var(--g-100); color: var(--g-700);
	font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
}
.nt-path__h { font-size: 1.32rem; }
.nt-path__d { color: var(--ink-2); font-size: .93rem; text-wrap: pretty; }
.nt-path__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding-block: 6px; min-height: 32px; font-weight: 700; font-size: .9rem; color: var(--r-600); }
.nt-path__cta .nt-i { transition: translate .25s var(--ease); }
.nt-path:hover .nt-path__cta .nt-i { translate: 4px 0; }

/* ── dự án ────────────────────────────────────────────────────── */

.nt-proj__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr)); gap: 18px; }

.nt-pcard {
	position: relative; display: block; border-radius: var(--r-m); overflow: hidden;
	background: var(--g-900); box-shadow: var(--sh-1);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nt-pcard:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.nt-pcard__img { display: block; aspect-ratio: 4 / 3; }
.nt-pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.nt-pcard:hover .nt-pcard__img img { scale: 1.07; }
.nt-pcard__kind {
	position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
	padding: 5px 12px; border-radius: 999px;
	background: var(--paper); color: var(--g-800);
	font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	box-shadow: 0 2px 8px rgb(7 26 14 / .25);
}
.nt-pcard__b {
	position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 3px;
	padding: 56px 16px 16px; color: #fff;
	background: linear-gradient(180deg, transparent, rgb(7 26 14 / .55) 42%, rgb(7 26 14 / .93));
}
.nt-pcard__b b { font-family: var(--f-dis); font-size: 1.18rem; color: #fff; line-height: 1.25; }
.nt-pcard__b span {
	font-size: .79rem; color: rgb(255 255 255 / .86); line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── chín loại hình ───────────────────────────────────────────── */

.nt-svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .nt-svc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .nt-svc__grid { grid-template-columns: 1fr; } }

.nt-svc__grid a {
	display: grid; grid-template-rows: auto 1fr; height: 100%;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
	overflow: hidden; box-shadow: var(--sh-1);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.nt-svc__grid a:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--g-300); }
.nt-svc__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-2); }
.nt-svc__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
.nt-svc__grid a:hover .nt-svc__img img { scale: 1.06; }
.nt-svc__b { display: flex; align-items: center; gap: 13px; padding: 16px 18px; }
.nt-svc__ic {
	display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: none;
	background: var(--g-100); color: var(--g-600);
	transition: background .25s, color .25s;
}
.nt-svc__grid a:hover .nt-svc__ic { background: var(--g-600); color: #fff; }
.nt-svc__t { font-weight: 600; font-size: .96rem; line-height: 1.35; color: var(--g-900); }
.nt-svc__go { margin-inline-start: auto; color: var(--ink-3); transition: color .25s, translate .25s var(--ease); }
.nt-svc__grid a:hover .nt-svc__go { color: var(--r-600); translate: 3px 0; }

.nt-svc__note { margin-top: 30px; text-align: center; color: var(--ink-2); font-size: .95rem; }
.nt-svc__note a { color: var(--r-600); font-weight: 700; border-bottom: 1px solid color-mix(in srgb, var(--r-500) 40%, transparent); }
.nt-svc__note .nt-i { vertical-align: -3px; color: var(--r-600); }

/* ── kho thiết bị ─────────────────────────────────────────────── */

.nt-kho__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); gap: 20px; }

.nt-kcard {
	display: grid; align-content: start; gap: 10px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
	padding: 0 0 22px; overflow: hidden; box-shadow: var(--sh-1);
	transition: box-shadow .3s var(--ease), border-color .3s;
}
.nt-kcard:hover { box-shadow: var(--sh-2); border-color: var(--g-300); }
.nt-kcard__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-2); }
.nt-kcard__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease); }
.nt-kcard:hover .nt-kcard__img img { scale: 1.05; }
.nt-kcard__hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 18px 22px 0; }
.nt-kcard__hd h3 { font-size: 1.18rem; }
.nt-kcard__hd h3 a:hover { color: var(--r-600); }
.nt-kcard__hd em {
	font: 700 .68rem/1 var(--f-txt); font-style: normal; color: var(--ink-3);
	letter-spacing: .07em; text-transform: uppercase;
}
.nt-kcard__lead { padding: 0 22px; font-size: .875rem; color: var(--ink-3); line-height: 1.55; }
.nt-kcard ul { display: grid; gap: 1px; padding: 6px 14px 0; }
.nt-kcard li a {
	display: block; padding: 6px 8px; border-radius: 7px;
	font-size: .875rem; color: var(--ink-2);
	transition: background .15s, color .15s, padding-inline-start .15s var(--ease);
}
.nt-kcard li a:hover { background: var(--g-100); color: var(--g-900); padding-inline-start: 14px; }
.nt-kcard__all {
	display: inline-flex; align-items: center; gap: 7px; margin: 6px 22px 0;
	padding-block: 6px; min-height: 32px;
	font-size: .85rem; font-weight: 700; color: var(--r-600);
}
.nt-kcard__all .nt-i { transition: translate .2s var(--ease); }
.nt-kcard__all:hover .nt-i { translate: 4px 0; }

.nt-kho__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.nt-kho__row a {
	display: inline-flex; padding: 10px 18px; border-radius: 999px;
	background: var(--paper); border: 1px solid var(--line);
	font-size: .82rem; font-weight: 600; color: var(--ink-2);
	transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.nt-kho__row a:hover { background: var(--g-600); color: #fff; border-color: var(--g-600); transform: translateY(-2px); }

/* ── công cụ ──────────────────────────────────────────────────── */

.nt-tool {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl);
	box-shadow: var(--sh-2); overflow: hidden;
}
.nt-tool__tabs { display: flex; gap: 4px; padding: 10px 10px 0; background: var(--cream-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.nt-tool__tabs button {
	padding: 12px 22px; border-radius: var(--r-s) var(--r-s) 0 0;
	font-weight: 600; font-size: .93rem; color: var(--ink-2);
	border: 1px solid transparent; border-bottom: 0;
	transition: background .2s, color .2s;
}
.nt-tool__tabs button:hover { color: var(--g-900); }
.nt-tool__tabs button[aria-selected="true"] {
	background: var(--paper); color: var(--g-900); border-color: var(--line);
	margin-bottom: -1px; padding-bottom: 13px;
}

.nt-tool__panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
@media (max-width: 900px) { .nt-tool__panel { grid-template-columns: 1fr; } }
.nt-tool__panel[hidden] { display: none; }
.nt-tool__in { padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 24px; align-content: center; }
.nt-tool__out {
	padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 16px; align-content: start;
	background: var(--g-900); color: var(--g-100); position: relative; overflow: hidden;
}
.nt-tool__out::before {
	content: ''; position: absolute; width: 22rem; height: 22rem; inset-inline-end: -9rem; top: -9rem;
	border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--g-400) 26%, transparent), transparent 68%);
	pointer-events: none;
}
.nt-tool__out > * { position: relative; }

.nt-fld { display: grid; gap: 10px; }
.nt-fld__lab { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.nt-fld__lab b { text-transform: none; letter-spacing: 0; font-size: 1.02rem; color: var(--g-700); font-variant-numeric: tabular-nums; }

.nt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-chip {
	padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line-2);
	background: var(--cream); font-size: .88rem; font-weight: 600; color: var(--ink-2);
	transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.nt-chip:hover { border-color: var(--g-500); transform: translateY(-2px); }
.nt-chip[aria-pressed="true"] { background: var(--g-600); border-color: var(--g-600); color: #fff; }

.nt-range {
	-webkit-appearance: none; appearance: none; width: 100%; height: 26px; cursor: pointer;
	background: linear-gradient(90deg, var(--g-500) var(--fill, 30%), var(--cream-2) var(--fill, 30%))
	            center / 100% 6px no-repeat;
	border-radius: 999px;
}
.nt-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
	background: var(--paper); border: 3px solid var(--g-600); box-shadow: var(--sh-1); cursor: grab; }
.nt-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
	background: var(--paper); border: 3px solid var(--g-600); box-shadow: var(--sh-1); cursor: grab; }

.nt-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.nt-check {
	display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: var(--r-s);
	border: 1.5px solid var(--line); background: var(--cream); cursor: pointer;
	font-size: .88rem; font-weight: 600; transition: border-color .2s, background .2s;
}
.nt-check:hover { border-color: var(--g-400); }
.nt-check:has(input:checked) { border-color: var(--g-600); background: var(--g-50); }
.nt-check input { accent-color: var(--g-600); width: 17px; height: 17px; flex: none; }

.nt-out__lab { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g-300); }
.nt-out__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nt-out__grid li {
	padding: 14px 16px; border-radius: var(--r-s);
	background: color-mix(in srgb, #fff 8%, transparent);
	border: 1px solid color-mix(in srgb, #fff 13%, transparent);
}
.nt-out__grid b { display: block; font-family: var(--f-dis); font-size: 1.6rem; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nt-out__grid span { font-size: .78rem; color: var(--g-200); }
.nt-out__note { font-size: .8rem; color: var(--g-200); line-height: 1.65; max-width: 46ch; }
.nt-out__big { font-family: var(--f-dis); font-size: clamp(1.7rem, 3vw, 2.4rem); color: #fff; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nt-out__big small { display: block; font-family: var(--f-txt); font-size: .38em; font-weight: 600; color: var(--g-200); letter-spacing: .02em; margin-top: 4px; }
.nt-out__bars { display: grid; gap: 10px; }
.nt-out__bars li { display: grid; gap: 5px; }
.nt-out__bars .t { display: flex; justify-content: space-between; font-size: .8rem; color: var(--g-200); }
.nt-out__bars .t b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.nt-out__bars .r { height: 6px; border-radius: 999px; background: color-mix(in srgb, #fff 14%, transparent); overflow: hidden; }
.nt-out__bars .r i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--g-400), var(--g-300)); transition: width .5s var(--ease); }

.nt-demo {
	display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
	background: color-mix(in srgb, var(--gold) 26%, transparent);
	border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
	color: #ffe9b0; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
}

/* ── trang bảng giá teabreak ──────────────────────────────────
   Dùng lại khung .nt-tool của khu công cụ; phần dưới là những gì
   riêng cho trang này.                                            */

/* Cả công cụ phải lọt trong MỘT màn hình.
   Đo bản cũ ở 1470×701: thanh trên 38 + header 75 + phần mở đầu 294
   = 407px hết sạch trước khi công cụ bắt đầu, mà công cụ còn cao 927
   nữa. Khách phải lăn hai lượt mới thấy hết thứ họ vào đây để xem.
   Cách chữa: bỏ thanh trên, thu header, và dời tiêu đề vào thẳng
   trong khung công cụ thay vì cho nó một khu riêng.                */

.nt-tbpage .nt-head__in { min-height: 58px; }
.nt-tbpage .nt-brand__logo { width: 36px; }
.nt-tbpage .nt-brand__txt b { font-size: 1.1rem; }
.nt-tbpage .nt-brand__txt i { font-size: .6rem; }

.nt-tbtop { padding-block: clamp(8px, 1vw, 12px) clamp(26px, 3vw, 40px); }

/* Cột trái rộng hơn phải, vì thực đơn nằm bên trái và cần chỗ.
   Đã thử tách thực đơn thành một HÀNG riêng trải hết bề ngang: mỗi món
   quả thật gọn một dòng, nhưng hai hàng thì chiều cao CỘNG vào nhau,
   đo được 1.065px — tệ hơn hẳn. Hai cột thì chiều cao là cái LỚN HƠN
   của hai bên, nên tổng thấp hơn nhiều.                              */
.nt-tool--tb .nt-tool__panel { grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr); }
@media (max-width: 900px) { .nt-tool--tb .nt-tool__panel { grid-template-columns: 1fr; } }

.nt-tool--tb .nt-tool__in {
	padding: clamp(16px, 1.7vw, 20px) clamp(18px, 1.8vw, 24px);
	gap: clamp(8px, .9vw, 9px);
	align-content: start;
	container: nttool / inline-size;
}
.nt-tool--tb .nt-tool__out { padding: clamp(20px, 2.1vw, 26px) clamp(20px, 2vw, 26px); gap: 12px; }
.nt-tool--tb .nt-fld--mon { gap: 6px; }
.nt-out__tin {
	margin-top: auto; padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
	display: flex; gap: 8px; align-items: flex-start;
	font-size: .8rem; line-height: 1.55; color: var(--g-200); max-width: 40ch;
}
.nt-out__tin .nt-i { color: var(--gold); flex: none; margin-top: 2px; }

/* Nói suông thì khó tin — kèm luôn đường dẫn sang khu sự kiện đã tổ chức
   để khách tự đi kiểm. Gạch chân sẵn chứ không đợi rê chuột: trên điện
   thoại không có chuyện rê chuột. */
.nt-out__tin a {
	display: inline-flex; align-items: center; gap: 5px;
	color: #fff; font-weight: 600; white-space: nowrap;
	border-bottom: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
	transition: border-color .2s, color .2s;
}
.nt-out__tin a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.nt-out__tin a .nt-i { color: currentColor; margin-top: 0; }

/* Tiêu đề nằm trong khung công cụ, cao chừng 60px thay cho 294px. */
.nt-tbh {
	display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap;
	padding-bottom: 7px;
	border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.nt-tbh__kick {
	font-size: .68rem; font-weight: 700; letter-spacing: .2em;
	text-transform: uppercase; color: var(--gold-chu);
}
.nt-home .nt-tbh__h1 {
	margin: 0; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.12;
	letter-spacing: -.015em; text-wrap: balance;
}

/* Bảy set xếp một hàng ngang, mỗi ô chỉ còn tên và đơn giá.
   Dòng "mỗi khách" lặp bảy lần là bảy lần thừa — đưa lên nhãn chung. */
.nt-tb__sets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 76px), 1fr)); gap: 5px; }
.nt-tb__set {
	display: grid; gap: 1px; padding: 8px 5px; border-radius: 11px;
	border: 1px solid var(--line); background: var(--cream); text-align: center;
	transition: border-color .2s, background .2s, translate .2s var(--ease), box-shadow .2s;
}
.nt-tb__set b {
	font-size: .66rem; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-3);
}
.nt-tb__set i {
	font-style: normal; font-family: var(--f-dis); font-size: 1.02rem;
	font-weight: 700; color: var(--g-900); font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
	.nt-tb__set:hover { border-color: var(--g-400); translate: 0 -2px; box-shadow: var(--sh-1); }
}
.nt-tb__set[aria-pressed="true"] {
	background: var(--g-800); border-color: var(--g-800);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent);
}
.nt-tb__set[aria-pressed="true"] b { color: color-mix(in srgb, var(--gold) 80%, #fff); }
.nt-tb__set[aria-pressed="true"] i { color: #fff; }

/* Thực đơn nay vẽ thành thẻ theo nhóm (xem khối .nt-mon bên dưới),
   nên bỏ hẳn kiểu gạch đầu dòng cũ — để lại thì mỗi thẻ mọc thêm một
   dấu chấm lạc lõng ở góc. Riêng dòng "bấm xem ảnh" vẫn giữ dạng đơn. */
.nt-tb__xem {
	display: flex; gap: 9px; font-size: .89rem; color: var(--ink-2); line-height: 1.5;
}

/* "Đã gồm / chưa gồm" xếp ngang thành hai cột thay vì chồng dọc:
   panel phải cao 503px là nó, mà chiều cao panel phải kéo luôn cả khung. */
.nt-tb__gom { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px 18px; }
.nt-tb__gom li { display: grid; gap: 4px; align-content: start; }
.nt-tb__gom b { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--g-300); }
.nt-tb__gom span { display: flex; align-items: center; gap: 6px; font-size: .82rem; line-height: 1.45; color: var(--g-100); }
.nt-tb__gom .nt-i { color: var(--g-300); }

.nt-tb__bang { font-size: .86rem; color: var(--ink-3); line-height: 2; }
.nt-tb__bang a { color: var(--r-600); font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--r-500) 35%, transparent); margin-inline-end: 10px; }

.nt-tbbang { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.nt-tbbang__i {
	display: grid; border-radius: var(--r-m); overflow: hidden;
	border: 1px solid var(--line); background: var(--paper); box-shadow: var(--sh-1);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nt-tbbang__i:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.nt-tbbang__i span {
	display: flex; align-items: center; gap: 7px; padding: 14px 18px;
	font-weight: 700; color: var(--g-900);
}
.nt-tbbang__i .nt-i { color: var(--r-600); transition: translate .2s var(--ease); }
.nt-tbbang__i:hover .nt-i { translate: 4px 0; }

.nt-tbcombo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.nt-tbcombo__i {
	display: grid; border-radius: var(--r-m); overflow: hidden;
	border: 1px solid var(--line); background: var(--paper); box-shadow: var(--sh-1);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nt-tbcombo__i:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.nt-tbcombo__b { display: grid; gap: 2px; padding: 14px 16px 16px; }
.nt-tbcombo__b b { font-size: .95rem; color: var(--g-900); }
.nt-tbcombo__b i { font-style: normal; font-family: var(--f-dis); font-size: 1.35rem; font-weight: 700; color: var(--r-600); }
.nt-tbcombo__b em { font-style: normal; font-size: .76rem; color: var(--ink-3); }

.nt-tbpage .nt-foot__bot { border-top: 0; }
.nt-tbpage .nt-foot__bot a { color: var(--g-300); border-bottom: 1px solid currentColor; }

/* ── thực đơn: đọc như thực đơn nhà hàng ───────────────────────
   Kiểu thẻ hộp cũ cao 472px, mỗi món một cái khung viền — nhìn ra
   danh mục hàng hoá chứ không ra bàn tiệc. Nay lấy đúng lối bày của
   thực đơn nhà hàng: ba cột theo nhóm món, số thứ tự bằng chữ serif
   mạ vàng, gạch chỉ mảnh ngăn từng món. Vừa cao chưa tới một nửa,
   vừa ra dáng.

   Số thứ tự do CSS đếm (counter) chứ không do PHP in ra: đổi thứ tự
   hay thêm bớt món thì số tự chạy lại, không có cửa lệch.

   Chia cột bằng @container chứ không bằng @media: cột phải quyết
   theo bề ngang của KHUNG CÔNG CỤ, không phải theo bề ngang màn
   hình — khung này còn co lại khi bố cục đổi.                      */

/* Chia cột kiểu báo: trình duyệt tự rót chữ cho ba cột cao bằng nhau.
   Lưới ba ô cứng thì cột nào cũng phải cao bằng nhóm dài nhất — set 13
   món có nhóm Bánh cao 398px là cả khối cao 398px, trong khi hai nhóm
   kia chỉ dùng nửa chỗ. Rót cột thì tổng chia đều, thấp hơn chừng 40%.
   Nhóm được phép tràn sang cột kế — thực đơn nhà hàng in giấy vẫn vậy —
   nhưng tiêu đề nhóm không bao giờ đứng một mình cuối cột, và không món
   nào bị cắt đôi.                                                     */
/* Mỗi nhóm ĐỨNG TRỌN trong ô của nó, không bao giờ bị cắt ngang cột.
   Bản trước rót cột kiểu báo cho thấp, nhưng nhóm Bánh 5 món bị chia
   đôi: đọc sang đầu cột bên cạnh thấy hai món trơ trọi không tiêu đề,
   không biết chúng thuộc nhóm nào.

   Nhóm to nhất (từ 5 món) được PHP gắn thêm lớp --rong: nó chiếm hai ô
   và rót danh sách của RIÊNG NÓ làm hai cột con. Vừa không cắt nhóm,
   vừa không để một nhóm dài kéo cao cả khối.                          */
.nt-tb__mon { display: grid; grid-template-columns: 1fr; gap: 18px clamp(18px, 2vw, 26px); align-items: start; }
@container nttool (min-width: 380px) { .nt-tb__mon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container nttool (min-width: 580px) { .nt-tb__mon { grid-template-columns: repeat(3, minmax(0, 1fr)); } }



/* Mỗi nhóm hiện lên lệch nhau một nhịp ngắn khi khách đổi set.
   @starting-style lo trạng thái lúc mới sinh ra, khỏi cần JavaScript. */
.nt-mon {
	opacity: 1; translate: 0 0;
	transition: opacity .5s var(--ease) calc(var(--i, 0) * 70ms),
	            translate .5s var(--ease) calc(var(--i, 0) * 70ms);
}
@starting-style {
	.nt-mon { opacity: 0; translate: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.nt-mon { transition: none; }
}

.nt-mon__h {
	display: flex; align-items: center; gap: 7px;
	font-size: .67rem; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--g-800);
	padding-bottom: 6px;
	border-bottom: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
}
.nt-mon__h .nt-i { color: var(--gold); }
.nt-mon__h i {
	margin-inline-start: auto; font-style: normal; font-family: var(--f-dis);
	font-size: .95rem; font-weight: 700; letter-spacing: 0; color: var(--gold-chu);
	font-variant-numeric: tabular-nums;
}

.nt-mon__ds { counter-reset: mon; }
.nt-mon__i {
	counter-increment: mon;
	display: flex; align-items: baseline; gap: 10px;
	line-height: 1.38; text-wrap: pretty;
	padding: 6px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--g-900) 8%, transparent);
}
.nt-mon__i:last-child { border-bottom: 0; }
.nt-mon__i::before {
	content: counter(mon, decimal-leading-zero);
	flex: none; font-family: var(--f-dis); font-weight: 500;
	color: color-mix(in srgb, var(--gold-chu) 72%, var(--cream));
	font-variant-numeric: tabular-nums; transition: color .25s var(--ease);
}
/* Tên món, nhãn nhóm và các lựa chọn CHẢY CHUNG một dòng chữ. Mỗi thứ
   tách ra một dòng riêng thì món nào cũng chiếm ba dòng — set 13 món đội
   khối lên 805px. Chảy chung thì chỉ dài ra khi thật sự cần. */
.nt-mon__b { display: block; min-width: 0; }
.nt-mon__nhom::after { content: '·'; margin-inline: 5px; }

/* Nhãn "Bánh nhóm A" là chú thích, không phải tiêu đề — để tông xám.
   Bản trước in xanh đậm chữ hoa, gần dòng nào cũng có, nhìn như mỗi
   món đều có một tiêu đề riêng. */
.nt-mon__nhom {
	font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ink-3); white-space: nowrap;
}

/* Tên món chữ THƯỜNG. Cả bảng chữ đậm thì mắt không có chỗ nghỉ. */
.nt-mon__ten {
	font-weight: 500; color: var(--ink); transition: color .25s var(--ease);
}

/* Các lựa chọn xuống một dòng riêng, ĐÚNG MỘT chữ "hoặc" đứng đầu.
   Bản trước món bốn lựa chọn có bốn chữ "hoặc" vàng nghiêng chen giữa
   dòng — mắt nhảy loạn. */
.nt-mon__chon { color: var(--ink-3); }
.nt-mon__chon::before { content: ' '; }
.nt-mon__chon em {
	font-family: var(--f-dis); font-style: italic; font-weight: 500;
	color: var(--gold-chu); margin-inline-end: 2px;
}

.nt-mon__sl {
	font-style: normal; font-weight: 600;
	color: var(--ink-3); background: var(--cream-2);
	border-radius: 999px; padding: 1px 8px; white-space: nowrap;
	margin-inline-start: 6px;
}

@media (hover: hover) {
	.nt-mon__i:hover .nt-mon__ten { color: var(--g-600); }
	.nt-mon__i:hover::before { color: var(--g-700); }
}

/* ── hộp xin số điện thoại ────────────────────────────────────── */

.nt-sdt {
	width: min(100% - 32px, 440px); padding: clamp(24px, 3vw, 34px);
	border: 0; border-radius: var(--r-xl); background: var(--paper);
	box-shadow: var(--sh-3); color: var(--ink); position: relative;
}
.nt-sdt::backdrop { background: rgb(7 26 14 / .55); backdrop-filter: blur(3px); }
.nt-sdt__x { position: absolute; top: 14px; inset-inline-end: 14px; }
.nt-sdt__x button {
	display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	background: var(--cream-2); color: var(--ink-2);
}
.nt-sdt__x button:hover { background: var(--g-100); color: var(--g-900); }

.nt-sdt__buoc {
	font-size: .72rem; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--r-600);
}
.nt-home .nt-sdt__h { margin-top: 8px; font-size: 1.5rem; line-height: 1.25; }

.nt-sdt__tom {
	margin-top: 16px; padding: 13px 15px; border-radius: var(--r-s);
	background: var(--g-50); border: 1px solid var(--g-200);
	font-size: .88rem; line-height: 1.6; color: var(--g-900);
}
.nt-sdt__tom[hidden] { display: none; }

.nt-sdt__lab {
	display: block; margin-top: 20px; margin-bottom: 8px;
	font-size: .78rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--ink-3);
}
.nt-sdt__o {
	width: 100%; padding: 16px 18px; border-radius: var(--r-s);
	border: 1.5px solid var(--line-2); background: var(--cream);
	font-size: 1.22rem; font-weight: 700; letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	transition: border-color .2s, background .2s;
}
.nt-sdt__o:focus { border-color: var(--g-600); background: var(--paper); outline: none; }
.nt-sdt__o::placeholder { font-weight: 500; letter-spacing: .04em; color: var(--ink-3); }
/* Ô bẫy máy gửi rác: người không thấy, robot vẫn điền. */
.nt-sdt__bay { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

.nt-sdt__loi { min-height: 1.2em; margin-top: 8px; font-size: .84rem; font-weight: 600; color: var(--r-600); }
.nt-sdt #nt-sdt-gui { margin-top: 4px; }
.nt-sdt #nt-sdt-gui:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.nt-sdt__yen {
	display: flex; align-items: center; gap: 7px; justify-content: center;
	margin-top: 14px; font-size: .8rem; color: var(--ink-3);
}
.nt-sdt__yen .nt-i { color: var(--g-500); }
.nt-sdt__goi { margin-top: 6px; text-align: center; font-size: .86rem; color: var(--ink-2); }
.nt-sdt__goi a { font-weight: 700; color: var(--r-600); border-bottom: 1px solid currentColor; }

.nt-sdt__xong { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 10px 0; }
.nt-sdt__tick {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	background: var(--g-600); color: #fff; font-size: 1.7rem; font-weight: 700;
}
.nt-home .nt-sdt__xong h2 { font-size: 1.4rem; }
.nt-sdt__xong p { font-size: .92rem; color: var(--ink-2); }

/* ── bốn bước ─────────────────────────────────────────────────── */

.nt-buoc__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 20px; }
.nt-buoc__list li {
	display: grid; align-content: start; gap: 9px;
	padding: 28px 24px; border-radius: var(--r-m);
	background: var(--paper); border: 1px solid var(--line);
	transition: border-color .3s, box-shadow .3s var(--ease);
}
.nt-buoc__list li:hover { border-color: var(--g-300); box-shadow: var(--sh-1); }
.nt-buoc__list b { font-family: var(--f-dis); font-size: 2rem; line-height: 1; color: var(--g-500); }
.nt-buoc__list h3 { font-size: 1.1rem; }
.nt-buoc__list p { font-size: .89rem; color: var(--ink-2); }

/* ── nhận báo giá ─────────────────────────────────────────────── */

.nt-bg__in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(26px, 3vw, 46px); align-items: start; }
@media (max-width: 940px) { .nt-bg__in { grid-template-columns: 1fr; } }

.nt-q {
	display: grid; gap: 22px; padding: clamp(22px, 2.4vw, 32px);
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1);
}
.nt-q__lab { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; }
.nt-q__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .nt-q__row { grid-template-columns: 1fr; } }
.nt-q__in { display: grid; gap: 8px; }
.nt-q__in span { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.nt-q__in input {
	padding: 13px 15px; border-radius: var(--r-s); border: 1.5px solid var(--line-2);
	background: var(--cream); transition: border-color .2s, background .2s;
}
.nt-q__in input:focus { border-color: var(--g-600); background: var(--paper); outline: none; }

.nt-q__prev {
	padding: 16px 18px; border-radius: var(--r-s);
	background: var(--g-50); border: 1px solid var(--g-200);
	font-size: .92rem; color: var(--g-900); line-height: 1.65;
}
.nt-q__acts { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 420px) { .nt-q__acts .nt-btn { flex: 1 1 100%; } }
.nt-q__hint { font-size: .84rem; color: var(--g-700); min-height: 1.4em; font-weight: 600; }

.nt-team {
	display: grid; align-content: start; gap: 16px;
	padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-l);
	background: var(--g-900); color: var(--g-100); box-shadow: var(--sh-3);
}
.nt-home .nt-team__h { font-size: 1.45rem; color: #fff; }
.nt-team__p { font-size: .89rem; color: var(--g-200); }
.nt-team__list { display: grid; gap: 9px; }
.nt-team__list a {
	display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-radius: var(--r-s);
	background: color-mix(in srgb, #fff 8%, transparent);
	border: 1px solid color-mix(in srgb, #fff 13%, transparent);
	transition: background .22s, border-color .22s, translate .22s var(--ease);
}
.nt-team__list a:hover { background: color-mix(in srgb, #fff 15%, transparent); border-color: var(--g-400); translate: 3px 0; }
.nt-team__av {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
	background: var(--g-500); color: #fff;
	font-family: var(--f-dis); font-weight: 700; font-size: 1.1rem;
}
.nt-team__i { display: grid; line-height: 1.3; }
.nt-team__i b { font-size: .93rem; color: #fff; }
.nt-team__i i { font-style: normal; font-size: 1.04rem; font-weight: 700; color: var(--g-300); letter-spacing: .01em; }
.nt-team__go { margin-inline-start: auto; color: var(--g-300); }
.nt-team__addr {
	display: flex; gap: 11px; align-items: start; font-size: .83rem;
	color: var(--g-200); line-height: 1.55;
}
.nt-team__addr .nt-i { color: var(--g-300); margin-top: 3px; }
.nt-team__addr b { color: #fff; font-weight: 600; }

/* ── câu hỏi ──────────────────────────────────────────────────── */

.nt-faq__in { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(26px, 3vw, 54px); align-items: start; }
@media (max-width: 900px) { .nt-faq__in { grid-template-columns: 1fr; } }
.nt-faq__list { display: grid; gap: 11px; }
.nt-faq__list details {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
	padding: 2px 22px; transition: border-color .25s, box-shadow .25s;
}
.nt-faq__list details[open] { border-color: var(--g-300); box-shadow: var(--sh-1); }
.nt-faq__list summary {
	display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none;
	padding: 17px 0; font-weight: 600; font-size: 1.02rem; color: var(--g-900); line-height: 1.45;
}
.nt-faq__list summary::-webkit-details-marker { display: none; }
.nt-faq__sign { margin-inline-start: auto; position: relative; width: 16px; height: 16px; flex: none; }
.nt-faq__sign::before, .nt-faq__sign::after {
	content: ''; position: absolute; inset-inline: 0; top: 7px; height: 2px;
	background: var(--r-600); border-radius: 2px; transition: rotate .3s var(--ease), opacity .3s;
}
.nt-faq__sign::after { rotate: 90deg; }
.nt-faq__list details[open] .nt-faq__sign::after { rotate: 0deg; opacity: 0; }
.nt-faq__list p { padding: 0 0 20px; font-size: .93rem; color: var(--ink-2); text-wrap: pretty; }

/* ── giới thiệu ───────────────────────────────────────────────── */

.nt-about__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 54px); align-items: center; }
@media (max-width: 900px) { .nt-about__in { grid-template-columns: 1fr; } }
.nt-about__p { margin-top: 18px; font-size: 1.02rem; color: var(--ink-2); text-wrap: pretty; }
.nt-about__list { display: grid; gap: 11px; margin: 22px 0 26px; }
.nt-about__list li { display: flex; align-items: center; gap: 12px; }
.nt-about__list .nt-i { color: var(--g-500); flex: none; }
.nt-about__list a { font-weight: 600; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nt-about__list a:hover { color: var(--r-600); border-color: currentColor; }
.nt-about__fig { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); margin: 0; }
.nt-about__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.nt-about__fig figcaption {
	position: absolute; inset: auto 0 0; padding: 36px 20px 16px; color: #fff; font-size: .83rem; line-height: 1.5;
	background: linear-gradient(180deg, transparent, rgb(7 26 14 / .88));
}

/* ── chân trang ───────────────────────────────────────────────── */

.nt-foot { background: var(--g-950); color: var(--g-200); font-size: .89rem; }
.nt-foot__top { display: grid; grid-template-columns: minmax(250px, 310px) 1fr; gap: 44px; padding: clamp(44px, 5vw, 66px) 0 40px; }
@media (max-width: 900px) { .nt-foot__top { grid-template-columns: 1fr; gap: 34px; } }

.nt-brand--foot .nt-brand__txt b { color: #fff; }
.nt-brand--foot .nt-brand__txt i { color: var(--g-300); }
.nt-brand--foot img { width: 48px; }

.nt-foot__contact { display: grid; gap: 11px; margin: 22px 0 20px; }
.nt-foot__contact li { display: flex; gap: 11px; align-items: start; line-height: 1.55; }
.nt-foot__contact .nt-i { color: var(--g-400); margin-top: 3px; flex: none; }
.nt-foot__contact b { color: #fff; font-weight: 600; }
.nt-foot__contact a:hover { color: var(--g-300); }

.nt-foot__phones { display: grid; gap: 6px; }
.nt-foot__phones a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: #fff; }
.nt-foot__phones .nt-i { color: var(--g-400); }
.nt-foot__phones a:hover { color: var(--g-300); }

.nt-foot__map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 22px; }
@media (max-width: 1180px) { .nt-foot__map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .nt-foot__map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nt-foot__ch { font-family: var(--f-dis); font-weight: 700; font-size: 1rem; color: var(--g-300); margin-bottom: 11px; }
.nt-foot__ch a:hover { color: #fff; }
.nt-foot__col ul { display: grid; gap: 5px; }
.nt-foot__col li a { font-size: .82rem; line-height: 1.5; color: color-mix(in srgb, var(--g-200) 82%, transparent); transition: color .18s; }
.nt-foot__col li a:hover { color: #fff; }

.nt-foot__bot {
	border-top: 1px solid color-mix(in srgb, #fff 10%, transparent);
	padding: 20px 0 26px; text-align: center; font-size: .82rem; color: var(--g-300);
}

/* ── nút hotline nổi (plugin hotline-button) ──────────────────── */

.nt-home .hotline-button {
	background: var(--r-500) !important;
	color: #fff !important;
	border-radius: 999px !important;
	box-shadow: 0 10px 28px rgb(204 24 36 / .36) !important;
	font-family: var(--f-txt); font-weight: 600;
	bottom: 26px !important; z-index: 95 !important;
}
.nt-home .hotline-button .hotline-title { color: #fff; }
.nt-home .list-hotlines a, .nt-home .list-hotlines .number { color: #fff !important; }

/* Plugin vẽ icon bằng Font Awesome mà trang này không nạp Font Awesome
   (~75KB cho vài cái icon) ⇒ vẽ lại bằng mask SVG, tốn vài trăm byte. */
.nt-home .hotline-button > i,
.nt-home .list-hotlines .line i,
.nt-home .button-close i {
	display: inline-block; width: 18px; height: 18px; flex: none;
	background: currentColor;
	-webkit-mask: var(--ic) center / contain no-repeat;
	mask: var(--ic) center / contain no-repeat;
}
.nt-home .hotline-button > i,
.nt-home .list-hotlines .line i {
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 21A13.5 13.5 0 0 1 3 8.5 3 3 0 0 1 5 5.6l1-.4a1.4 1.4 0 0 1 1.7.7l1.2 2.3a1.4 1.4 0 0 1-.4 1.7l-1 .8a10 10 0 0 0 4.8 4.8l.8-1a1.4 1.4 0 0 1 1.7-.4l2.3 1.2a1.4 1.4 0 0 1 .7 1.7l-.4 1a3 3 0 0 1-2.9 2z'/%3E%3C/svg%3E");
}
.nt-home .button-close i {
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
	width: 14px; height: 14px;
}
.nt-home .hotline-button > i { animation: nt-ring 3.4s var(--ease) infinite; }
/* Nút đóng nằm hẳn trong khung — thò ra là cả trang tràn ngang 10px. */
.nt-home .button-close {
	position: absolute; top: 8px; right: 8px;
	display: grid; place-items: center; width: 28px; height: 28px;
	border-radius: 50%; background: var(--r-500); color: #fff;
	box-shadow: 0 4px 12px rgb(7 26 14 / .35); cursor: pointer;
}
.nt-home .button-close:hover { background: var(--r-600); }
.nt-home .list-hotlines {
	background: var(--g-900) !important;
	border: 1px solid var(--g-600);
	border-radius: var(--r-m) !important;
	box-shadow: var(--sh-3) !important;
	padding: 14px !important;
}
.nt-home .list-hotlines .line { border-radius: 8px; padding: 9px 11px !important; }
.nt-home .list-hotlines .line:hover { background: color-mix(in srgb, #fff 12%, transparent); }
.nt-home .list-hotlines .line:first-of-type { background: color-mix(in srgb, var(--g-500) 40%, transparent); }
.nt-home .list-hotlines .line i { color: var(--g-300); }

/* ── thanh liên hệ dưới đáy (điện thoại) ──────────────────────
   Mặc định ẩn. Chỉ bật từ 700px trở xuống, và lúc đó bảng nổi của
   plugin bị ẩn đi để hai thứ không chồng nhau.

   Vì sao đổi cách hiển thị trên điện thoại:
   · Bảng nổi 300 × 200px che gần 1/3 màn 390px, đúng chỗ đang bày
     ảnh dự án — tức là che mất thứ khiến khách muốn gọi.
   · Bày 4 số ngang nhau buộc khách phải chọn mà không có căn cứ nào
     để chọn; thêm một bước suy nghĩ là thêm một chỗ để khách bỏ đi.
   · Thanh đáy nằm trong tầm ngón cái, luôn thấy, mà chỉ chiếm 62px.
   Số đứng đầu vẫn xoay theo lượt tải nên các bạn sale vẫn đều lượt. */

.nt-hotbar { display: none; }

@media (max-width: 700px) {
	.nt-home .hotline-button { display: none !important; }

	.nt-hotbar {
		position: fixed; inset: auto 0 0; z-index: 96;
		display: flex; align-items: stretch; gap: 1px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
		background: color-mix(in srgb, var(--paper) 94%, transparent);
		backdrop-filter: saturate(180%) blur(12px);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 24px rgb(12 46 23 / .12);
	}
	.nt-home { padding-bottom: 78px; }

	.nt-hotbar__call {
		flex: 1 1 auto; min-width: 0;
		display: flex; align-items: center; gap: 10px;
		padding: 10px 14px; border-radius: 999px;
		background: var(--r-500); color: #fff;
		box-shadow: 0 4px 14px rgb(204 24 36 / .3);
	}
	.nt-hotbar__call:active { background: var(--r-600); }
	.nt-hotbar__ic { display: grid; place-items: center; flex: none; }
	.nt-hotbar__t { display: grid; line-height: 1.2; min-width: 0; }
	.nt-hotbar__t b { font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; color: #fff; }
	.nt-hotbar__t i { font-style: normal; font-size: .72rem; color: rgb(255 255 255 / .82); }

	.nt-hotbar__zalo {
		flex: none; display: grid; place-items: center; padding: 0 16px;
		border-radius: 999px; background: var(--g-600); color: #fff;
		font-weight: 700; font-size: .9rem;
	}
	.nt-hotbar__zalo:active { background: var(--g-700); }

	.nt-hotbar__more {
		flex: none; display: grid; place-items: center; padding: 0 12px; min-width: 54px;
		border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--cream);
		color: var(--ink-2); font-size: .68rem; font-weight: 700; line-height: 1.15; text-align: center;
	}
	.nt-hotbar__more[aria-expanded="true"] { background: var(--g-100); border-color: var(--g-400); color: var(--g-800); }

	.nt-hotbar__list {
		position: absolute; inset: auto 10px calc(100% - 2px);
		display: grid; gap: 6px; padding: 10px;
		background: var(--paper); border: 1px solid var(--line);
		border-radius: var(--r-m); box-shadow: var(--sh-3);
	}
	.nt-hotbar__list[hidden] { display: none; }
	.nt-hotbar__list a {
		display: flex; align-items: center; gap: 10px; min-height: 44px;
		padding: 8px 12px; border-radius: var(--r-s); background: var(--cream);
	}
	.nt-hotbar__list a:active { background: var(--g-100); }
	.nt-hotbar__list .nt-i { color: var(--r-600); }
	.nt-hotbar__list b { font-size: .98rem; color: var(--g-900); }
	.nt-hotbar__list i { margin-inline-start: auto; font-style: normal; font-size: .8rem; color: var(--ink-3); }
}

/* ── hiện dần khi cuộn tới ────────────────────────────────────
   Chạy bằng scroll-driven animation của CSS, không qua JavaScript.
   Trình duyệt nào chưa hiểu thì thấy nội dung ngay.               */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.nt-reveal {
			animation: nt-rise linear both;
			animation-timeline: view();
			animation-range: entry calc(var(--d, 0) * 4%) cover 24%;
		}
	}
}
@keyframes nt-rise {
	from { opacity: 0; translate: 0 24px; }
	to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nt-home *, .nt-home *::before, .nt-home *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.nt-head, .nt-topbar, .hotline-button, .nt-clients, .nt-tool { display: none !important; }
	.nt-home { background: #fff; }
}


/* ══════════════════════════════════════════════════════════════════
   CỠ CHỮ CHO MẮT LỚN TUỔI

   Khách của Ngàn Thông phần nhiều là hành chính, nhân sự, chủ doanh
   nghiệp — không ít người trên 50. Bản dựng đầu có chỗ chữ chỉ 9,8px
   (tên nhóm bánh) và 10,6px (tên set): đủ đọc trên màn hình 27 inch
   ngồi gần, không đủ trên điện thoại cầm xa tay.

   Mức sàn đặt ở đây: 13px cho nhãn nhỏ, 15,5px cho chữ đọc, và trên
   máy hẹp dưới 700px thì cộng thêm một nấc nữa. Chữ IN HOA có giãn
   cách chữ khó đọc hơn chữ thường cùng cỡ, nên nhãn IN HOA để cao
   hơn mức sàn.

   Khối này đặt cuối file để đè lên phần dựng ở trên — sửa cỡ chữ thì
   sửa ở đây, một chỗ, thay vì đi lùng từng dòng.
   ══════════════════════════════════════════════════════════════════ */

.nt-home {
	--t-nho:  .78rem;   /* 12,5px — nhãn IN HOA, chữ phụ  */
	--t-vua:  .88rem;   /* 14,1px — chữ đọc phụ            */
	--t-doc:  .97rem;   /* 15,5px — chữ đọc chính          */
}
/* Điện thoại cầm xa tay hơn màn hình để bàn, nên cộng thêm một nấc. */
@media (max-width: 700px) {
	.nt-home { --t-nho: .82rem; --t-vua: .94rem; --t-doc: 1.03rem; }
}

/* — khung công cụ bảng giá — */
.nt-tool--tb .nt-fld__lab      { font-size: var(--t-nho); }
.nt-tool--tb .nt-fld__lab b    { font-size: var(--t-doc); }
.nt-tbh__kick                  { font-size: var(--t-nho); letter-spacing: .16em; }
.nt-tb__set b                  { font-size: var(--t-nho); letter-spacing: .07em; }
.nt-tb__set i                  { font-size: 1.12rem; }
.nt-out__lab                   { font-size: var(--t-nho); }
.nt-tb__gom b                  { font-size: var(--t-nho); }
.nt-tb__gom span               { font-size: var(--t-vua); }
.nt-out__note                  { font-size: var(--t-vua); }
.nt-out__tin                   { font-size: var(--t-vua); }
.nt-tb__xem                    { font-size: var(--t-vua); }

/* — thực đơn — */
.nt-mon__h                     { font-size: var(--t-nho); letter-spacing: .13em; }
.nt-mon__h i                   { font-size: 1.05rem; }
.nt-mon__i::before             { font-size: var(--t-vua); }
.nt-mon__nhom                  { font-size: var(--t-nho); }
.nt-mon__ten                   { font-size: var(--t-doc); }
.nt-mon__chon                  { font-size: var(--t-vua); }
.nt-mon__sl                    { font-size: var(--t-nho); }

/* — hộp xin số điện thoại: chỗ khách phải đọc kỹ nhất — */
.nt-sdt__buoc                  { font-size: var(--t-nho); }
.nt-sdt__tom                   { font-size: var(--t-doc); }
.nt-sdt__lab                   { font-size: var(--t-nho); }
.nt-sdt__loi                   { font-size: var(--t-vua); }
.nt-sdt__yen                   { font-size: var(--t-vua); }
.nt-sdt__goi                   { font-size: var(--t-vua); }
.nt-sdt__xong p                { font-size: var(--t-doc); }

/* — thanh liên hệ dưới đáy màn hình điện thoại — */
.nt-hotbar__t i                { font-size: var(--t-nho); }
.nt-hotbar__more               { font-size: var(--t-nho); }

/* — thẻ combo và các nhãn khu dưới — */
.nt-tbcombo__b em              { font-size: var(--t-vua); }
.nt-sech__kick                 { font-size: var(--t-nho); }
.nt-hotline__txt i             { font-size: var(--t-nho); }