/*
Theme Name:   Hội chợ Trung Thu Nam Định
Theme URI:    https://www.xuctienthuongmai.vn/
Description:  Theme con của Flatsome cho landing page và hệ thống đặt gian hàng Hội chợ Trung Thu Nam Định 2026. Sơ đồ mặt bằng 150 gian bấm chọn, giữ chỗ tức thì, bảng quản trị đơn đăng ký. Giao diện phẳng, ưu tiên sơ đồ và biểu mẫu đăng ký.
Author:       NET HOLDING
Template:     flatsome
Version:      3.99.67
Text Domain:  trungthu-namdinh
*/

/* ==========================================================================
   GIAO DIỆN PHẲNG.

   Không đổ bóng, không chuyển sắc, không hiệu ứng mờ nền. Phân tầng bằng ba
   thứ: nền đặc, đường viền 1px và khoảng trắng. Lý do không chỉ là thẩm mỹ —
   sơ đồ có 150 ô nhỏ nằm sát nhau, mỗi cái bóng đổ thêm vào là thêm một mép
   giả làm mắt khó đọc ranh giới thật giữa các gian.

   BẢNG MÀU — hai tầng: bậc gốc, rồi tên theo VAI TRÒ. Thân trang chỉ gọi tên
   theo vai trò.

   Đã kiểm tương phản (WCAG AA cần 4,5:1 cho chữ thường):
     #C8102E trên trắng ......... 6,53:1  ✓ nút đỏ chữ trắng
     #A85508 trên trắng ......... 5,26:1  ✓ cam dùng cho CHỮ
     #E07A1F trên trắng ......... 2,84:1  ✗ cam này CHỈ được làm nền/viền
     #F0B323 trên #14213D ...... 10,20:1  ✓ vàng trên nền đêm
     #14213D trên #FFFFFF ...... 15,30:1  ✓ chữ chính
     #1B6E4E trên #FFFFFF ....... 5,49:1  ✓ lục "còn trống"
   Rút ra: vàng ánh trăng không bao giờ làm nền cho chữ trắng, cam không bao
   giờ làm màu chữ trên nền sáng — dùng --cam-chu thay thế.
   ========================================================================== */

:root {
	/* bậc gốc */
	--do-900:#8E0C21; --do-700:#C8102E; --do-100:#FBE7EA;
	--vang-800:#7A5A00; --vang-500:#F0B323; --vang-200:#FDEFC8;
	--cam-800:#A85508; --cam-600:#E07A1F; --cam-100:#FDF0E1;
	--dem-900:#0C1428; --dem-800:#14213D; --dem-600:#2A3A63; --dem-400:#4A5B8A;
	--kem-50:#FAF7F1;  --kem-100:#F5F1E8; --kem-300:#E2DDD1;
	--luc-800:#12523A; --luc-600:#1B6E4E; --luc-100:#E6F3EC;
	--muc-900:#17203A; --muc-600:#5B6478; --muc-400:#8A91A3;

	/* vai trò */
	--nen:        #FFFFFF;
	--nen-2:      var(--kem-100);
	--nen-3:      var(--kem-50);
	--nen-toi:    var(--dem-800);
	--muc:        var(--muc-900);
	--muc-mo:     var(--muc-600);
	--muc-sang:   #FFFFFF;
	--muc-sang-mo:#B9C2DA;
	--vien:       var(--kem-300);
	--vien-dam:   #CFC7B5;
	--vien-toi:   rgba(255,255,255,.16);
	--chinh:      var(--do-700);
	--chinh-dam:  var(--do-900);
	--trang:      var(--vang-500);
	--cam-chu:    var(--cam-800);
	--cam-nen:    var(--cam-600);
	--tot:        var(--luc-600);
	--tot-dam:    var(--luc-800);

	--chu: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--khung: 1240px;
	--bo:    10px;
	--bo-nho: 6px;
}

/* ============================================================ NỀN TẢNG === */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body.ttnd-chu, body.ttnd-trong {
	background: var(--nen);
	color: var(--muc);
	font-family: var(--chu);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
body.ttnd-chu h1, body.ttnd-chu h2, body.ttnd-chu h3, body.ttnd-chu h4,
body.ttnd-trong h1, body.ttnd-trong h2, body.ttnd-trong h3, body.ttnd-trong h4 {
	font-family: var(--chu);
	font-weight: 700;
	color: var(--muc);
	letter-spacing: -.015em;
	line-height: 1.2;
	margin: 0 0 .5em;
}

.ttnd-khung { width: 100%; max-width: var(--khung); margin: 0 auto; padding: 0 24px; }
.ttnd-khung--hep { max-width: 800px; }

.ttnd-bo-qua {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--chinh); color: #fff; padding: 12px 20px;
	font-weight: 600; text-decoration: none;
}
.ttnd-bo-qua:focus { left: 0; }
/* Vành tiêu điểm bàn phím phải khai KÈM TÊN THẺ, không viết trần.
   Flatsome có luật `a:focus, .button:focus, button:focus, input:focus
   { outline: none }`. Viết `:focus-visible` trần thì độ ưu tiên (0,1,0),
   thua luật kia (0,1,1), nên vành có màu có độ dày mà kiểu nét bị ép về
   none — không vẽ ra gì cả. Người dùng bàn phím mất dấu hoàn toàn, mà nhìn
   bằng mắt thì không thấy sai ở đâu.
   Khai kèm tên thẻ cho bằng (0,1,1); tệp con nạp sau tệp cha nên thắng. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--cam-nen);
	outline-offset: 2px;
}

.screen-reader-text {
	position:absolute !important; width:1px; height:1px; overflow:hidden;
	clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ================================================================ NÚT ==== */

/* Flatsome áp cho MỌI thẻ button và input submit: lề phải + lề dưới 1em, chữ
   in hoa, giãn chữ. Nút làm bằng thẻ <a> thì không dính, nên cùng một kiểu nút
   lúc viết hoa lúc không, và nút rộng 100% bị hụt 15px so với ô nhập phía trên.
   Chỉ gỡ ba thứ đó; chiều cao dòng giữ nguyên để không xô lệch các cụm nút. */
/* Tiêu đề nhiều dòng chia đều chữ, không để một chữ rơi lẻ xuống dòng cuối
   ("…chênh nhau ở vị / trí"). Trình duyệt cũ bỏ qua, không hại gì. */
h1, h2, h3 { text-wrap: balance; }

button, input[type="submit"], input[type="button"], input[type="reset"] {
	margin-right: 0; margin-bottom: 0; text-transform: none; letter-spacing: normal;
}

.ttnd-nut {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 24px;
	border: 1.5px solid transparent; border-radius: var(--bo-nho);
	font-family: var(--chu); font-size: 15px; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.ttnd-nut--do        { background: var(--chinh); color: #fff; }
.ttnd-nut--do:hover  { background: var(--chinh-dam); color: #fff; }
.ttnd-nut--vang      { background: var(--trang); color: var(--dem-800); }
.ttnd-nut--vang:hover{ background: #FFC846; color: var(--dem-800); }
.ttnd-nut--vien      { background: transparent; color: var(--chinh); border-color: var(--chinh); }
.ttnd-nut--vien:hover{ background: var(--do-100); color: var(--chinh-dam); }
.ttnd-nut--vien-sang { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.ttnd-nut--vien-sang:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.ttnd-nut--tat       { background: var(--kem-100); color: var(--muc-400); cursor: not-allowed; }
.ttnd-nut--to        { padding: 16px 30px; font-size: 16px; }
.ttnd-nut--rong      { width: 100%; }
.ttnd-nut[disabled]  { opacity:.5; cursor:not-allowed; }

/* ============================================================== ĐẦU TRANG */

.ttnd-dau { position: sticky; top: 0; z-index: 60; background: var(--dem-800); }
.ttnd-dau__trong { display: flex; align-items: center; gap: 20px; min-height: 66px; }

.ttnd-hieu { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
/* Cụm ba cánh Netholding thay cho chấm tròn vàng — cùng dấu hiệu với favicon
   nên tab trình duyệt và đầu trang nhận ra là một. */
.ttnd-hieu__dau { width: 32px; height: 32px; flex: none; display: block; }
.ttnd-hieu__chu { display: flex; flex-direction: column; line-height: 1.15; }
.ttnd-hieu__chu b { font-size: 16px; color: #fff; font-weight: 700; letter-spacing: -.01em; }
.ttnd-hieu__chu i { font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--trang); font-weight: 600; }

.ttnd-menu { display: flex; align-items: center; gap: 24px; }
.ttnd-menu__ds { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.ttnd-menu__ds a { color: var(--menu-chu); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 4px 0; border-bottom: 2px solid transparent; }
.ttnd-menu__ds a:hover, .ttnd-menu__ds .current-menu-item a { color: var(--trang); border-bottom-color: var(--trang); }
.ttnd-menu__cta { padding: 10px 20px; font-size: 14px; }
/* Sáu mục menu (thêm "Festival Phủ Lý") không vừa một hàng ở màn 783–1180px:
   chữ vỡ đôi, thanh đầu cao gấp đôi. Giữ mỗi mục một dòng, thu khoảng cách và
   cỡ chữ vừa đủ. Dưới 782px menu đã thu vào nút ba gạch nên không đụng tới. */
.ttnd-menu__ds a, .ttnd-menu__cta { white-space: nowrap; }
@media (min-width: 783px) and (max-width: 1180px) {
	.ttnd-menu    { gap: 14px; }
	.ttnd-menu__ds { gap: 13px; }
	.ttnd-menu__ds a { font-size: 13.5px; }
	.ttnd-menu__cta { padding: 9px 13px; font-size: 13px; }
}
@media (min-width: 783px) and (max-width: 960px) {
	/* Logo không được bóp — bóp là chữ logo vỡ dòng, thanh đầu cao gấp rưỡi. */
	.ttnd-dau .ttnd-hieu { flex-shrink: 0; }
	/* "Lịch cả tour" chỉ là neo xuống giữa trang chủ, đã có nút "Xem cả hành
	   trình" làm đúng việc đó — nhường chỗ cho các mục đi tới trang thật. */
	.ttnd-menu__ds li:has(> a[href*="#hanh-trinh"]) { display: none; }
	.ttnd-menu__ds { gap: 10px; }
	.ttnd-menu__ds a { font-size: 12.5px; }
	.ttnd-menu__cta { padding: 8px 10px; font-size: 12.5px; }
}

.ttnd-mo-menu {
	display: none; flex-direction: column; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; cursor: pointer;
	background: rgba(255,255,255,.08); color: #fff;
	border: 1px solid var(--vien-toi); border-radius: var(--bo-nho);
}
.ttnd-mo-menu:hover { background: rgba(255,255,255,.16); }
.ttnd-mo-menu span { display: block; width: 20px; height: 2px; background: #fff; margin: 2.5px 0; transition: transform .18s ease, opacity .18s ease; }
body.ttnd-menu-mo .ttnd-mo-menu span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.ttnd-menu-mo .ttnd-mo-menu span:nth-child(2) { opacity: 0; }
body.ttnd-menu-mo .ttnd-mo-menu span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* Nền trang trí phẳng: một vành trăng đặc, không quầng sáng, không đèn lồng
   bay. Giữ lại đúng một hình để khối tối không trống trơn. */
.ttnd-nen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ttnd-nen__trang {
	position: absolute; right: 6%; top: 14%;
	width: 120px; height: 120px; border-radius: 50%;
	background: var(--trang); opacity: .16;
}

/* ==================================================== DẢI THÔNG TIN ====== */
/* Dải "ngày / địa điểm / số gian / giá" — nay chỉ còn dùng trong banner của
   khối đặt gian, nhưng giữ nguyên tên lớp cũ để không phải sửa cả markup. */

.ttnd-hero__ds { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 26px; padding: 0; border: 1px solid var(--vien-toi); border-radius: var(--bo); overflow: hidden; }
.ttnd-hero__ds li { display: flex; align-items: center; gap: 11px; padding: 14px 22px; flex: 1 1 200px; border-right: 1px solid var(--vien-toi); }
.ttnd-hero__ds li:last-child { border-right: 0; }
.ttnd-hero__ds svg { width: 20px; height: 20px; fill: var(--trang); flex: none; }
.ttnd-hero__ds strong { display: block; font-size: 15px; color: #fff; }
.ttnd-hero__ds span   { display: block; font-size: 12.5px; color: var(--muc-sang-mo); }

.ttnd-dem { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--vien-toi); border-radius: var(--bo); padding: 10px 16px; margin: 0 0 26px; }
.ttnd-dem__nhan, .ttnd-dem__duoi { font-size: 13.5px; color: var(--muc-sang-mo); }
.ttnd-dem__mo { font-size: 15px; font-weight: 700; color: var(--trang); }
.ttnd-dem__o { display: flex; align-items: baseline; gap: 4px; }
.ttnd-dem__o b { font-size: 22px; font-weight: 700; color: var(--trang); font-variant-numeric: tabular-nums; }
.ttnd-dem__o i { font-style: normal; font-size: 12px; color: var(--muc-sang-mo); }

/* ============================================================== KHỐI ==== */

.ttnd-khoi { padding: 64px 0; position: relative; }
.ttnd-khoi--sang { background: var(--nen); }
.ttnd-khoi--kem  { background: var(--nen-2); }
.ttnd-khoi--toi  { background: var(--dem-800); color: #fff; }
.ttnd-khoi--toi > .ttnd-khung { position: relative; z-index: 2; }

.ttnd-td { max-width: 760px; margin: 0 0 34px; }
.ttnd-td__nhan { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cam-chu); margin-bottom: 10px; }
.ttnd-td__h { font-size: clamp(24px, 3.4vw, 36px); margin: 0 0 12px; }
.ttnd-td__p { font-size: 16.5px; color: var(--muc-mo); margin: 0; }
.ttnd-td--toi .ttnd-td__nhan { color: var(--trang); }
.ttnd-td--toi .ttnd-td__h { color: #fff; }
.ttnd-td--toi .ttnd-td__p { color: var(--muc-sang-mo); }

.ttnd-ghi-chu { font-size: 14px; color: var(--muc-mo); }
.ttnd-ghi-chu--giua { text-align: center; max-width: 700px; margin: 24px auto 0; }

/* ======================================================================
   KHỐI ĐẶT GIAN — phần quan trọng nhất trang, nên nằm ngay dưới hero.

   Hai cột: sơ đồ bên trái, bảng điều khiển bên phải DÍNH theo cuộn. Sơ đồ
   cao gấp đôi bề ngang (khu đất 60 × 130 m thật), nên bảng điều khiển phải
   bám theo — chọn một ô ở cuối sơ đồ mà phải cuộn ngược lên xem mình đã
   chọn gì là chỗ dễ bỏ cuộc nhất.
   ====================================================================== */

.ttnd-dat-gian { background: var(--nen-2); padding: 56px 0 64px; }
.ttnd-dg-luoi { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 28px; align-items: start; }

.ttnd-dg-ben { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 14px; }

/* --------------------------------------------------------- sơ đồ ------ */

.ttnd-so-do-boc { position: relative; }
.ttnd-so-do { overflow: visible; }
/* Khu đất thật là 60 × 130 m — sơ đồ vì thế cao gấp đôi bề ngang. Giữ đúng
   tỉ lệ chứ không kéo ngang cho vừa màn hình: người thuê gian nhìn sơ đồ để
   ước lượng quãng đường khách phải đi, bóp méo tỉ lệ là nói sai chuyện đó. */
.ttnd-quang-truong {
	position: relative;
	width: 100%; max-width: 620px; margin: 0 auto;
	aspect-ratio: 60 / 138;
	/* Mặt quảng trường: lưới chấm mờ, mỗi chấm cách 3 m — đúng cỡ một gian —
	   để mắt ước được khoảng cách mà không thành hoạ tiết rối. */
	background-color: var(--dem-800);
	background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.2px);
	background-size: calc(100% / 20) calc(100% / 46);
	background-position: calc(100% / 40) calc(100% / 92);
	border-radius: var(--bo-nho);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
	/* PHẢI có pan-x, không thì hệ bạt D mất tăm trên điện thoại.

	   Trên màn hẹp sơ đồ rộng 500px nằm trong khung ~340px và cuộn ngang trong
	   khung đó (xem @media 782px). Bản trước để 'pan-y pinch-zoom': trình duyệt
	   không nhận vuốt ngang, mà cả khung gần như chỉ có sơ đồ, nên không còn
	   chỗ nào vuốt được — một phần tư bên phải khu đất (hệ bạt D 181–200, khu
	   ẩm thực, khu vui chơi) không tài nào tới được. Người dùng iPhone báo
	   đúng chỗ này.

	   Bỏ pan-x đi vốn để quét chọn nhiều gian bằng cách kéo ngang qua các ô.
	   Nhưng quét chọn ĐÃ tắt trên cảm ứng từ trước (xem dat-gian.js: pointerdown
	   thoát ngay khi pointerType === 'touch'), còn chuột thì không đọc
	   touch-action. Tức thuộc tính này chỉ còn tác dụng phụ, không còn tác dụng
	   chính. */
	touch-action: pan-x pan-y pinch-zoom;   /* vẫn phóng bằng hai ngón được */
	user-select: none; -webkit-user-select: none;
}

.ttnd-gian {
	position: absolute;
	display: flex; align-items: center; justify-content: center;
	margin: 0; padding: 0;
	border: 1px solid; border-radius: 3px;
	font-family: var(--chu); font-size: 9px; font-weight: 700; letter-spacing: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .28);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	/* Theme cha đặt min-height cho mọi thẻ button (khoảng 20px). Ô gian chỉ
	   cao ~13px nên bị kéo giãn và các hàng chồng lên nhau. Phải gỡ cả hai
	   mức tối thiểu chứ không riêng chiều cao. */
	min-height: 0; min-width: 0;
	box-sizing: border-box; overflow: hidden;
	transition: background-color .1s ease, color .1s ease;
	transform: scale(.92);
}
.ttnd-gian__ma { pointer-events: none; }

.ttnd-gian--trong { background: #fff; border-color: var(--luc-600); color: var(--luc-800); }
/* :not(--chon) là BẮT BUỘC, không phải cho gọn.

   Ô đang chọn mang CẢ HAI lớp: --trong (còn bán) và --chon (đã chọn). Mà
   ".ttnd-gian--trong:hover" nặng hơn ".ttnd-gian--chon" một hạng, nên nếu
   không loại trừ thì rê chuột lên chính ô mình vừa chọn là nền xanh đậm biến
   mất, còn chữ thì vẫn trắng theo --chon — số gian gần như đọc không ra.
   Trên điện thoại còn nặng hơn, xem quy tắc (pointer: coarse) bên dưới. */
.ttnd-gian--trong:not(.ttnd-gian--chon):hover { background: var(--luc-100); }

/* Đang giữ chỗ dùng viền ĐỨT, đã đặt dùng gạch chéo — người không phân biệt
   được màu vẫn đọc được trạng thái mà không phải rê chuột từng ô. */
.ttnd-gian--giu {
	background: var(--vang-200); border-color: var(--vang-800); border-style: dashed;
	color: var(--vang-800); cursor: not-allowed;
}
.ttnd-gian--dat {
	border-color: var(--do-700); color: var(--do-900); cursor: not-allowed;
	background: repeating-linear-gradient(45deg, var(--do-100) 0 3px, #F6D2D8 3px 6px);
}
/* Gian ban tổ chức không mở bán: xám đặc, không viền màu, không gạch chéo —
   phải nhìn ra ngay là "không phải hàng bán", chứ không phải "đã có người
   lấy mất". Hai chuyện đó dẫn tới hai hành động khác nhau của khách. */
.ttnd-gian--khoa {
	background: var(--kem-100); border-color: var(--vien-dam);
	color: var(--muc-600); cursor: not-allowed;
}
/* Khối đơn vị đối tác (LMHTX) — dãy ban tổ chức giữ sẵn và các đơn đối tác.

   Trước đây dùng chung màu vàng viền đứt với "đang giữ chỗ", vì trong dữ liệu
   hai thứ cùng trạng thái 'giu'. Nhưng với người xem sơ đồ thì khác hẳn: gian
   khách giữ chỗ có thể quá hạn mà nhả ra, còn dãy này thì không bao giờ tới
   lượt mình. Nhìn 22 ô vàng liền khối rồi chờ nó nhả là chờ hụt.

   Ô TÔ ĐẶC màu cam, không phải nền nhạt viền màu như bốn trạng thái kia. Bản
   trước dùng xanh nhạt #DCE3F5: đúng là khác màu, nhưng cùng kiểu "nền nhạt"
   với trắng của gian còn trống và vàng nhạt của gian giữ chỗ, nên ở cỡ ô 17px
   trên điện thoại ba thứ nhoè vào nhau. Một mảng đặc thì nhận ra từ xa, không
   cần đọc màu.

   Chữ dùng xanh đêm chứ không phải trắng: trắng trên #E07A1F chỉ được 2,9:1,
   dưới ngưỡng dễ đọc, trong khi #0C1428 trên nền đó được 6,2:1. */
.ttnd-gian--btc {
	background: var(--doi-tac-nen); border-color: var(--doi-tac-vien); border-style: solid; border-width: 1.5px;
	color: var(--doi-tac-chu); cursor: not-allowed;
}

/* Màu riêng của đơn vị giữ sẵn (Phủ Lý): vàng chanh — sáng hơn hẳn vàng cổng
   vào (#F0B323) và cam "Đã đăng ký", chữ tối đọc rõ. */
.ttnd-gian--btc.ttnd-gian--mau-vang { background: #FFE066; border-color: #8A6A00; color: #2B2000; }
.ttnd-chip--btc.ttnd-chip--mau-vang { background: #FFE066; border-color: #8A6A00; color: #2B2000; }
.ttnd-chip--btc.ttnd-chip--mau-vang i { color: #2B2000; }
.ttnd-ct--mau-vang::before { background: #FFE066; border-color: #8A6A00; }

.ttnd-gian--chon {
	background: var(--luc-600); border-color: var(--luc-800); color: #fff;
	transform: scale(1); z-index: 4;
}
.ttnd-gian--noi { outline: 2px solid var(--trang); outline-offset: 1px; z-index: 3; }

/* Ô đang bị quét qua trong lúc kéo chuột — báo trước sẽ chọn, chưa chọn hẳn. */
.ttnd-gian[aria-disabled="true"] { cursor: not-allowed; }

.ttnd-moc {
	position: absolute;
	display: flex; align-items: center; justify-content: center; text-align: center;
	border-radius: 2px; padding: 2px;
	font-size: 9px; font-weight: 600; line-height: 1.2; z-index: 1;
}
.ttnd-moc--san-khau  { background: var(--do-700); color: #fff; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ttnd-moc--hau-dai   { background: var(--dem-600); color: var(--muc-sang-mo); font-size: 8px; }
.ttnd-moc--am-thuc   { background: rgba(240,179,35,.10); border: 1px solid rgba(240,179,35,.45); border-radius: 4px; color: var(--vang-500); font-weight: 700; }
.ttnd-moc--vui-choi  { background: rgba(242,120,160,.10); border: 1px solid rgba(242,140,170,.45); border-radius: 4px; color: #F2B8C8; font-weight: 700; }
.ttnd-moc--phun-nuoc { background: rgba(90,170,230,.12); border: 1px solid rgba(110,180,235,.45); border-radius: 50% / 14%; color: #9FD0EE; font-weight: 700; }
/* Nền mái bạt: nhạt, chỉ đủ gom cụm. */
.ttnd-moc--nen-bat   { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 5px; padding: 0; z-index: 0; }
/* Lối đi: không còn là khối đặc nặng như một khu nhà. Nền trong suốt nhẹ,
   giữa có vạch đứt chạy dọc như vạch kẻ đường đi bộ. */
.ttnd-moc--loi-chinh,
.ttnd-moc--loi-doc,
.ttnd-moc--loi-giua {
	color: var(--muc-sang-mo); font-size: 8px; font-weight: 600; letter-spacing: .08em;
	background-color: rgba(42, 58, 99, .45);
	border-radius: 3px;
}
.ttnd-moc--loi-chinh,
.ttnd-moc--loi-doc {
	writing-mode: vertical-rl;
	background-image: linear-gradient(rgba(255,255,255,.22) 50%, transparent 0);
	background-size: 1px 10px; background-repeat: repeat-y; background-position: center top;
}
.ttnd-moc--loi-chinh span,
.ttnd-moc--loi-doc span { background: var(--dem-800); padding: 4px 0; border-radius: 2px; }
/* Lối đi lớn giữa các dải bạt: không tô nền, chỉ vạch đứt chính giữa. Nằm
   dưới đài phun nước (z-index 0) để chỗ hai hình giáp nhau không lộ viền. */
.ttnd-moc--loi-lon {
	writing-mode: vertical-rl; z-index: 0; padding: 0;
	color: var(--muc-sang-mo); font-size: 8px; font-weight: 600; letter-spacing: .08em;
	background-image: linear-gradient(rgba(255,255,255,.22) 50%, transparent 0);
	background-size: 1px 10px; background-repeat: repeat-y; background-position: center top;
}
.ttnd-moc--loi-lon span { background: var(--dem-800); padding: 4px 0; border-radius: 2px; }
.ttnd-moc--cong      { background: var(--trang); color: var(--dem-800); font-weight: 800; letter-spacing: .18em; }
/* Cổng phụ: vạch vàng cùng màu cổng chính, đọc ra ngay là "lối vào". Vạch
   bên lề dài 8 m nên chữ "Cổng phụ" dựng đứng nằm lọt trong vạch, kể cả
   trên điện thoại; cổng sau sân khấu nằm ngang nên chữ viết ngang. */
.ttnd-moc--cong-phu,
.ttnd-moc--cong-phu-ngang {
	background: var(--trang); color: var(--dem-800);
	font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .02em;
	padding: 0; overflow: hidden; white-space: nowrap; z-index: 2;
}
.ttnd-moc--cong-phu { writing-mode: vertical-rl; }
/* Màn 320px: vạch chỉ còn 37px, chữ 8px dài 40px — hạ một nấc cho lọt. */
@media (max-width: 360px) {
	.ttnd-moc.ttnd-moc--cong-phu, .ttnd-moc.ttnd-moc--cong-phu-ngang { font-size: 7px; letter-spacing: 0; }
}
.ttnd-ct--cong::before { background: var(--trang); border-color: var(--trang); }
.ttnd-moc--nhan-khu  { background: none; color: var(--muc-sang-mo); font-size: 8.5px; font-weight: 700; justify-content: flex-start; padding-left: 2px; }

/* ------------------------------------------------------- chú thích ---- */

.ttnd-chu-thich { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; font-size: 13px; color: var(--muc-mo); }
.ttnd-ct { display: inline-flex; align-items: center; gap: 7px; }
.ttnd-ct::before { content:""; width: 15px; height: 15px; border: 1.5px solid; border-radius: 2px; }
.ttnd-ct--trong::before { background: #fff; border-color: var(--luc-600); }
.ttnd-ct--giu::before   { background: var(--vang-200); border-color: var(--vang-800); border-style: dashed; }
.ttnd-ct--dat::before   { background: var(--do-100); border-color: var(--do-700); }
.ttnd-ct--khoa::before  { background: var(--kem-100); border-color: var(--vien-dam); }
.ttnd-ct--doi-tac::before { background: var(--doi-tac-nen); border-color: var(--doi-tac-vien); }
.ttnd-ct-tach { width: 1px; height: 16px; background: var(--vien); }
.ttnd-ct-hang { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
.ttnd-ct-hang i { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* -------------------------------------------- bảng điều khiển bên phải - */

.ttnd-the-gian {
	background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 18px;
}
.ttnd-the-gian__dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ttnd-the-gian__ma  { font-size: 24px; font-weight: 700; color: var(--muc); font-variant-numeric: tabular-nums; }
.ttnd-the-gian__tt  { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--bo-nho); }
.ttnd-the-gian__tt--trong { background: var(--luc-100); color: var(--luc-800); }
.ttnd-the-gian__tt--giu   { background: var(--vang-200); color: var(--vang-800); }
.ttnd-the-gian__tt--dat   { background: var(--do-100); color: var(--do-900); }
.ttnd-the-gian__tt--khoa  { background: var(--kem-100); color: var(--muc-600); }
.ttnd-the-gian__loai { font-size: 14px; font-weight: 600; color: var(--muc-mo); margin-bottom: 12px; }
.ttnd-the-gian__bang { margin: 0 0 14px; }
.ttnd-the-gian__bang div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--vien); }
.ttnd-the-gian__bang dt { font-size: 13px; color: var(--muc-mo); margin: 0; }
.ttnd-the-gian__bang dd { font-size: 14px; font-weight: 700; margin: 0; }
.ttnd-the-gian .ttnd-nut { width: 100%; }
/* Luật display ở trên (flex, width 100%) thắng thuộc tính hidden của trình
   duyệt: dòng ngành hàng rỗng vẫn hiện, và nút "Chọn gian" vẫn hiện cả với
   gian đã có người giữ. */
.ttnd-the-gian [hidden] { display: none !important; }

/* Ngành hàng của các gian lân cận — dùng chung cho thẻ gian và nhãn nổi. */
.ttnd-gan { margin: 0 0 14px; }
.ttnd-gan__dau { font-size: 12.5px; font-weight: 700; color: var(--muc-mo); margin: 0 0 6px; }
.ttnd-gan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ttnd-gan li {
	font-size: 13.5px; line-height: 1.45; margin: 0;
	padding: 5px 8px; background: var(--do-100); border-left: 3px solid var(--do-700); border-radius: var(--bo-nho);
}
.ttnd-gan li b { font-variant-numeric: tabular-nums; margin-right: 4px; }

/* Nhãn nổi khi rê chuột lên ô gian. Gắn vào body, toạ độ fixed theo ô. */
.ttnd-nhan-gian {
	position: fixed; z-index: 9999; max-width: 280px; min-width: 170px;
	background: var(--nen); color: var(--muc);
	border: 1px solid var(--vien); border-radius: var(--bo-nho);
	box-shadow: 0 6px 20px rgba(20, 24, 40, .18);
	padding: 9px 11px; pointer-events: none;
}
/* CHỈ cái nút nhận chạm, thân nhãn thì không.

   Bản trước cho cả nhãn pointer-events:auto để bấm được nút bên trong. Nhưng
   nhãn rộng 203 × 211px trong khi ô gian trên điện thoại chỉ 17px — nó nằm đè
   lên 15 ô. Chạm sang gian bên cạnh là trúng thân nhãn, mà thân nhãn không có
   việc gì để làm nên cú chạm mất hẳn; kể cả bộ đóng nhãn cũng bỏ qua vì target
   vẫn nằm trong .ttnd-nhan-gian. Người dùng phải chạm vài lần mới trúng được
   gian thứ hai.

   Để thân nhãn trong suốt với chạm thì cú chạm đi thẳng xuống ô gian bên dưới
   và mở đúng nhãn của ô đó — đúng cái người ta định làm. */
.ttnd-nhan-gian__dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ttnd-nhan-gian__dau b { font-size: 14px; font-variant-numeric: tabular-nums; }
.ttnd-nhan-gian__tt { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: var(--bo-nho); white-space: nowrap; }
.ttnd-nhan-gian__tt--trong { background: var(--luc-100); color: var(--luc-800); }
.ttnd-nhan-gian__tt--giu   { background: var(--vang-200); color: var(--vang-800); }
.ttnd-nhan-gian__tt--dat   { background: var(--do-100); color: var(--do-900); }
.ttnd-nhan-gian__tt--khoa  { background: var(--kem-100); color: var(--muc-600); }
.ttnd-nhan-gian__nganh { font-size: 14px; font-weight: 600; line-height: 1.4; margin-top: 6px; }
.ttnd-gan--nho { margin: 7px 0 0; }
.ttnd-gan--nho li { font-size: 12.5px; padding: 3px 7px; }

.ttnd-thanh { height: 8px; background: var(--kem-100); border-radius: 999px; overflow: hidden; }
.ttnd-thanh__day { height: 100%; background: var(--cam-nen); }
.ttnd-thanh__chu { font-size: 12.5px; color: var(--muc-mo); margin: 8px 0 0; }

.ttnd-gia-nhanh { list-style: none; margin: 0; padding: 0; }
.ttnd-gia-nhanh li { display: grid; grid-template-columns: 10px 1fr auto; gap: 6px 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--vien); }
.ttnd-gia-nhanh i { width: 10px; height: 10px; border-radius: 2px; }
.ttnd-gia-nhanh span { font-size: 13.5px; }
.ttnd-gia-nhanh b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ttnd-gia-nhanh em { grid-column: 2 / -1; font-style: normal; font-size: 12px; color: var(--muc-mo); }

/* ------- khay chọn dưới màn hình, chỉ dùng trên màn hẹp ------- */
.ttnd-khay { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--dem-800); border-top: 2px solid var(--trang); padding: 12px 0; }
.ttnd-khay__trong { max-width: var(--khung); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ttnd-khay__nhan { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muc-sang-mo); }
.ttnd-khay__ma { font-size: 15px; font-weight: 700; color: var(--trang); }
.ttnd-khay__tien strong { font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }
.ttnd-khay__ds { margin-right: auto; }
@media (min-width: 1041px) { .ttnd-khay { display: none; } }

/* ======================================================== BÁO GIÁ ======= */

.ttnd-gia-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ttnd-gia {
	display: flex; flex-direction: column;
	background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden;
}
.ttnd-gia--het { opacity: .7; }
.ttnd-gia--phu-thu { border-style: dashed; border-color: var(--vien-dam); }

.ttnd-gia__anh { position: relative; height: 86px; background: var(--hang); display: flex; align-items: center; justify-content: center; }
.ttnd-gia__ma-khu { font-size: 34px; font-weight: 800; color: rgba(255,255,255,.9); line-height: 1; font-variant-numeric: tabular-nums; }
.ttnd-gia__hinh { display: none; }

.ttnd-gia__than { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.ttnd-gia__ten { font-size: 19px; margin: 0 0 3px; }
.ttnd-gia__khu { font-size: 13px; color: var(--cam-chu); font-weight: 600; margin: 0 0 14px; }
.ttnd-gia__so { display: flex; align-items: baseline; gap: 5px; margin: 0 0 14px; }
.ttnd-gia__so i { font-style: normal; font-size: 22px; font-weight: 700; color: var(--cam-chu); }
.ttnd-gia__so b { font-size: 28px; font-weight: 800; color: var(--chinh); line-height: 1; font-variant-numeric: tabular-nums; }
.ttnd-gia--phu-thu .ttnd-gia__so b { color: var(--cam-chu); }
.ttnd-gia__so span { font-size: 13px; color: var(--muc-mo); }

.ttnd-gia__bang { margin: 0 0 14px; border-top: 1px solid var(--vien); }
.ttnd-gia__bang div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--vien); }
.ttnd-gia__bang dt { font-size: 13px; color: var(--muc-mo); margin: 0; }
.ttnd-gia__bang dd { font-size: 13px; font-weight: 700; margin: 0; text-align: right; }
.ttnd-gia__bang .ttnd-het { color: var(--do-900); }
.ttnd-gia__bang .ttnd-it  { color: var(--cam-chu); }

.ttnd-gia__tom-tat { font-size: 14px; color: var(--muc-mo); margin: 0 0 12px; }
.ttnd-gia__gom { list-style: none; margin: 0 0 18px; padding: 0; }
.ttnd-gia__gom li { position: relative; padding-left: 22px; margin-bottom: 6px; font-size: 13.5px; color: var(--muc-mo); }
.ttnd-gia__gom li::before {
	content:""; position: absolute; left: 3px; top: 7px;
	width: 8px; height: 4px; border-left: 2px solid var(--tot); border-bottom: 2px solid var(--tot);
	transform: rotate(-45deg);
}
.ttnd-gia__nut { margin-top: auto; }
.ttnd-gia .ttnd-nut { width: 100%; }

.ttnd-luu-y { margin-top: 26px; background: var(--nen); border: 1px solid var(--vien); border-left: 4px solid var(--cam-nen); border-radius: var(--bo); padding: 22px 26px; }
.ttnd-luu-y h3 { font-size: 17px; margin: 0 0 12px; }
.ttnd-luu-y ul { margin: 0; padding-left: 20px; }
.ttnd-luu-y li { font-size: 14.5px; color: var(--muc-mo); margin-bottom: 7px; }

/* ============================================================ QUY TRÌNH = */

.ttnd-buoc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0 0 40px; padding: 0; }
.ttnd-buoc__o { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 22px 20px; }
.ttnd-buoc__so { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--bo-nho); background: var(--chinh); color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.ttnd-buoc__o h3 { font-size: 17px; margin: 0 0 7px; }
.ttnd-buoc__o p { font-size: 14px; color: var(--muc-mo); margin: 0; }
.ttnd-buoc__o--nhan { border-color: var(--luc-600); border-width: 2px; }
.ttnd-buoc__o--nhan .ttnd-buoc__so { background: var(--luc-600); }

.ttnd-thanh-toan-tt { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 26px; }
.ttnd-thanh-toan-tt h3 { font-size: 19px; margin: 0 0 6px; }
.ttnd-thanh-toan-tt > p { font-size: 14.5px; color: var(--muc-mo); margin: 0 0 18px; }
.ttnd-tt-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ttnd-tt { border: 1px solid var(--vien); border-radius: var(--bo-nho); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.ttnd-tt b { font-size: 14.5px; }
.ttnd-tt span { font-size: 13px; color: var(--muc-mo); }
.ttnd-tt i { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: auto; padding-top: 7px; }
.ttnd-tt--bat { border-color: var(--luc-600); background: var(--luc-100); }
.ttnd-tt--bat i { color: var(--tot-dam); }
.ttnd-tt--cho { background: var(--kem-100); }
.ttnd-tt--cho i { color: var(--muc-400); }

/* ======================================================== GIỚI THIỆU ==== */

.ttnd-gt { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; }
.ttnd-gt__van p { font-size: 16px; line-height: 1.75; color: var(--muc-mo); margin: 0 0 16px; }
.ttnd-gt__van strong { color: var(--muc); }
.ttnd-gt__van h3 { font-size: 19px; margin: 26px 0 12px; }
.ttnd-the-nho { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ttnd-the-nho li { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-nho); padding: 7px 13px; font-size: 13.5px; }

.ttnd-gt__cot { display: flex; flex-direction: column; gap: 12px; }
.ttnd-loi-ich { position: relative; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 18px 20px 18px 62px; }
.ttnd-loi-ich__so { position: absolute; left: 20px; top: 18px; font-size: 20px; font-weight: 800; color: var(--vien-dam); line-height: 1.2; font-variant-numeric: tabular-nums; }
.ttnd-loi-ich h3 { font-size: 16.5px; margin: 0 0 5px; }
.ttnd-loi-ich p { font-size: 14px; color: var(--muc-mo); margin: 0; }

.ttnd-so-lieu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--vien); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; margin-top: 4px; }
.ttnd-so-lieu div { background: var(--dem-800); padding: 16px 12px; text-align: center; }
.ttnd-so-lieu b { display: block; font-size: 23px; font-weight: 700; color: var(--trang); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ttnd-so-lieu span { display: block; font-size: 12.5px; color: var(--muc-sang-mo); margin-top: 5px; line-height: 1.35; }

/* ============================================================ BIỂU MẪU == */

.ttnd-form { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 28px; }
.ttnd-form__loi { background: var(--do-100); border: 1px solid var(--do-700); border-left: 4px solid var(--do-700); border-radius: var(--bo-nho); padding: 13px 16px; margin-bottom: 20px; font-size: 14.5px; font-weight: 600; color: var(--do-900); }

.ttnd-nhom { border: 0; margin: 0 0 26px; padding: 0; }
.ttnd-nhom legend { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; margin-bottom: 14px; padding: 0; }
.ttnd-nhom legend span { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: var(--bo-nho); background: var(--chinh); color: #fff; font-size: 13px; font-weight: 700; }
.ttnd-nhom legend em { font-style: normal; font-size: 13.5px; font-weight: 400; color: var(--muc-mo); }

.ttnd-o-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ttnd-o { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.ttnd-o--rong { grid-column: 1 / -1; }
.ttnd-o label { font-size: 13.5px; font-weight: 600; }
.ttnd-o label b { color: var(--chinh); }

.ttnd-o input[type="text"], .ttnd-o input[type="tel"], .ttnd-o input[type="email"],
.ttnd-o select, .ttnd-o textarea {
	width: 100%;
	/* 16px là bắt buộc: dưới mức này Safari trên iPhone tự phóng to trang khi
	   chạm vào ô nhập, và không tự thu lại. */
	font-family: var(--chu); font-size: 16px; line-height: 1.5;
	padding: 11px 13px;
	background: var(--nen);
	border: 1.5px solid var(--vien-dam); border-radius: var(--bo-nho);
	color: var(--muc);
	transition: border-color .14s ease;
}
.ttnd-o textarea { resize: vertical; min-height: 80px; }
/* Bấm chuột vào ô nhập thì chỉ đổi màu viền, không cần thêm vành. Nhưng
   :focus trần cũng bắt cả lúc đi bằng bàn phím — phải loại trừ, nếu không
   chính luật này lại xoá vành tiêu điểm vừa dựng ở trên. */
.ttnd-o input:focus, .ttnd-o select:focus, .ttnd-o textarea:focus { border-color: var(--cam-nen); }
.ttnd-o input:focus:not(:focus-visible),
.ttnd-o select:focus:not(:focus-visible),
.ttnd-o textarea:focus:not(:focus-visible) { outline: none; }
.ttnd-o input[type="file"] { font-size: 14px; padding: 9px 0; border: 0; }
.ttnd-o--loi input, .ttnd-o--loi select, .ttnd-o--loi textarea { border-color: var(--do-700); }
.ttnd-goi-y { font-size: 12.5px; color: var(--muc-mo); }
.ttnd-loi-o { display: block; font-size: 13px; font-weight: 600; color: var(--do-900); }

.ttnd-dong-y { margin: 0 0 18px; }
.ttnd-dong-y label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muc-mo); cursor: pointer; }
.ttnd-dong-y input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--chinh); }
.ttnd-dong-y a { color: var(--cam-chu); font-weight: 600; }
.ttnd-dong-y b { color: var(--chinh); }

/* ============================================================ CÁC HỘP === */

.ttnd-hop { border: 1px solid var(--vien); border-radius: var(--bo); padding: 20px 24px; margin: 0 0 22px; }
.ttnd-hop h1, .ttnd-hop h2, .ttnd-hop h3 { margin: 0 0 8px; font-size: 19px; }
.ttnd-hop p:last-child { margin-bottom: 0; }
.ttnd-hop--tot      { background: var(--luc-100); border-color: var(--luc-600); border-left: 4px solid var(--luc-600); }
.ttnd-hop--tot h2   { color: var(--tot-dam); }
.ttnd-hop--canh-bao { background: var(--do-100); border-color: var(--do-700); border-left: 4px solid var(--do-700); }
.ttnd-hop--canh-bao h1, .ttnd-hop--canh-bao h2 { color: var(--do-900); }
.ttnd-hop--giu      { background: var(--vang-200); border-color: var(--vang-500); border-left: 4px solid var(--vang-500); }
.ttnd-hop--giu h2   { color: var(--vang-800); }

/* ======================================================== TRANG ĐƠN ===== */

.ttnd-trang-don { padding-top: 44px; }
.ttnd-don-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.ttnd-don-dau__nhan { width: 100%; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cam-chu); font-weight: 700; }
.ttnd-don-dau h1 { font-size: clamp(26px, 4.6vw, 36px); margin: 0; font-variant-numeric: tabular-nums; }
.ttnd-nhan-tt { font-size: 12.5px; font-weight: 700; padding: 5px 13px; border-radius: var(--bo-nho); }
.ttnd-nhan-tt--cho-thanh-toan { background: var(--vang-200); color: var(--vang-800); }
.ttnd-nhan-tt--da-thanh-toan  { background: var(--luc-100); color: var(--tot-dam); }
.ttnd-nhan-tt--da-xac-nhan    { background: #E3EBFA; color: #16376E; }
.ttnd-nhan-tt--huy            { background: var(--do-100); color: var(--do-900); }

/* --- khối "đã giữ chỗ": việc chính của trang xác nhận --- */
.ttnd-giu-lon { background: var(--luc-100); border: 2px solid var(--luc-600); border-radius: var(--bo); padding: 24px 26px; margin-bottom: 26px; }
.ttnd-giu-lon__dau { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ttnd-giu-lon__dau svg { width: 34px; height: 34px; fill: var(--luc-600); flex: none; }
.ttnd-giu-lon__dau h2 { font-size: 22px; margin: 0 0 3px; color: var(--tot-dam); }
.ttnd-giu-lon__dau p { font-size: 14.5px; color: var(--muc-mo); margin: 0; }

.ttnd-giu-lon__gian { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 16px; padding: 0; }
.ttnd-giu-lon__gian li { background: var(--nen); border: 1px solid var(--luc-600); border-radius: var(--bo-nho); padding: 10px 16px; min-width: 108px; }
.ttnd-giu-lon__gian b { display: block; font-size: 20px; font-weight: 700; color: var(--tot-dam); font-variant-numeric: tabular-nums; }
.ttnd-giu-lon__gian span { display: block; font-size: 12.5px; color: var(--muc-mo); }
.ttnd-giu-lon__gian em { font-style: normal; font-size: 12.5px; color: var(--muc-mo); }
.ttnd-giu-lon__han { font-size: 14.5px; color: var(--muc-mo); margin: 0; }

.ttnd-tiep { counter-reset: b; list-style: none; margin: 0 0 26px; padding: 0; }
.ttnd-tiep li { counter-increment: b; position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--vien); }
.ttnd-tiep li::before {
	content: counter(b); position: absolute; left: 0; top: 14px;
	width: 28px; height: 28px; border-radius: var(--bo-nho);
	background: var(--kem-100); color: var(--muc); font-size: 14px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.ttnd-tiep b { display: block; font-size: 15.5px; margin-bottom: 2px; }
.ttnd-tiep span { font-size: 14px; color: var(--muc-mo); }

.ttnd-tt-sau { border: 1px solid var(--vien); border-radius: var(--bo); margin-bottom: 26px; background: var(--nen); }
.ttnd-tt-sau summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 16px 20px; cursor: pointer; font-weight: 700; font-size: 16px; }
.ttnd-tt-sau summary em { font-style: normal; font-size: 13.5px; font-weight: 400; color: var(--muc-mo); }
.ttnd-tt-sau[open] summary { border-bottom: 1px solid var(--vien); }
.ttnd-tt-hai-cot { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; padding: 20px; }
.ttnd-qr { text-align: center; }
.ttnd-qr h3, .ttnd-ck h3 { font-size: 16px; margin: 0 0 12px; }
.ttnd-qr img { max-width: 100%; height: auto; border: 1px solid var(--vien); border-radius: var(--bo-nho); }
.ttnd-qr__chu { font-size: 12.5px; color: var(--muc-mo); margin: 10px 0 0; }
.ttnd-ck__bang { margin: 0 0 14px; }
.ttnd-ck__bang div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--vien); }
.ttnd-ck__bang dt { font-size: 13px; color: var(--muc-mo); margin: 0; }
.ttnd-ck__bang dd { margin: 0; text-align: right; }
.ttnd-ck__bang b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ttnd-ck__nd b { color: var(--chinh); letter-spacing: .04em; }
.ttnd-ck__canh-bao { background: var(--vang-200); border-radius: var(--bo-nho); padding: 11px 13px; font-size: 13px; color: var(--vang-800); margin: 0; }
.ttnd-cong { display: flex; flex-wrap: wrap; gap: 10px; }

.ttnd-don-h2 { font-size: 20px; margin: 0 0 12px; }
.ttnd-don-bang { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 6px 20px; margin: 0 0 20px; }
.ttnd-don-bang div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--vien); }
.ttnd-don-bang div:last-child { border-bottom: 0; }
.ttnd-don-bang dt { font-size: 13.5px; color: var(--muc-mo); margin: 0; }
.ttnd-don-bang dd { font-size: 14px; margin: 0; text-align: right; }

/* ============================================================= TIN TỨC == */

.ttnd-tin-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ttnd-tin { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; display: flex; flex-direction: column; }
.ttnd-tin__anh { display: block; aspect-ratio: 12 / 7; overflow: hidden; background: var(--dem-800); position: relative; }
.ttnd-tin__anh img { width: 100%; height: 100%; object-fit: cover; }
.ttnd-tin__long { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--trang); opacity: .5; }
.ttnd-tin__than { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ttnd-tin__muc { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cam-chu); background: var(--cam-100); border-radius: var(--bo-nho); padding: 3px 10px; margin-bottom: 9px; }
.ttnd-tin h2, .ttnd-tin h3 { font-size: 17.5px; margin: 0 0 8px; }
.ttnd-tin h2 a, .ttnd-tin h3 a { color: var(--muc); text-decoration: none; display: inline-block; padding: 2px 0; line-height: 1.4; }
.ttnd-tin h2 a:hover, .ttnd-tin h3 a:hover { color: var(--chinh); }
.ttnd-tin p { font-size: 14px; color: var(--muc-mo); margin: 0 0 12px; }
.ttnd-tin time { font-size: 12.5px; color: var(--muc-400); margin-top: auto; }
.ttnd-xem-them { text-align: center; margin-top: 30px; }

.ttnd-van h1 { font-size: clamp(26px, 4.2vw, 38px); margin-bottom: 16px; }
.ttnd-van__tren { font-size: 13.5px; color: var(--muc-mo); display: flex; gap: 8px; margin: 0 0 10px; }
.ttnd-van__tren a { color: var(--cam-chu); font-weight: 600; text-decoration: none; }
.ttnd-van__anh { margin: 0 0 22px; border-radius: var(--bo); overflow: hidden; }
.ttnd-van p, .ttnd-van li { font-size: 16.5px; line-height: 1.78; color: var(--muc-mo); }
.ttnd-van h2 { font-size: 24px; margin: 30px 0 10px; }
.ttnd-van h3 { font-size: 20px; margin: 24px 0 8px; }
.ttnd-van a { color: var(--cam-chu); }
.ttnd-van blockquote { border-left: 4px solid var(--trang); background: var(--vang-200); margin: 20px 0; padding: 14px 20px; }
.ttnd-van table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.ttnd-van th, .ttnd-van td { border: 1px solid var(--vien); padding: 9px 12px; text-align: left; }
.ttnd-van th { background: var(--kem-100); }
.ttnd-van__cta { margin-top: 38px; }

.ttnd-phan-trang { margin-top: 34px; text-align: center; }
.ttnd-phan-trang .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0 3px; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-nho); color: var(--muc); text-decoration: none; font-weight: 600; }
.ttnd-phan-trang .current { background: var(--chinh); border-color: var(--chinh); color: #fff; }

/* ================================================================ CTA === */

.ttnd-cta { position: relative; background: var(--chinh); color: #fff; padding: 56px 0; }
.ttnd-cta .ttnd-nen__trang { opacity: .12; }
.ttnd-cta__trong { position: relative; z-index: 2; }
.ttnd-cta h2 { font-size: clamp(23px, 3.6vw, 34px); color: #fff; margin: 0 0 10px; }
.ttnd-cta p { font-size: 16px; color: var(--sang-1); margin: 0 0 22px; }
.ttnd-cta__nut { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================== 404 ===== */

.ttnd-404 { text-align: center; padding: 84px 0; }
.ttnd-404__so { font-size: 68px; font-weight: 800; color: var(--trang); line-height: 1; margin: 0; }
.ttnd-404 h1 { color: #fff; font-size: 28px; }
.ttnd-404 p { color: var(--muc-sang-mo); }
.ttnd-404__nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

/* ========================================================== CHÂN TRANG == */

.ttnd-chan { position: relative; background: var(--dem-900); color: var(--muc-sang-mo); padding: 56px 0 0; }
/* Cột lịch tour chứa bốn dòng ngày tháng dài, cột dấu hiệu chỉ có logo và
   một câu — chia ba phần bằng nhau thì cột lịch chật mà cột dấu hiệu thừa. */
.ttnd-chan__luoi { position: relative; z-index: 2; display: grid; grid-template-columns: 0.9fr 1.05fr 1.15fr; gap: 40px 48px; }
.ttnd-chan h2 { font-size: 15px; color: #fff; margin: 0 0 14px; letter-spacing: .02em; }
.ttnd-hieu--chan { margin-bottom: 14px; }
.ttnd-chan__mo-ta { font-size: 14px; margin: 0 0 16px; }
.ttnd-chan__to-chuc span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muc-400); }
.ttnd-chan__to-chuc strong { color: #fff; font-size: 15px; }
.ttnd-chan__ds { list-style: none; margin: 0 0 18px; padding: 0; }
.ttnd-chan__ds li { margin-bottom: 12px; font-size: 14px; }
.ttnd-chan__ds span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muc-400); margin-bottom: 2px; }
.ttnd-chan__ds a { color: var(--trang); text-decoration: none; }
.ttnd-chan__ds a:hover { text-decoration: underline; }
.ttnd-chan__lon { font-size: 21px !important; font-weight: 700; }
/* Menu chân trang XẾP DỌC, không xếp ngang cho xuống dòng.
   Cột chân trang rộng khoảng 350px, bốn mục không vừa một dòng nên mục thứ
   tư rơi xuống một mình — nhìn như bị bỏ quên chứ không như một danh sách.
   Xếp dọc thì thêm bớt mục bao nhiêu cũng đều, và mỗi mục có vùng chạm đủ
   rộng.

   Phải đặt lại margin của <li>: Flatsome cho mỗi mục margin-bottom 9,6px,
   cộng vào row-gap thành khoảng cách hàng không ai chủ ý đặt, và thừa ra
   một khoảng trống dưới mục cuối. */
.ttnd-chan__menu {
	list-style: none; margin: 22px 0 0; padding: 18px 0 0;
	display: flex; flex-direction: column; gap: 2px;
	border-top: 1px solid var(--vien-toi);
}
.ttnd-chan__menu li { margin: 0; padding: 0; }
.ttnd-chan__menu a {
	display: inline-block; padding: 5px 0;
	color: var(--muc-sang-mo); font-size: 14px; text-decoration: none;
}
.ttnd-chan__menu a:hover { color: var(--trang); }
.ttnd-ban-do { border-radius: var(--bo); overflow: hidden; border: 1px solid var(--vien-toi); aspect-ratio: 4 / 3; }
.ttnd-ban-do iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Phần tử này mang luôn lớp .ttnd-khung, mà khai `padding: 20px 0 24px` thì
   ghi đè cả đệm ngang 24px của khung — dòng cuối chân trang thò ra 24px so
   với mọi khối khác trên trang. Viết đủ bốn cạnh để giữ đệm ngang. */
.ttnd-chan__day {
	position: relative; z-index: 2;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 10px 28px; margin-top: 44px; padding: 20px 24px 26px;
	border-top: 1px solid var(--vien-toi); font-size: 13px;
}
.ttnd-chan__day p { margin: 0; color: var(--muc-400); }
.ttnd-chan__phu { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ttnd-chan__phu a {
	display: inline-block; padding: 3px 0;
	color: var(--muc-sang-mo); text-decoration: none; font-size: 13px;
}
.ttnd-chan__phu a:hover { color: var(--trang); }

/* ============================================================ MÀN NHỎ === */

@media (max-width: 1040px) {
	.ttnd-dg-luoi { grid-template-columns: 1fr; }
	.ttnd-dg-ben { position: static; }
	.ttnd-gia-luoi { grid-template-columns: repeat(2, 1fr); }
	.ttnd-buoc { grid-template-columns: repeat(2, 1fr); }
	.ttnd-chan__luoi { grid-template-columns: 1fr 1fr; }
	.ttnd-chan__cot--ban-do { grid-column: 1 / -1; }
	.ttnd-ban-do { aspect-ratio: 21 / 9; }
	/* Khay chọn dưới màn hình chiếm chỗ — chừa chỗ cho nó. */
	body:has(#ttnd-khay:not([hidden])) { padding-bottom: 116px; }
}

@media (max-width: 900px) {
	.ttnd-gt { grid-template-columns: 1fr; gap: 32px; }
	.ttnd-tin-luoi { grid-template-columns: repeat(2, 1fr); }
	.ttnd-tt-hai-cot { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
	.ttnd-khoi, .ttnd-dat-gian { padding: 44px 0; }

	.ttnd-mo-menu { display: flex; order: 3; }
	.ttnd-menu {
		position: fixed; inset: 66px 0 auto 0; z-index: 55;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--dem-800); border-top: 1px solid var(--vien-toi);
		padding: 6px 24px 22px;
		max-height: calc(100vh - 66px); overflow-y: auto;
		/* Đóng menu phải ẩn HẲN. Chỉ đẩy ra ngoài màn bằng transform thì các
		   liên kết vẫn nằm trong luồng tiêu điểm — bấm Tab là con trỏ nhảy vào
		   một menu không nhìn thấy, người dùng bàn phím mắc kẹt ở đó. */
		transform: translateY(-150%);
		/* Ẩn NGAY, không cho `visibility` đi qua transition. Chuyển cảnh chỉ
		   chạy khi trình duyệt còn vẽ khung hình; tab nền hay khung xem bị ẩn
		   là đồng hồ đứng, menu kẹt ở trạng thái visible và bàn phím Tab lại
		   chui vào được. Trượt vẫn mượt vì transform mới là thứ chuyển cảnh. */
		visibility: hidden; pointer-events: none;
		transition: transform .2s ease;
	}
	body.ttnd-menu-mo .ttnd-menu {
		transform: translateY(0);
		visibility: visible; pointer-events: auto;
	}
	.ttnd-menu__ds { flex-direction: column; align-items: stretch; gap: 0; }
	.ttnd-menu__ds a { display: block; padding: 13px 0; border-bottom: 1px solid var(--vien-toi); }
	.ttnd-menu__ds a:hover, .ttnd-menu__ds .current-menu-item a { border-bottom-color: var(--vien-toi); }
	.ttnd-menu__cta { margin-top: 16px; }

	.ttnd-hero__ds { flex-direction: column; }
	.ttnd-hero__ds li { border-right: 0; border-bottom: 1px solid var(--vien-toi); }
	.ttnd-hero__ds li:last-child { border-bottom: 0; }
	.ttnd-dem { width: 100%; justify-content: center; }

	.ttnd-gia-luoi { grid-template-columns: 1fr; }
	.ttnd-buoc { grid-template-columns: 1fr; }
	.ttnd-tin-luoi { grid-template-columns: 1fr; }
	.ttnd-so-lieu { grid-template-columns: 1fr; }

	.ttnd-form { padding: 20px 16px; }
	.ttnd-o-luoi { grid-template-columns: 1fr; }
	.ttnd-quang-truong { max-width: 100%; }
	.ttnd-gian { font-size: 8px; }
	.ttnd-moc { font-size: 8px; }
	.ttnd-moc--cong-phu, .ttnd-moc--cong-phu-ngang { font-size: 8px; }

	.ttnd-chan__luoi { grid-template-columns: 1fr; gap: 30px; }
	.ttnd-chan__day { flex-direction: column; }
	.ttnd-khay__trong { flex-direction: column; align-items: stretch; gap: 9px; text-align: center; }
	.ttnd-khay__ds { margin-right: 0; }
	.ttnd-khay .ttnd-nut { width: 100%; }
}

@media (max-width: 480px) {
	.ttnd-khung { padding: 0 16px; }
	.ttnd-nen__trang { width: 86px; height: 86px; }
	.ttnd-giu-lon { padding: 18px; }
	.ttnd-tiep li { padding-left: 40px; }
}

@media print {
	.ttnd-dau, .ttnd-chan, .ttnd-khay, .ttnd-cta, .ttnd-nen { display: none !important; }
	body { background: #fff; }
	.ttnd-khoi { padding: 0; background: #fff !important; color: #000 !important; }
}

/* =================================================== LOGO ĐƠN VỊ TỔ CHỨC = */

.ttnd-logo-btc { display: block; height: auto; max-width: 100%; }

.ttnd-chan__to-chuc span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muc-400); margin-bottom: 10px; }
.ttnd-chan__to-chuc a { display: block; line-height: 0; margin-bottom: 10px; }
.ttnd-chan__to-chuc strong { display: block; color: #fff; font-size: 14px; }

.ttnd-nhom-nganh { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; list-style: none; margin: 0 0 26px; padding: 0; }
.ttnd-nhom-nganh li { background: var(--nen); border: 1px solid var(--vien); border-left: 3px solid var(--cam-nen); border-radius: var(--bo-nho); padding: 10px 14px; }
.ttnd-nhom-nganh b { font-size: 14px; font-weight: 600; }

@media (max-width: 782px) {
	.ttnd-nhom-nganh { grid-template-columns: 1fr; }
}

/* ======================================================================
   TỐI ƯU CHO ĐIỆN THOẠI
   ====================================================================== */

/* Đầu trang dính che mất phần đầu của khối khi nhảy bằng liên kết neo hoặc
   khi JavaScript cuộn sang bước kế tiếp.

   Khai cho MỌI phần tử có id, không liệt kê tay từng cái. Danh sách viết tay
   luôn tụt lại phía sau: các neo #hanh-trinh, #hang-hoa, #vi-sao của trang
   chủ mới và ba mốc #ttnd-buoc-1/2/3 của luồng đặt gian đều không có trong
   danh sách cũ, nên bấm sang bước kế tiếp là dòng tiêu đề của bước chui
   xuống dưới thanh đầu trang. Lỗi này không làm hỏng gì, chỉ làm người dùng
   tưởng bấm chưa ăn.

   scroll-margin chỉ có tác dụng đúng lúc trình duyệt cuộn tới phần tử đó,
   nên khai rộng không ảnh hưởng gì tới bố cục. */
[id] { scroll-margin-top: 78px; }

/* ------------------------------------------------- vùng chạm đủ lớn --- */

@media (pointer: coarse) {
	.ttnd-tom-tat__ds li { grid-template-columns: 42px 1fr auto 34px; }
	.ttnd-tom-tat__ds button { width: 32px; height: 32px; font-size: 18px; }
	.ttnd-tt-sau summary { padding: 18px 20px; }
	.ttnd-menu__ds a { padding: 15px 0; }
	/* Rê chuột không tồn tại trên cảm ứng — bỏ trạng thái hover dính lại. */
	/* Cảm ứng không có con trỏ, nhưng :hover DÍNH LẠI sau khi chạm — nên quy
	   tắc này trả nền về trắng để ô không kẹt màu rê chuột. Phải loại ô đang
	   chọn ra, không thì chạm chọn xong ô thành nền trắng + chữ trắng: số gian
	   biến mất hẳn, người dùng tưởng bấm hỏng. */
	.ttnd-gian--trong:not(.ttnd-gian--chon):hover { background: #fff; }
}

.ttnd-meo-chuot { display: inline; }
.ttnd-meo-cham  { display: none; }
@media (pointer: coarse) {
	.ttnd-meo-chuot { display: none; }
	.ttnd-meo-cham  { display: inline; }
}

/* --------------------------------------------------- khay dưới màn --- */

.ttnd-khay { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 1040px) {
	body:has(#ttnd-khay:not([hidden])) { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 782px) {
	.ttnd-khay__trong { flex-direction: row; flex-wrap: wrap; text-align: left; gap: 8px 14px; }
	.ttnd-khay__ds { flex: 1 1 auto; min-width: 0; }
	.ttnd-khay__ma {
		display: block; font-size: 13.5px;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.ttnd-khay__tien { flex: 0 0 auto; text-align: right; }
	.ttnd-khay .ttnd-nut { flex: 1 1 100%; width: auto; }
}

/* ------------------------------------------------ những chỗ còn lại --- */

@media (max-width: 782px) {
	/* Bảng "đã chọn" là thứ cần thấy ngay sau sơ đồ, không phải bảng giá. */
	.ttnd-dg-ben { gap: 12px; }

	.ttnd-giu-lon__gian li { flex: 1 1 128px; }
	.ttnd-don-dau h1 { width: 100%; }
	.ttnd-ck__bang div { flex-direction: column; gap: 2px; }
	.ttnd-ck__bang dd { text-align: left; }
	.ttnd-don-bang div { flex-direction: column; gap: 2px; }
	.ttnd-don-bang dd { text-align: left; }
	.ttnd-luu-y { padding: 18px; }
	.ttnd-thanh-toan-tt { padding: 18px; }
	.ttnd-nhom legend { font-size: 17px; }
}

/* Không bao giờ để trang trượt ngang trên điện thoại. */
body.ttnd-chu, body.ttnd-trong { overflow-x: hidden; }
img, iframe { max-width: 100%; }

/* Trên cảm ứng, bỏ phần thu nhỏ trang trí của ô gian: mất 8% bề ngang là mất
   luôn phần rìa mà ngón tay hay chạm trúng. Các ô vẫn tách nhau nhờ đường
   viền 1px, nên bỏ khe hở không làm sơ đồ dính thành mảng. */
@media (pointer: coarse) {
	.ttnd-gian { transform: none; }
	.ttnd-gian--chon { transform: none; }
	.ttnd-menu__cta { min-height: 46px; padding: 12px 22px; }
}
.ttnd-menu__cta { min-height: 44px; }

/* ======================================================================
   CÂN ĐỐI BỐ CỤC
   Hero trước đây là một cột chữ chiếm nửa trái, nửa phải bỏ trống với một
   vòng tròn trang trí — nhìn như thiếu mất thứ gì. Nay chia hai cột: chữ
   bên trái, áp phích chính thức bên phải. Áp phích là nội dung thật của
   ban tổ chức nên vừa lấp được khoảng trống vừa nói thêm được điều gì đó.
   ====================================================================== */

/* ------------------------------------------------- hộp công văn ------- */

.ttnd-cong-van {
	background: var(--nen); border: 1px solid var(--vien);
	border-left: 4px solid var(--dem-800); border-radius: var(--bo);
	padding: 24px 26px; margin: 0 0 34px;
}
.ttnd-cong-van__dau { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ttnd-cong-van__dau svg { width: 26px; height: 26px; fill: var(--dem-600); flex: none; margin-top: 2px; }
.ttnd-cong-van__dau h3 { font-size: 17px; margin: 0 0 5px; }
.ttnd-cong-van__dau p { font-size: 14.5px; color: var(--muc-mo); margin: 0; font-style: italic; }

.ttnd-cong-van__bang { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0 0 16px; }
.ttnd-cong-van__bang div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--vien); }
.ttnd-cong-van__bang dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muc-400); margin: 0; }
.ttnd-cong-van__bang dd { font-size: 14.5px; font-weight: 600; margin: 0; }
.ttnd-cong-van__doi-tuong { font-size: 14px; color: var(--muc-mo); margin: 0; }
.ttnd-cong-van__doi-tuong strong { color: var(--muc); }

@media (max-width: 1040px) {
}
@media (max-width: 860px) {
	.ttnd-cong-van__bang { grid-template-columns: 1fr; gap: 0; }
	.ttnd-cong-van { padding: 20px; }
}

/* ======================================================================
   THEME CHA ÉP VIẾT HOA MỌI THẺ <dl>

   Flatsome có một luật trần `dl { text-transform: uppercase }`. Mọi bảng
   định nghĩa của theme này đều dính: tên đơn vị, tên người đại diện và số
   tiền trong "Nội dung đơn" in ra thành "HTX BÁNH KẸO VỤ BẢN",
   "13.100.000 Đ". Tên riêng viết hoa toàn bộ là sai chính tả, và chữ Đ của
   đơn vị tiền thì không ai viết hoa cả.

   Trả về `none` cho toàn bộ, rồi mới bật lại uppercase đúng chỗ mình muốn
   (nhãn nhỏ của hộp công văn). Đặt ở cuối tệp để thắng luật của theme cha
   mà không phải dùng !important.
   ====================================================================== */

.ttnd-don-bang, .ttnd-don-bang dt, .ttnd-don-bang dd,
.ttnd-ck__bang, .ttnd-ck__bang dt, .ttnd-ck__bang dd,
.ttnd-gia__bang, .ttnd-gia__bang dt, .ttnd-gia__bang dd,
.ttnd-the-gian__bang, .ttnd-the-gian__bang dt, .ttnd-the-gian__bang dd,
.ttnd-cong-van__bang, .ttnd-cong-van__bang dd {
	text-transform: none;
}

/* Nhãn nhỏ của hộp công văn cố ý viết hoa — bật lại sau khi đã trả về none. */
.ttnd-cong-van__bang dt { text-transform: uppercase; }

/* ======================================================================
   KHỐI ĐẶT GIAN DỰNG LẠI — ba bước, hai cách chọn.

   Cột phải bám dính suốt cả ba bước. Đó là điểm chính: người dùng ở bước 3
   vẫn thấy mình đã chọn gian nào và hết bao nhiêu, không phải cuộn ngược.
   ====================================================================== */

.ttnd-dg-dau { max-width: 760px; margin: 0 0 24px; }
.ttnd-dg-dau h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 10px; }
.ttnd-dg-dau p  { font-size: 16px; color: var(--muc-mo); margin: 0; }

/* ------------------------------------------------------ thanh ba bước - */

.ttnd-buoc-thanh {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
	list-style: none; margin: 0 0 22px; padding: 0;
	border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden;
	background: var(--nen);
}
.ttnd-buoc-thanh__o {
	display: flex; align-items: center; gap: 11px;
	padding: 14px 18px; border-right: 1px solid var(--vien);
	color: var(--muc-600);   /* muc-400 chỉ đạt 3.2:1 trên nền trắng — bước chưa tới vẫn phải đọc được */
}
.ttnd-buoc-thanh__o:last-child { border-right: 0; }
.ttnd-buoc-thanh__so {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 28px; height: 28px; border-radius: 50%;
	border: 1.5px solid currentColor; font-size: 13px; font-weight: 700;
}
.ttnd-buoc-thanh__chu { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ttnd-buoc-thanh__chu b { font-size: 14.5px; }
.ttnd-buoc-thanh__chu i { font-style: normal; font-size: 12.5px; }

.ttnd-buoc-thanh__o.la-day  { background: var(--dem-800); color: #fff; }
.ttnd-buoc-thanh__o.la-xong { color: var(--tot-dam); cursor: pointer; }
.ttnd-buoc-thanh__o.la-xong .ttnd-buoc-thanh__so { background: var(--tot); border-color: var(--tot); color: #fff; }
.ttnd-buoc-thanh__o.la-xong:hover { background: var(--luc-100); }

/* ------------------------------------------------------------ hai cột - */

.ttnd-dg-luoi { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 24px; align-items: start; }
.ttnd-dg-chinh { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ttnd-dg-ben { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }

/* --------------------------------------------------------- ô mỗi bước - */

.ttnd-buoc-o { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); }
.ttnd-buoc-o__dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 16px 20px; }
.ttnd-buoc-o__dau h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0; }
.ttnd-buoc-o__dau h3 span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 25px; height: 25px; border-radius: 50%;
	background: var(--kem-100); color: var(--muc-mo); font-size: 13px; font-weight: 700;
}
.ttnd-buoc-o__tom { font-size: 13.5px; color: var(--tot-dam); margin: 0; font-weight: 600; }
.ttnd-buoc-o__than { padding: 0 20px 20px; border-top: 1px solid var(--vien); padding-top: 18px; }
.ttnd-buoc-o__nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ttnd-buoc-o__nut .ttnd-nut { flex: 1 1 auto; }

/* Bước đang mở: viền đậm hơn. Bước đã xong: thu gọn phần ruột. */
.ttnd-buoc-o.la-mo { border-color: var(--dem-800); border-width: 2px; }
.ttnd-buoc-o.la-mo .ttnd-buoc-o__dau h3 span { background: var(--dem-800); color: #fff; }
.ttnd-buoc-o.la-xong .ttnd-buoc-o__dau h3 span { background: var(--tot); color: #fff; }

/* Chỉ ẩn ruột khi JS chạy được; tắt JS thì cả ba bước hiện sẵn. */
.co-js .ttnd-buoc-o:not(.la-mo) .ttnd-buoc-o__than { display: none; }
.co-js .ttnd-buoc-o:not(.la-mo) .ttnd-buoc-o__dau { cursor: pointer; }

/* ------------------------------------------------------------- thẻ tab - */

.ttnd-the-tab { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--vien); }
.ttnd-the-tab button {
	font-family: var(--chu); font-size: 14.5px; font-weight: 600;
	padding: 10px 16px; min-height: 44px;
	background: none; border: 0; border-bottom: 3px solid transparent;
	color: var(--muc-mo); cursor: pointer;
}
.ttnd-the-tab button[aria-selected="true"] { color: var(--chinh); border-bottom-color: var(--chinh); }
.ttnd-pane__meo { font-size: 13.5px; color: var(--muc-mo); margin: 0 0 12px; }

/* ------------------------------------------------- chọn theo dãy (chip) - */

.ttnd-ds-gian { display: flex; flex-direction: column; gap: 20px; }
.ttnd-bat__dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.ttnd-bat__dau h3 { font-size: 16px; margin: 0; }
.ttnd-bat__dau span { font-size: 13px; color: var(--muc-mo); }

/* Lưới số gian: tự xếp theo bề ngang còn lại, không chia nhịp, không nút gộp.
   Người thuê cầm tờ sơ đồ tới đây chỉ cần tìm đúng con số rồi bấm. */
.ttnd-luoi-chip {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px;
}

.ttnd-chip {
	/* Thẻ <button> KHÔNG tự giãn ra lấp hết ô lưới: mặc định justify-self của
	   grid item là stretch, nhưng trình duyệt cho thẻ form giữ bề rộng theo
	   nội dung. Cột rộng 44px mà chip chỉ 29px, thừa 70px bên phải mỗi hàng.
	   Phải khai width:100% mới lấp đủ. Cũng chính là lý do flex-grow không ăn
	   khi hàng này còn dùng flexbox. */
	width: 100%; min-width: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	padding: 7px 4px; min-height: 48px;
	font-family: var(--chu); border: 1.5px solid; border-radius: var(--bo-nho);
	cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.ttnd-chip b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ttnd-chip i { font-style: normal; font-size: 12px; opacity: .8; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ttnd-chip--trong { background: var(--nen); border-color: var(--luc-600); color: var(--luc-800); }
/* Cùng lý do với ô trên sơ đồ — xem .ttnd-gian--trong:not(.ttnd-gian--chon):hover */
.ttnd-chip--trong:not(.ttnd-chip--chon):hover { background: var(--luc-100); }
.ttnd-chip--giu { background: var(--vang-200); border-color: var(--vang-800); border-style: dashed; color: var(--vang-800); cursor: not-allowed; }
.ttnd-chip--dat { background: var(--do-100); border-color: var(--do-700); color: var(--do-900); cursor: not-allowed; }
.ttnd-chip--khoa { background: var(--kem-100); border-color: var(--vien-dam); color: var(--muc-600); cursor: not-allowed; }
/* Chip của khối đối tác — cùng màu với ô trên sơ đồ, xem .ttnd-gian--btc. */
.ttnd-chip--btc { background: var(--doi-tac-nen); border-color: var(--doi-tac-vien); border-style: solid; color: var(--doi-tac-chu); cursor: not-allowed; }
.ttnd-chip--btc i { color: var(--doi-tac-chu); opacity: .78; }
.ttnd-chip--chon { background: var(--luc-600); border-color: var(--luc-800); color: #fff; }

.ttnd-ma-nhap { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vien); }

/* --------------------------------------------------- cột phải: đơn ----- */

.ttnd-tom-tat, .ttnd-bang-gia-nhanh, .ttnd-the-gian {
	background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 18px;
}
.ttnd-tom-tat { border-color: var(--dem-800); border-width: 2px; }
.ttnd-tom-tat__dau { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ttnd-tom-tat__dau h3 { font-size: 17px; margin: 0; }
.ttnd-tom-tat__dem { font-size: 13px; color: var(--muc-mo); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.ttnd-tom-tat__trong { font-size: 13.5px; color: var(--muc-mo); margin: 0 0 14px; }

.ttnd-tom-tat__ds { list-style: none; margin: 0 0 14px; padding: 0; max-height: 230px; overflow-y: auto; }
.ttnd-tom-tat__ds li {
	display: grid; grid-template-columns: 42px 1fr auto 30px; align-items: center; gap: 8px;
	padding: 7px 0; border-bottom: 1px solid var(--vien); font-size: 13px;
}
.ttnd-tom-tat__ds b  { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ttnd-tom-tat__ds i  { font-style: normal; color: var(--muc-mo); font-size: 12px; }
.ttnd-tom-tat__ds em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.ttnd-tom-tat__ds button {
	width: 28px; height: 28px; border: 1px solid var(--vien); border-radius: var(--bo-nho);
	background: var(--nen); color: var(--muc-mo); font-size: 16px; line-height: 1; cursor: pointer;
	/* Theme cha đệm mọi nút 0 1.2em và đặt min-width — nút × phình ra ~40px,
	   lọt khỏi cột 30px và đẩy danh sách cuộn ngang trên điện thoại. */
	padding: 0; min-width: 0; min-height: 0; box-sizing: border-box;
}
.ttnd-tom-tat__ds button:hover { background: var(--do-100); border-color: var(--do-700); color: var(--do-900); }

.ttnd-tom-tat__tien { border-top: 2px solid var(--muc-900); padding-top: 11px; margin-bottom: 14px; }
.ttnd-tom-tat__tien div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.ttnd-tom-tat__tien span { color: var(--muc-mo); }
.ttnd-tom-tat__tien b { font-variant-numeric: tabular-nums; }
.ttnd-tom-tat__tien .js-dong-phu-thu b { color: var(--cam-chu); }
.ttnd-tom-tat__tong { font-size: 17px !important; font-weight: 700; padding-top: 8px !important; }
.ttnd-tom-tat__meo { font-size: 12.5px; color: var(--muc-mo); margin: 12px 0 0; }

.ttnd-bang-gia-nhanh h3 { font-size: 16px; margin: 0 0 10px; }

/* ------------------------------------------------------- bước 3: kiểm - */

.ttnd-kiem-lai { margin-bottom: 18px; }
.ttnd-kiem-lai__bang { margin: 0; border: 1px solid var(--vien); border-radius: var(--bo-nho); padding: 4px 16px; }
.ttnd-kiem-lai__bang div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--vien); }
.ttnd-kiem-lai__bang div:last-child { border-bottom: 0; }
.ttnd-kiem-lai__bang dt { font-size: 13px; color: var(--muc-mo); margin: 0; text-transform: none; }
.ttnd-kiem-lai__bang dd { font-size: 14px; font-weight: 600; margin: 0; text-align: right; text-transform: none; }
.ttnd-kiem-lai__tong dt, .ttnd-kiem-lai__tong dd { font-size: 17px !important; font-weight: 700 !important; color: var(--muc) !important; }

/* ------------------------------------------------------------ màn nhỏ - */

@media (max-width: 1040px) {
	.ttnd-dg-luoi { grid-template-columns: 1fr; }
	.ttnd-dg-ben { position: static; }
}
@media (max-width: 782px) {
	.ttnd-buoc-thanh { grid-template-columns: 1fr; }
	.ttnd-buoc-thanh__o { border-right: 0; border-bottom: 1px solid var(--vien); padding: 11px 14px; }
	.ttnd-buoc-thanh__o:last-child { border-bottom: 0; }
	.ttnd-buoc-o__than { padding: 16px 14px 16px; }
	.ttnd-buoc-o__dau { padding: 14px; }
	.ttnd-buoc-o__nut .ttnd-nut { flex: 1 1 100%; }
	.ttnd-luoi-chip { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 5px; }
	.ttnd-chip { padding: 9px 2px; min-height: 50px; }
	.ttnd-chip b { font-size: 13px; }
	.ttnd-chip i { display: none; }
	.ttnd-kiem-lai__bang div { flex-direction: column; gap: 2px; }
	.ttnd-kiem-lai__bang dd { text-align: left; }
}

/* Nút bị khoá: trả về màu trung tính thay vì đỏ nhạt. Nút đỏ mờ trông như
   nút chính bị hỏng, người dùng vẫn cố bấm; nút xám thì đọc được ngay là
   "chưa tới lượt". */
.ttnd-nut[disabled],
.ttnd-nut[disabled]:hover {
	background: var(--kem-100);
	border-color: var(--vien);
	color: var(--muc-400);
	opacity: 1;
}

/* ======================================================================
   DẢI THÔNG TIN SỰ KIỆN NẰM TRONG KHỐI ĐẶT GIAN

   Banner hero riêng đã bỏ. Dải này là nền đậm ôm trọn bề ngang, đặt ngay
   trên thanh ba bước, nên người mở trang thấy ngay ba thứ cùng lúc: sự kiện
   là gì, còn bao nhiêu chỗ, và bắt đầu chọn ở đâu.
   ====================================================================== */

.ttnd-dat-gian { padding-top: 0; }

.ttnd-dg-banner {
	background: var(--dem-800); color: #fff;
	padding: 34px 0 30px; margin-bottom: 34px;
}
.ttnd-dg-banner__nhan {
	display: inline-block; background: var(--trang); color: var(--dem-800);
	border-radius: var(--bo-nho); padding: 5px 13px;
	font-size: 13px; font-weight: 700; margin: 0 0 14px;
}
/* Phải viết kèm body.ttnd-chu: luật nền `body.ttnd-chu h1` đặt màu chữ đậm
   và có độ ưu tiên cao hơn một lớp đơn, nên tên sự kiện chìm hẳn vào nền tối. */
body.ttnd-chu .ttnd-dg-banner__ten,
body.ttnd-trong .ttnd-dg-banner__ten,
.ttnd-dg-banner__ten {
	font-size: clamp(26px, 4.2vw, 40px); font-weight: 700; color: #fff;
	letter-spacing: -.025em; line-height: 1.1; margin: 0 0 8px;
}
.ttnd-dg-banner__khau-hieu {
	font-size: clamp(16px, 2vw, 20px); font-weight: 600; color: var(--trang); margin: 0 0 20px;
}
.ttnd-dg-banner .ttnd-hero__ds { margin-bottom: 18px; }
.ttnd-dg-banner .ttnd-dem { margin-bottom: 16px; }
.ttnd-dg-banner__han { font-size: 14px; color: var(--muc-sang-mo); margin: 0; }
.ttnd-dg-banner__han strong { color: var(--trang); }
.ttnd-dg-banner__btc {
	display: flex; align-items: center; gap: 16px;
	margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--vien-toi);
}
.ttnd-dg-banner__btc > span {
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muc-sang-mo);
}
.ttnd-dg-banner__btc a { display: block; line-height: 0; }

/* Áp phích chuyển xuống phần giới thiệu. */
.ttnd-poster-gt { float: right; width: 240px; margin: 0 0 20px 26px; }
.ttnd-poster-gt img { display: block; width: 100%; height: auto; border: 1px solid var(--vien); border-radius: var(--bo); }
/* Áp phích Festival Phủ Lý — TRẢI NGANG, không thả nổi như áp phích Nam Định.
   Áp phích kia dọc 720×1080 nên lọt gọn vào khung nổi 240px bên phải. Cái này
   ngang 1280×720: thả nổi ở 380px thì ép cột chữ còn 276px — mà .ttnd-gt vốn
   đã là lưới hai cột, nên chữ bị bóp hai lần. Trải hết bề ngang vừa đọc được
   chữ in trên áp phích, vừa trả lại cột chữ đủ rộng. */
.ttnd-poster-pl { margin: 0 0 34px; }
.ttnd-poster-pl img {
	display: block; width: 100%; height: auto;
	border: 1px solid var(--vien); border-radius: var(--bo);
}
.ttnd-poster-pl figcaption {
	font-size: 12.5px; color: var(--muc-mo); margin-top: 8px; text-align: center;
}
@media (max-width: 600px) { .ttnd-poster-pl { margin-bottom: 24px; } }

.ttnd-poster-gt figcaption { font-size: 12.5px; color: var(--muc-mo); margin-top: 7px; text-align: center; }

@media (max-width: 782px) {
	.ttnd-dg-banner { padding: 24px 0 22px; margin-bottom: 24px; }
	.ttnd-dg-banner__btc { flex-direction: column; align-items: flex-start; gap: 10px; }
	.ttnd-poster-gt { float: none; width: 210px; margin: 0 auto 22px; }
}

/* ======================================================================
   ĐIỆN THOẠI: THU GỌN DẢI THÔNG TIN, ƯU TIÊN CHỖ ĐẶT GIAN

   Trước khi sửa, dải này cao 1188px trên màn 812px và đẩy thanh ba bước
   xuống tận 1486px — người dùng phải cuộn gần hai màn mới thấy chỗ chọn
   gian, tức là thứ họ vào đây để làm nằm sau cùng.

   Thủ phạm chính: `.ttnd-hero__ds li` khai `flex: 1 1 200px`. Ở chế độ hàng
   thì 200px là bề RỘNG cơ sở, hợp lý; nhưng màn hẹp chuyển sang cột thì
   200px thành CHIỀU CAO cơ sở, mỗi ô phình đúng 200px. Bug im lặng vì trên
   máy tính nhìn vẫn đẹp.
   ====================================================================== */

@media (max-width: 782px) {
	.ttnd-dg-banner { padding: 18px 0 16px; margin-bottom: 20px; }

	.ttnd-dg-banner__nhan { font-size: 12px; padding: 4px 10px; margin-bottom: 10px; }
	.ttnd-dg-banner__ten { font-size: 25px; margin-bottom: 5px; }
	.ttnd-dg-banner__khau-hieu { font-size: 15.5px; margin-bottom: 14px; }

	/* Ô thông tin: cao theo nội dung, không theo flex-basis. */
	.ttnd-dg-banner .ttnd-hero__ds { margin-bottom: 12px; }
	.ttnd-dg-banner .ttnd-hero__ds li {
		flex: 0 0 auto;
		padding: 9px 13px; gap: 9px;
	}
	.ttnd-dg-banner .ttnd-hero__ds svg { width: 17px; height: 17px; }
	.ttnd-dg-banner .ttnd-hero__ds strong { font-size: 14px; }
	.ttnd-dg-banner .ttnd-hero__ds span  { font-size: 12px; }

	/* Đếm ngược gọn lại thành một dòng. */
	.ttnd-dg-banner .ttnd-dem { padding: 8px 12px; gap: 6px; margin-bottom: 0; }
	.ttnd-dg-banner .ttnd-dem__nhan,
	.ttnd-dg-banner .ttnd-dem__duoi { width: auto; font-size: 12.5px; }
	.ttnd-dg-banner .ttnd-dem__o b { font-size: 18px; }
	.ttnd-dg-banner .ttnd-dem__o i { font-size: 12px; }

	/* Hai khối này lặp lại thông tin đã có chỗ khác: dòng hạn hồ sơ trùng với
	   ô ngày tháng ngay trên, logo đơn vị tổ chức đã có ở chân trang. Ẩn đi
	   trên điện thoại để nhường màn hình cho việc chọn gian. */
	/* Giữ lại ĐÚNG hạn nộp hồ sơ trên điện thoại, bỏ phần còn lại của dòng.
	   Bản trước ẩn cả dòng nên khách dùng điện thoại không biết còn hạn tới
	   bao giờ — đúng lúc ban tổ chức mở lại hạn để gom thêm đơn. */
	.ttnd-dg-banner__han { display: block; font-size: 13px; margin-top: 10px; }
	.ttnd-han__phu { display: none; }
	.ttnd-dg-banner__han strong { color: var(--vang); }
	.ttnd-dg-banner__btc { display: none; }

	/* Tiêu đề khối đặt gian gọn lại, thanh ba bước lên sớm hơn. */
	.ttnd-dg-dau { margin-bottom: 16px; }
	.ttnd-dg-dau h2 { font-size: 22px; }
	.ttnd-dg-dau p  { font-size: 14.5px; }
	.ttnd-buoc-thanh { margin-bottom: 16px; }
}

/* Bốn khối chen giữa dải thông tin và sơ đồ, đo trên màn 375px:
   tiêu đề khối 170px · thanh ba bước 198px · thẻ tab 108px · thanh phóng to
   139px. Cộng lại 615px thuần điều hướng, đẩy sơ đồ xuống 1385px. Nén cả bốn
   xuống còn khoảng một phần ba. */
@media (max-width: 782px) {

	/* Tiêu đề khối lặp lại đúng thứ dải thông tin phía trên vừa nói. */
	.ttnd-dg-dau { margin-bottom: 12px; }
	.ttnd-dg-dau > .ttnd-td__nhan { display: none; }
	.ttnd-dg-dau h2 { font-size: 20px; margin-bottom: 4px; }
	.ttnd-dg-dau p { display: none; }

	/* Thanh ba bước: ba cột ngang, bỏ dòng mô tả phụ. */
	.ttnd-buoc-thanh { grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; }
	.ttnd-buoc-thanh__o {
		flex-direction: column; align-items: center; text-align: center;
		gap: 5px; padding: 9px 6px;
		border-right: 1px solid var(--vien); border-bottom: 0;
	}
	.ttnd-buoc-thanh__o:last-child { border-right: 0; }
	.ttnd-buoc-thanh__so { width: 24px; height: 24px; font-size: 12px; }
	.ttnd-buoc-thanh__chu b { font-size: 12.5px; }
	.ttnd-buoc-thanh__chu i { display: none; }

	/* Hai thẻ tab phải nằm gọn một dòng. */
	.ttnd-the-tab { gap: 2px; margin-bottom: 12px; }
	.ttnd-the-tab button { flex: 1; padding: 10px 6px; font-size: 13.5px; min-height: 46px; }

	.ttnd-pane__meo { font-size: 12.5px; margin-bottom: 10px; }
}

/* ======================================================================
   SƠ ĐỒ TRÊN ĐIỆN THOẠI: KHUNG NHÌN CÓ TRẦN, KHÔNG TRẢI DÀI CẢ TRANG

   Hiện TRỌN chiều dài sơ đồ, cuộn cùng trang. Bản trước nhốt sơ đồ vào một
   khung cao 68vh cuộn riêng bên trong: cuộn lồng trong cuộn, kéo tới đáy
   khung là kẹt, phải đặt tay ra lề mới cuộn trang tiếp, và không lúc nào
   nhìn thấy cả khu đất một lượt. Chủ site muốn thấy full sơ đồ.
   Khung chỉ còn cuộn NGANG khi người dùng tự phóng to.
   ====================================================================== */

@media (max-width: 782px) {
	/* Sơ đồ tràn sát hai mép khung bước (bù đúng 14px đệm của khung), bỏ viền
	   và đệm riêng: ở mức toàn cảnh mỗi pixel bề ngang là thêm cỡ cho ô gian.
	   Trên màn 375px ô từ 15px lên ~17px. */
	.ttnd-so-do { margin: 0 -14px; padding: 0; }
	.ttnd-so-do .ttnd-quang-truong { border-radius: 0; }
	.ttnd-quang-truong { margin: 0 auto; }

	/* Ô gian phải BẤM ĐƯỢC, không chỉ nhìn được.

	   Ép cả khu đất 60 m vào 339px thì mỗi gian 3 m chỉ còn 17px — dưới ngưỡng
	   24px của WCAG 2.5.8, và thực tế là bấm trượt sang gian bên cạnh. Mà đây
	   là thao tác chính của cả trang: khách vào để chọn gian.

	   Cho sơ đồ rộng tối thiểu 500px rồi cuộn ngang trong khung của nó — ô lên
	   ~25px, vừa ngưỡng bấm, và người dùng chỉ phải kéo ngang khoảng 160px là
	   thấy hết bề ngang khu đất. Vẫn phóng bằng hai ngón được như trước.

	   Giữ cuộn ngang TRONG khung chứ không để cả trang trôi: trang trôi ngang
	   thì phần chữ bên trên cũng lệch theo, mất luôn mốc đọc. */
	/* KHÔNG cuộn ngang. Trọn khu đất phải nằm trong một khung.

	   Bản trước cho sơ đồ rộng tối thiểu 500px rồi cuộn ngang trong khung, để
	   ô gian đạt ~25px cho dễ bấm. Đổi lại thì một phần tư bên phải khu đất —
	   hệ bạt D 181–200, khu ẩm thực, khu vui chơi — nằm ngoài màn hình, và
	   không có gờ hay thanh cuộn nào cho biết là còn nữa (iOS giấu thanh cuộn).
	   Người thuê gian tưởng đã xem hết mặt bằng nên bỏ qua luôn hệ bạt D.

	   Một sơ đồ xem được hết mà ô hơi nhỏ vẫn hơn một sơ đồ ô to mà giấu mất
	   20 gian. Ô nhỏ còn có đường bù: tab "Theo số gian" liệt kê đủ 171 gian
	   thành chip lớn, chọn chính xác ở đó — đúng ngoại lệ "có thao tác tương
	   đương" của WCAG 2.5.8. Giấu mất gian thì không có đường bù nào. */
	.ttnd-so-do { overflow-x: visible; }
	.ttnd-so-do .ttnd-quang-truong { min-width: 0; width: 100%; }

	/* Đưa sơ đồ lên màn hình đầu. Trước đây trên màn 812px sơ đồ bắt đầu ở
	   pixel 941: người vào trang để chọn gian mà phải cuộn qua ba lớp chữ lặp
	   lại nhau. Chỉ bỏ phần LẶP, không bỏ thông tin:
	   - dòng ngày trong banner: ngày đã ghi trên dải vàng ngay phía trên;
	   - dòng chú thích nhỏ dưới địa điểm và số gian;
	   - tiêu đề mục "Chọn vị trí và giữ chỗ trong ba bước": thanh ba bước ngay
	     dưới đã nói đúng điều đó — ẩn bằng mắt, trình đọc màn hình vẫn đọc;
	   - tiêu đề "1 Chọn gian hàng" của bước ĐANG MỞ: trùng ô "Chọn gian" đang
	     sáng trên thanh bước. Bước 2, 3 vẫn giữ tiêu đề vì đó là chỗ bấm mở. */
	.ttnd-dg-banner .ttnd-hero__ds li:nth-child(2) { display: none; }
	.ttnd-dg-banner .ttnd-hero__ds li span { display: none; }
	.ttnd-dg-banner .ttnd-hero__ds { margin-bottom: 12px; }
	/* Dòng hướng dẫn chạm/kéo xuống ngay DƯỚI sơ đồ, trên chú thích màu: nằm
	   trên thì đẩy sơ đồ xuống thêm 41px, mà người ta đọc nó lúc đang nhìn
	   sơ đồ chứ không phải trước. */
	#pane-so-do { display: flex; flex-direction: column; }
	#pane-so-do[hidden] { display: none; }
	#pane-so-do > .ttnd-pane__meo { order: 2; margin: 10px 0 0; }
	#pane-so-do > .ttnd-chu-thich { order: 3; }
	.ttnd-dg-dau,
	.co-js .ttnd-buoc-o.la-mo .ttnd-buoc-o__dau {
		position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}

	/* Khay dưới màn hình là bảng tóm tắt của điện thoại — cột phải nằm dưới
	   sơ đồ dài cả nghìn pixel, không ai cuộn tới. Làm cho nó đọc được. */
	.ttnd-khay { padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
	.ttnd-khay__trong { gap: 6px 12px; }
	.ttnd-khay__nhan { font-size: 12px; letter-spacing: .05em; }
	.ttnd-khay__ma { font-size: 13px; font-weight: 600; }
	.ttnd-khay__tien strong { font-size: 17px; }
	.ttnd-khay .ttnd-nut { min-height: 48px; font-size: 15px; }
}

/* Hai khu mới trên sơ đồ 200 gian: chỗ ngồi đại biểu dự khai mạc, và lối đi
   giữa khu ẩm thực với khu vui chơi. */
.ttnd-moc--dai-bieu {
	background: rgba(255,255,255,.06); border: 1px dashed rgba(242,179,35,.55);
	color: var(--vang-500); font-size: 8.5px;
}


/* Nén nốt dải thông tin: mỗi ô về một dòng, đồng hồ về một dòng. Mục tiêu là
   thanh ba bước lọt vào màn hình đầu tiên trên máy 375 × 812. */
@media (max-width: 782px) {
	.ttnd-dg-banner__ten { font-size: 23px; line-height: 1.15; }
	.ttnd-dg-banner__khau-hieu { font-size: 14.5px; margin-bottom: 12px; }

	.ttnd-dg-banner .ttnd-hero__ds li { padding: 8px 12px; gap: 8px; align-items: center; }
	.ttnd-dg-banner .ttnd-hero__ds li > div {
		display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0;
	}
	.ttnd-dg-banner .ttnd-hero__ds strong { font-size: 13.5px; }
	.ttnd-dg-banner .ttnd-hero__ds span { font-size: 12.5px; }

	/* "nữa là khai mạc" đẩy đồng hồ xuống dòng thứ hai mà không thêm thông
	   tin nào — các đơn vị ngày/giờ/phút/giây đã tự nói đủ. */
	.ttnd-dg-banner .ttnd-dem { width: 100%; justify-content: flex-start; flex-wrap: nowrap; }
	.ttnd-dg-banner .ttnd-dem__duoi { display: none; }
	.ttnd-dg-banner .ttnd-dem__nhan { flex: none; }
	.ttnd-dg-banner .ttnd-dem__o { gap: 3px; }
	.ttnd-dg-banner .ttnd-dem__o b { font-size: 17px; }
	.ttnd-dg-banner .ttnd-dem__o i { font-size: 12px; }
}

/* Chip số gian đứng một mình trong lưới, không còn nút gộp bên cạnh. */
.ttnd-chip { width: 100%; }

/* Ô tích gian ẩm thực trong biểu mẫu. */
.ttnd-o-tich { gap: 8px; }
.ttnd-tich {
	display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
	background: var(--vang-200); border: 1px solid var(--vang-500);
	border-radius: var(--bo-nho); padding: 12px 14px;
	font-weight: 400 !important; font-size: 14px; line-height: 1.55;
}
.ttnd-tich input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--chinh); }
.ttnd-tich b { font-weight: 700; }
.ttnd-tich strong { color: var(--cam-chu); }

/* Nhãn thẻ tab: bản dài cho màn rộng, bản ngắn cho điện thoại. Hai nhãn đầy đủ
   xếp cạnh nhau trên 375px làm thanh tab cao gấp đôi vì chữ xuống dòng. */
.ttnd-tab-ngan { display: none; }
@media (max-width: 782px) {
	.ttnd-tab-dai { display: none; }
	.ttnd-tab-ngan { display: inline; }
	.ttnd-the-tab button { white-space: nowrap; }

	/* Tiêu đề hệ bạt gọn lại, chữ gợi ý ngắn hơn. */
	.ttnd-bat__dau { margin-bottom: 8px; gap: 2px 8px; }
	.ttnd-bat__dau h3 { font-size: 15px; }
	.ttnd-bat__dau span { font-size: 12px; }
}

/* ======================================================================
   CỘT HẸP CĂN GIỮA — dùng cho trang tra cứu đơn.

   Trước đây tiêu đề chạy hết 800px còn biểu mẫu chỉ 440px và dính mép trái,
   nhìn như hai khối rời nhau. Cho cả hai chung một cột 560px căn giữa thì
   mép trái mép phải thẳng hàng.
   ====================================================================== */

.ttnd-cot-hep { max-width: 560px; }
.ttnd-cot-hep .ttnd-td { margin-bottom: 24px; }
.ttnd-cot-hep .ttnd-form { max-width: none; }
.ttnd-cot-hep .ttnd-hop { margin-bottom: 20px; }

@media (min-width: 900px) {
	/* Cột hẹp nằm giữa trang chứ không dán mép trái. */
	.ttnd-cot-hep { margin-left: auto; margin-right: auto; }
}

/* ======================================================================
   TIÊU ĐỀ TRÊN MỌI KHỐI NỀN ĐẬM

   Luật nền `body.ttnd-chu h2` đặt màu chữ đậm và có độ ưu tiên (0,1,2) cao
   hơn mọi luật một lớp như `.ttnd-chan h2` (0,1,1), nên thắng bất kể thứ tự
   trong tệp. Hai tiêu đề chân trang từng ra tương phản 1,14:1 — chữ xanh đêm
   trên nền xanh đêm, đọc không nổi.

   Gom một chỗ cho TẤT CẢ khối nền đậm, viết kèm `body.` để cùng hạng ưu tiên
   rồi thắng nhờ đứng sau. Thêm khối nền đậm mới thì thêm tên vào đây, đừng
   vá riêng lẻ từng chỗ nữa.
   ====================================================================== */

body.ttnd-chu .ttnd-chan h1,      body.ttnd-trong .ttnd-chan h1,
body.ttnd-chu .ttnd-chan h2,      body.ttnd-trong .ttnd-chan h2,
body.ttnd-chu .ttnd-chan h3,      body.ttnd-trong .ttnd-chan h3,
body.ttnd-chu .ttnd-khoi--toi h1, body.ttnd-trong .ttnd-khoi--toi h1,
body.ttnd-chu .ttnd-khoi--toi h2, body.ttnd-trong .ttnd-khoi--toi h2,
body.ttnd-chu .ttnd-khoi--toi h3, body.ttnd-trong .ttnd-khoi--toi h3,
body.ttnd-chu .ttnd-bc-dau h1,    body.ttnd-trong .ttnd-bc-dau h1,
body.ttnd-chu .ttnd-tour-dau h1,  body.ttnd-trong .ttnd-tour-dau h1,
body.ttnd-chu .ttnd-tour-dau h2,  body.ttnd-trong .ttnd-tour-dau h2,
body.ttnd-chu .ttnd-dg-banner h1, body.ttnd-trong .ttnd-dg-banner h1,
body.ttnd-chu .ttnd-dg-banner h2, body.ttnd-trong .ttnd-dg-banner h2,
body.ttnd-chu .ttnd-dg-banner h3, body.ttnd-trong .ttnd-dg-banner h3,
body.ttnd-chu .ttnd-cta h1,       body.ttnd-trong .ttnd-cta h1,
body.ttnd-chu .ttnd-cta h2,       body.ttnd-trong .ttnd-cta h2,
body.ttnd-chu .ttnd-404 h1,       body.ttnd-trong .ttnd-404 h1 {
	color: #fff;
}

/* ======================================================================
   SỬA SAU ĐỢT AUDIT

   `--muc-400` (#8A91A3) chọn cho nhãn nhỏ trên NỀN ĐẬM, ở đó đạt 5,81:1.
   Nhưng nó bị dùng lại trên nền trắng, nơi chỉ còn 3,15:1 — dưới mức 4,5:1.
   Một mã màu không phục vụ được cả hai nền, nên tách thêm một token riêng
   cho nhãn nhỏ trên nền sáng.
   ====================================================================== */

:root {
	/* #6C7488 trên trắng = 4,68:1 — đủ cho chữ thường. */
	--muc-nhan: #6C7488;
}

.ttnd-buoc-thanh__o          { color: var(--muc-nhan); }
.ttnd-cong-van__bang dt      { color: var(--muc-nhan); }
.ttnd-tin time               { color: var(--muc-nhan); }
.ttnd-kiem-lai__bang dt      { color: var(--muc-nhan); }
.ttnd-tt--cho i              { color: var(--muc-nhan); }
/* Nút khoá: WCAG miễn trừ, nhưng 4,15:1 vẫn khó đọc nên đẩy lên hẳn. */
.ttnd-nut[disabled],
.ttnd-nut[disabled]:hover    { color: var(--muc-600); }

/* ------------------------------------------------- vùng chạm tối thiểu - */

/* Liên kết chân trang chỉ cao 17–18px. Mức tối thiểu của WCAG 2.5.8 là 24px;
   thêm khoảng đệm dọc thay vì phóng chữ, để bố cục không đổi. */
.ttnd-chan__menu a,
.ttnd-chan__day a { display: inline-block; padding: 4px 0; }
.ttnd-chan__ds a  { display: inline-block; padding: 3px 0; }

/* Ba con số 01/02/03 ở khối lợi ích là chữ trang trí nhưng vẫn truyền thứ tự,
   nên phải đạt tối thiểu 3:1 của chữ cỡ lớn. Màu viền cũ chỉ 1,68:1. */
.ttnd-loi-ich__so { color: #8A91A3; }

/* Nền mờ sau menu điện thoại: bấm ra ngoài là đóng, và làm rõ phần nội dung
   phía sau đang tạm khoá. */
.ttnd-nen-menu {
	position: fixed; inset: 0; z-index: 50;
	background: rgba(8,14,30,.55);
	opacity: 0; visibility: hidden;
	transition: opacity .2s ease, visibility 0s linear .2s;
}
body.ttnd-menu-mo .ttnd-nen-menu {
	opacity: 1; visibility: visible;
	transition: opacity .2s ease, visibility 0s;
}
@media (min-width: 783px) { .ttnd-nen-menu { display: none; } }

/* Khoá cuộn nền khi menu mở, để cuộn ngón tay ăn vào menu chứ không ăn vào
   trang phía sau. */
body.ttnd-menu-mo { overflow: hidden; }

/* ======================================================================
   CỤM NÚT LIÊN HỆ NỔI

   Hai nút xếp dọc ở góc dưới bên phải: Zalo trên, gọi điện dưới. Nút gọi ở
   dưới cùng vì ngón cái với tới đó dễ nhất, mà gọi điện là việc gấp hơn.
   Khi thanh chọn gian bám đáy màn thì cả cụm nâng lên bằng CSS chứ không
   bằng JS, để không thứ nào chồng lên ngón tay.
   ====================================================================== */

.ttnd-lh-cum {
	position: fixed; right: 16px; bottom: 16px; z-index: 66;
	display: flex; flex-direction: column; gap: 10px;
	transition: transform .2s ease, opacity .2s ease, visibility 0s linear 0s;
}
/* Điện thoại, lúc sơ đồ gian chiếm màn hình: hai nút tròn đè đúng lên cột
   gian bên phải (hệ bạt D, khu ẩm thực) — chạm chọn gian lại trúng nút gọi.
   Lùi hẳn ra mép phải cho tới khi cuộn khỏi sơ đồ. visibility trễ theo hiệu
   ứng để nút ẩn cũng không nhận Tab. */
@media (max-width: 782px) {
	body.ttnd-dang-xem-so-do .ttnd-lh-cum {
		transform: translateX(90px); opacity: 0; visibility: hidden;
		transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
	}
}
.ttnd-lh {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px;
	background: var(--trang); color: var(--dem-800);
	border: 1px solid var(--vang-800); border-radius: 50%;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}
.ttnd-lh:hover { background: #FFC846; color: var(--dem-800); transform: scale(1.05); }
.ttnd-lh svg { width: 23px; height: 23px; fill: currentColor; }

/* Zalo giữ nguyên xanh của Zalo: dấu hiệu bên thứ ba, người dùng nhận ra
   bằng màu trước khi kịp đọc. Nhuộm theo bảng màu site là mất cái lợi đó. */
.ttnd-lh--zalo { background: #0068FF; border-color: #0057D6; color: #fff; }
.ttnd-lh--zalo:hover { background: #2481FF; color: #fff; }
.ttnd-lh--zalo span { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

@media (max-width: 1040px) {
	/* Thanh chọn gian cao khoảng 116px khi hiện. Nâng cả cụm lên khỏi nó. */
	body:has(#ttnd-khay:not([hidden])) .ttnd-lh-cum { bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }
}
/* Điện thoại, đang đặt gian (khay đáy đang hiện): hai nút tròn đè lên ô nhập
   và ô "đồng ý quy định" của bước 2–3 — chạm tích lại trúng nút gọi. Khay
   đã có nút đi tiếp; ẩn cụm liên hệ cho tới khi khay đóng. */
@media (max-width: 782px) {
	body:has(#ttnd-khay:not([hidden])) .ttnd-lh-cum {
		transform: translateX(90px); opacity: 0; visibility: hidden;
		transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
	}
}
@media (max-width: 782px) {
	.ttnd-lh-cum { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap: 9px; }
	.ttnd-lh { width: 50px; height: 50px; }
	.ttnd-lh--zalo span { font-size: 14px; }
}

@media print { .ttnd-lh-cum { display: none !important; } }

/* ======================================================================
   CỠ CHỮ TỐI THIỂU TRÊN ĐIỆN THOẠI

   Audit đo được 18 chỗ chữ 11–11,5px. Trên màn để cách mặt 30cm thì cỡ đó
   đã sát ngưỡng đọc được, mà người thuê gian ở hội chợ này phần nhiều là chủ
   hộ kinh doanh lớn tuổi. Nâng chữ phụ lên 12,5px và nhãn nhỏ lên 12px;
   nhãn viết hoa giảm bớt giãn cách để không vì to hơn mà tràn dòng.
   ====================================================================== */

@media (max-width: 782px) {
	.ttnd-dg-banner .ttnd-hero__ds span { font-size: 12.5px; }
	.ttnd-cong-van__bang dt             { font-size: 12px; letter-spacing: .07em; }
	.ttnd-so-lieu span                  { font-size: 12.5px; }
	.ttnd-chan__to-chuc span,
	.ttnd-chan__ds span                 { font-size: 12px; letter-spacing: .09em; }
	.ttnd-tom-tat__ds i                 { font-size: 12.5px; }
	.ttnd-gia-nhanh em                  { font-size: 12.5px; }
	.ttnd-thanh__chu                    { font-size: 12.5px; }
	.ttnd-tom-tat__meo                  { font-size: 12.5px; }
	.ttnd-goi-y                         { font-size: 13px; }

	/* Đợt audit sau còn sót bốn chỗ: chữ hiệu ở đầu trang và chân trang, nhãn
	   đơn vị của đồng hồ đếm ngược, nhãn "Đang nhận / Đã đóng" ở ba thẻ mốc
	   thời gian, và nhãn chuyên mục trên thẻ tin. Tất cả đều là chữ VIẾT HOA
	   có giãn cách — cỡ 11px viết hoa còn khó đọc hơn 11px chữ thường. */
	.ttnd-hieu__chu i                   { font-size: 12px; letter-spacing: .12em; }
	.ttnd-tt i                          { font-size: 12px; letter-spacing: .04em; }
	.ttnd-tin__muc                      { font-size: 12px; letter-spacing: .06em; }
}

/* ======================================================================
   DỌN MÀU LẠC KHỎI BẢNG

   Audit đếm được bốn màu không thuộc bảng token, đều do thừa hưởng từ theme
   cha chứ không phải cố ý: liên kết #334862, nhãn biểu mẫu #222222, nền thẻ
   <code> #F1F1F1. Cộng thêm màu tím của phụ thu ẩm thực chưa có token.
   ====================================================================== */

/* Hai màu còn viết cứng: chữ menu ngang và màu tím của phụ thu ẩm thực. */
:root {
	--tim:      #7A3E9D;
	--menu-chu: #E2E8F6;
}

/* Chữ hiệu ở đầu trang: hai con bên trong đã tự đặt màu, nhưng thẻ <a> vẫn
   ăn màu liên kết mặc định của theme cha — thừa một màu trong bảng. */
/* Thẻ <a> bọc chữ hiệu và logo đơn vị tổ chức: bên trong đã tự đặt màu hoặc
   chỉ chứa ảnh, nhưng bản thân thẻ vẫn ăn màu liên kết mặc định của theme cha
   nên bảng màu thừa ra một mã không ai chủ ý dùng. */
.ttnd-hieu,
.ttnd-chan__to-chuc a { color: inherit; }

/* Nhãn biểu mẫu phải cùng một màu với chữ chính, không phải #222 của theme cha. */
.ttnd-o label,
.ttnd-nhom legend,
.ttnd-tich { color: var(--muc); }

/* Thẻ <code> trong phần gợi ý. */
.ttnd-goi-y code,
.ttnd-van code {
	background: var(--kem-100); color: var(--muc);
	border: 1px solid var(--vien); border-radius: 4px;
	padding: 1px 6px; font-size: .92em;
}
/* Trong dòng gợi ý (đã là chữ phụ 12,5–13px) thì .92em nữa là xuống 11,5px.
   Nền và viền của thẻ <code> đã đủ tách nó khỏi câu, không cần nhỏ thêm. */
.ttnd-goi-y code { font-size: 1em; }

/* ======================================================================
   TƯƠNG PHẢN CỦA VIỀN VÀ NHÃN NHỎ

   WCAG 1.4.11 đòi ranh giới của ô nhập và nút phải đạt 3:1 so với nền kề —
   không chỉ chữ. Viền ô nhập cũ #CFC7B5 trên nền trắng chỉ 1,68:1, nhìn kỹ
   mới thấy ô nhập bắt đầu từ đâu.
   ====================================================================== */

:root {
	/* #948C79 trên trắng = 3,34:1 — đủ cho ranh giới thành phần giao diện. */
	--vien-dam: #948C79;
}

/* Nút bị khoá được WCAG miễn trừ, nhưng viền 1,36:1 thì gần như vô hình,
   người dùng không biết đó là một nút. Cho viền đậm lên, giữ chữ xám để vẫn
   đọc ra là chưa bấm được. */
.ttnd-nut[disabled],
.ttnd-nut[disabled]:hover { border-color: var(--vien-dam); }

/* Nhãn "Sắp mở" của các cổng thanh toán chưa bật: 4,15:1 và 11px, hụt cả hai
   ngưỡng. Nó nằm trên nền kem nên phải đậm hơn nhãn trên nền trắng. */
.ttnd-tt--cho i { color: var(--muc-600); font-size: 12px; }

/* Lịch tour ở chân trang — thay chỗ bản đồ trên trang chủ, vì cổng tour trải
   bốn tỉnh chứ không đóng ở một địa điểm. */
.ttnd-chan-lich { list-style: none; margin: 0; padding: 0; }
.ttnd-chan-lich li { padding: 11px 0; border-bottom: 1px solid var(--vien-toi); }
.ttnd-chan-lich li:last-child { border-bottom: 0; }
.ttnd-chan-lich b { display: block; font-size: 12.5px; color: var(--trang); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.ttnd-chan-lich a { display: inline-block; padding: 2px 0; color: #fff; font-size: 14.5px; font-weight: 600; }
.ttnd-chan-lich span { display: block; color: #fff; font-size: 14.5px; font-weight: 600; }
.ttnd-chan-lich i { display: block; font-style: normal; font-size: 12.5px; color: var(--muc-sang-mo); margin-top: 2px; }

/* ======================================================================
   CỔNG TOUR HỘI CHỢ — trang chủ

   Ba nhịp nối nhau, cố ý khác chất liệu để mắt không mỏi vì lặp: dải mở đầu
   NỀN TỐI hai cột, dải hành trình NỀN SÁNG thoáng nhất vì đọc lâu nhất, dải
   lý do NỀN KEM viết nhẹ không đóng khung.
   ====================================================================== */

/* --------------------------------------------------- 1. dải mở đầu ---- */

.ttnd-tour-dau { position: relative; background: var(--dem-800); color: #fff; padding: 36px 0 40px; }
.ttnd-tour-dau__luoi { position: relative; z-index: 2; display: grid; gap: 28px; }

/* Khối chữ giãn hết cột — bề rộng đo bằng CHÍNH LƯỚI, không bằng max-width
   trên khối. Đặt max-width ở đây thì cột vẫn rộng như cũ, chỗ trống chỉ dời
   từ trong chữ ra ngoài khối, khe giữa chữ và áp phích lại phình lên. Chặn
   độ dài dòng thì chặn ở đúng đoạn văn, chỗ duy nhất cần chặn. */
.ttnd-tour-dau__chu { min-width: 0; }

.ttnd-tour-dau__nhan {
	display: inline-block; font-size: 12.5px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--trang);
	margin: 0 0 14px;
}
.ttnd-tour-dau__h1 {
	font-size: clamp(32px, 6vw, 54px); line-height: 1.03; letter-spacing: -.035em;
	margin: 0 0 18px; color: #fff;
}
.ttnd-tour-dau__h1 span { display: block; }
.ttnd-tour-dau__h1 span:last-child { color: var(--trang); }
.ttnd-tour-dau__mo-ta {
	max-width: 34em;
	font-size: clamp(15px, 1.6vw, 17px); line-height: 1.66;
	color: var(--muc-sang-mo); margin: 0 0 26px;
}
.ttnd-tour-dau__nut { display: flex; flex-wrap: wrap; gap: 12px; }

/* Vành trăng trang trí nằm sau chữ H1 làm nhoè đúng dòng to nhất trang. */
.ttnd-tour-dau .ttnd-nen__trang { display: none; }

/* ---------------------------------------------- áp phích trong dải --- */

/* Viền vàng mảnh thay cho đổ bóng: thiết kế phẳng nên độ sâu phải đến từ
   đường nét và mảng màu, không đến từ bóng. */
.ttnd-tour-anh { margin: 0; }
.ttnd-tour-anh img {
	display: block; width: 100%; height: auto;
	border: 1px solid rgba(240,179,35,.42); border-radius: var(--bo);
}
.ttnd-tour-anh--ngang { align-self: center; }
.ttnd-tour-anh figcaption {
	margin-top: 11px; font-size: 12.5px; font-weight: 600;
	letter-spacing: .04em; color: var(--trang); text-align: center;
}

/* -------------------------------------------- chân của dải mở đầu ---- */

.ttnd-tour-dau__duoi { min-width: 0; }
.ttnd-tour-dau__btc { margin-top: 22px; }

/* Số liệu ngăn nhau bằng vạch mảnh, không đóng thành hộp: hộp trong dải tối
   thành một vật thể thứ hai tranh chỗ với áp phích. */
.ttnd-tour-so {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	margin: 0; border-top: 1px solid var(--vien-toi);
}
.ttnd-tour-so > div { padding: 16px 0; }
.ttnd-tour-so > div:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--vien-toi); }
.ttnd-tour-so > div:nth-child(n+3) { border-top: 1px solid var(--vien-toi); }
.ttnd-tour-so dt {
	font-size: 12px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--muc-400); margin: 0 0 7px;
}
.ttnd-tour-so dd { text-transform: none; }
/* Nhãn LUÔN nằm dưới con số, không bao giờ nằm cạnh. Cho nó nằm cạnh thì ba
   ô ngắn vừa một dòng còn ô "150–200 · gian 3 × 3 m" phải xuống dòng, thành
   ra một ô cao hơn ba ô kia. Xuống dòng đều cả bốn thì bốn ô bằng nhau. */
.ttnd-tour-so dd { display: block; margin: 0; }
.ttnd-tour-so dd b {
	white-space: nowrap;
	font-size: clamp(25px, 5.4vw, 32px); font-weight: 800; line-height: 1;
	color: var(--trang); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.ttnd-tour-so dd i {
	display: block; margin-top: 7px;
	font-style: normal; font-size: 13px; font-weight: 500; color: var(--sang-1); letter-spacing: 0;
}

/* ---------------------------------------------------- ngành hàng ----- */

.ttnd-nganh { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.ttnd-nganh li {
	display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px;
	padding: 18px 0; border-top: 1px solid var(--vien);
}
.ttnd-nganh li:last-child { border-bottom: 1px solid var(--vien); }
.ttnd-nganh span {
	grid-row: 1 / 3; font-size: 15px; font-weight: 800; color: var(--cam-chu);
	font-variant-numeric: tabular-nums; padding-top: 2px;
}
.ttnd-nganh b { font-size: 16.5px; font-weight: 700; }
.ttnd-nganh i { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--muc-mo); }

/* ------------------------------------------------- 2. dải hành trình -- */

.ttnd-hanh-trinh { list-style: none; margin: 0; padding: 0; }

.ttnd-chang {
	position: relative;
	display: grid; grid-template-columns: 44px minmax(0, 1fr);
	gap: 0 16px; padding: 0 0 26px;
}
.ttnd-chang:last-child { padding-bottom: 0; }

/* Mốc tròn + đường nối. Đường kéo từ đáy mốc xuống hết ô, chừa đúng khoảng
   đệm dưới nên nó chạm mốc kế tiếp — hở một quãng là đứt mạch hành trình. */
.ttnd-chang__moc {
	position: relative;
	grid-column: 1; grid-row: 1 / span 3;
	display: flex; justify-content: center;
}
.ttnd-chang__ngay { grid-column: 2; grid-row: 1; }
.ttnd-chang__than { grid-column: 2; grid-row: 2; }
.ttnd-chang__hanh { grid-column: 2; grid-row: 3; }
.ttnd-chang__moc span {
	position: relative; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--nen); border: 2px solid var(--vien-dam);
	font-size: 14px; font-weight: 800; color: var(--muc-600);
	font-variant-numeric: tabular-nums;
}
.ttnd-chang__moc::after {
	content: ""; position: absolute; left: 50%; margin-left: -1px;
	top: 38px; bottom: -26px; width: 2px; background: var(--vien);
}
.ttnd-chang:last-child .ttnd-chang__moc::after { display: none; }
.ttnd-chang--mo .ttnd-chang__moc span { background: var(--chinh); border-color: var(--chinh); color: #fff; }

.ttnd-chang__ngay { padding-top: 5px; padding-bottom: 12px; }
.ttnd-chang__ngay b {
	display: block; font-size: clamp(26px, 4.4vw, 34px); font-weight: 800;
	line-height: 1; letter-spacing: -.03em; color: var(--muc);
	font-variant-numeric: tabular-nums;
}
.ttnd-chang__ngay i {
	display: block; font-style: normal; font-size: 13px; font-weight: 600;
	color: var(--muc-nhan); margin-top: 5px;
}
.ttnd-chang--mo .ttnd-chang__ngay b { color: var(--chinh-dam); }

/* Đếm ngược tới ngày khai mạc. Chặng đang mở đăng ký thì tô đỏ đặc — đây là
   thứ duy nhất trên trang vừa gấp vừa bấm được. */
.ttnd-chang__dem {
	display: inline-block; margin-top: 9px; text-decoration: none;
	font-size: 12px; font-weight: 700; letter-spacing: .03em;
	padding: 4px 11px; border-radius: 999px;
	background: var(--nen-2); border: 1px solid var(--vien); color: var(--muc-600);
}
.ttnd-chang__dem--gap { background: var(--chinh); border-color: var(--chinh); color: #fff; }

/* Chấm trên nhãn "đang nhận đăng ký" nhấp nháy chậm. Nhấp nháy là dấu hiệu
   quen của "đang mở ngay lúc này". Giữ thật chậm và thật nhẹ: nhanh hơn thì
   thành thứ gây khó chịu, và ai đã tắt hiệu ứng chuyển động trong hệ điều
   hành thì không chạy nữa. */
@keyframes ttnd-nhip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ttnd-chang__tt--mo i { animation: ttnd-nhip 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ttnd-chang__tt--mo i { animation: none; } }

.ttnd-chang__than { min-width: 0; }
.ttnd-chang__ten { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.28; margin: 0 0 8px; }
.ttnd-chang__ten a { color: var(--muc); text-decoration: none; border-bottom: 2px solid var(--chinh); }
.ttnd-chang__ten a:hover { color: var(--chinh); }

.ttnd-chang__noi { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--muc-mo); margin: 0 0 10px; }
.ttnd-chang__noi svg { width: 16px; height: 16px; fill: var(--cam-nen); flex: none; }
.ttnd-chang__mo-ta { font-size: 14.5px; line-height: 1.6; color: var(--muc-mo); margin: 0 0 12px; max-width: 62ch; }

.ttnd-chang__so { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ttnd-chang__so li {
	font-size: 12.5px; font-weight: 600; color: var(--muc-600);
	background: var(--nen-2); border: 1px solid var(--vien);
	border-radius: 999px; padding: 4px 12px;
}
.ttnd-chang__con { background: var(--luc-100) !important; border-color: var(--luc-600) !important; color: var(--luc-800) !important; }

/* Nhãn trạng thái và nút cùng một chiều cao và cùng bo tròn kiểu viên thuốc:
   hai hình khối đứng sát nhau mà một cái bo tròn hẳn, một cái bo góc vuông
   thì đọc ra là hai thứ rời nhau, chứ không phải một cặp nhãn–hành động. */
.ttnd-chang__hanh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.ttnd-chang__hanh .ttnd-nut { border-radius: 999px; white-space: nowrap; }

/* Nút chính của chặng đang mở: đậm hơn, có mũi tên. Mũi tên nhích sang phải
   khi rê chuột — cử động nhỏ nhưng nói rõ bấm vào là ĐI TIẾP sang trang
   khác, không phải mở ra tại chỗ. */
.ttnd-nut--mui { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; padding: 14px 24px; }
.ttnd-nut--mui svg { width: 18px; height: 18px; fill: currentColor; flex: none; transition: transform .16s ease; }
.ttnd-nut--mui:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ttnd-nut--mui svg { transition: none; } }
.ttnd-chang__tt {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
	padding: 6px 14px 6px 11px; border-radius: 999px;
	background: var(--nen-2); border: 1px solid var(--vien); color: var(--muc-600);
}
.ttnd-chang__tt i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* Chặng đang mở: nhãn LỤC. Lục trong bảng màu này chỉ có một việc — báo còn
   chỗ — nên nó nói đúng thứ nhãn cần nói, mà lại không tranh sắc đỏ của nút
   bấm ngay bên dưới. */
.ttnd-chang--mo .ttnd-chang__tt,
.ttnd-chang__tt--dang-dien-ra { background: var(--luc-100); border-color: var(--luc-600); color: var(--luc-800); }
.ttnd-chang__hanh .ttnd-nut { flex: 1 1 auto; }

/* Chặng đang mở đăng ký nâng lên thành một tấm riêng — nó là chỗ duy nhất
   trên trang bấm vào đặt được gian, phải khác hẳn ba chặng còn lại. */
.ttnd-chang--mo .ttnd-chang__than,
.ttnd-chang--mo .ttnd-chang__ngay { position: relative; z-index: 1; }
.ttnd-chang--mo::before {
	content: ""; position: absolute; z-index: 0;
	/* Mép trái tấm đặt ở GIỮA mốc tròn, để mốc nằm đè lên viền chứ không đứng
	   sát cạnh nó. Sát cạnh thì hai đường thẳng cách nhau 2px, nhìn như in
	   lệch; đè lên nhau thì rõ là cố ý.

	   Mép PHẢI phải bằng 0, tức trùng mép phải của khung nội dung. Trước đây
	   để -14px nên tấm này là vật thể duy nhất trên trang thò ra ngoài lề
	   phải — mọi khối khác đều dừng ở cùng một đường, riêng nó lấn ra, nhìn
	   như trang bị lệch. */
	left: 22px; right: 0; top: -14px; bottom: 12px;
	background: var(--nen); border: 1.5px solid var(--chinh); border-radius: var(--bo);
}
.ttnd-chang--mo > * { position: relative; z-index: 1; }

/* --------------------------------------------------- 3. dải lý do ----- */

.ttnd-ly-do { display: grid; gap: 22px; counter-reset: ld; }
.ttnd-ly-do article { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 16px; }
.ttnd-ly-do span {
	grid-row: 1 / 3;
	font-size: 26px; font-weight: 800; line-height: 1;
	color: var(--muc-nhan); font-variant-numeric: tabular-nums;
}
.ttnd-ly-do h3 { font-size: 17.5px; margin: 0 0 7px; align-self: center; }
.ttnd-ly-do p { font-size: 14.5px; line-height: 1.65; color: var(--muc-mo); margin: 0; }

/* ------------------------------------------------ khổ máy tính bảng --- */

@media (min-width: 700px) {
	.ttnd-chang { grid-template-columns: 56px 148px minmax(0, 1fr); gap: 0 20px; padding-bottom: 34px; }
	.ttnd-chang__moc { grid-row: 1 / span 2; }
	.ttnd-chang__moc span { width: 44px; height: 44px; font-size: 15px; }
	.ttnd-chang__moc::after { top: 44px; bottom: -34px; }
	.ttnd-chang__ngay { grid-column: 2; grid-row: 1; padding-bottom: 0; }
	.ttnd-chang__than { grid-column: 3; grid-row: 1; }
	.ttnd-chang__hanh { grid-column: 3; grid-row: 2; }
	.ttnd-chang--mo::before { left: 28px; top: -18px; bottom: 16px; }
	/* Nội dung lùi vào trong tấm, không dán sát viền. */
	.ttnd-chang--mo .ttnd-chang__than { padding-right: 18px; }
	.ttnd-chang--mo .ttnd-chang__ngay,
	.ttnd-chang--mo .ttnd-chang__than { padding-top: 4px; }

	.ttnd-ly-do { grid-template-columns: repeat(3, 1fr); gap: 26px; }
	.ttnd-nganh { grid-template-columns: 1fr 1fr; column-gap: 40px; }
	.ttnd-nganh li:nth-child(2) { border-top: 1px solid var(--vien); }
	.ttnd-nganh li:nth-last-child(2) { border-bottom: 1px solid var(--vien); }

	/* Bốn ô ngang, vạch dọc ngăn giữa. */
	.ttnd-tour-so { grid-template-columns: repeat(4, 1fr); }
	.ttnd-tour-so > div:nth-child(n+2) { padding-left: 20px; border-left: 1px solid var(--vien-toi); }
	.ttnd-tour-so > div:nth-child(n+3) { border-top: 0; }

}

/* -------------------------------------------------- khổ máy tính ----- */

@media (min-width: 1000px) {
	.ttnd-tour-dau { padding: 48px 0 46px; }

	/* Hai cột, ba mảnh: chữ và chân dải chồng nhau ở cột trái, áp phích chiếm
	   trọn cột phải từ trên xuống dưới. Áp phích cao hơn khối chữ nên chính
	   nó quy định chiều cao của dải — chữ căn giữa theo nó. */
	/* Cột phải 400px cho áp phích, khe 96px, cột trái nhận đúng phần còn lại
	   (~674px) — vừa tầm đọc mà mép phải của chữ chỉ cách áp phích đúng một
	   khe, không còn khoảng hở 240px như bản trước. */
	.ttnd-tour-dau__luoi {
		grid-template-columns: minmax(0, 1fr) 370px;
		gap: 28px 88px; align-items: center;
	}
	.ttnd-tour-dau__chu  { grid-column: 1; grid-row: 1; align-self: end; }
	.ttnd-tour-dau__duoi { grid-column: 1; grid-row: 2; align-self: start; }
	.ttnd-tour-anh       { grid-column: 2; grid-row: 1 / span 2; }


	/* Cột hành động tách sang phải: cột ngày và cột chữ giữ nguyên bề ngang,
	   nút không còn chen xuống dưới đoạn mô tả. */
	.ttnd-chang { grid-template-columns: 56px 156px minmax(0, 1fr) 216px; }
	.ttnd-chang__moc { grid-row: 1; }
	.ttnd-chang__hanh { grid-column: 4; grid-row: 1; flex-direction: column; align-items: stretch; margin-top: 4px; padding-left: 24px; }
	.ttnd-chang__tt { align-self: flex-start; }
	.ttnd-chang__hanh .ttnd-nut { flex: none; width: 100%; text-align: center; }
	.ttnd-chang--mo .ttnd-chang__hanh { padding-right: 20px; }
	.ttnd-chang--mo .ttnd-chang__than { padding-right: 0; }
}

/* ======================================================================
   SIẾT BẢNG MÀU

   Trang đang dùng sáu họ màu — đỏ, cam, vàng, lục, xanh đêm, kem — và hai
   trong số đó làm cùng một việc. Cam và vàng cùng đóng vai "màu phụ ấm":
   nhãn nhỏ, giá tiền, viền nhấn, thanh tiến độ. Hai màu tranh một vai thì
   mắt không học được quy tắc nào, nhìn ra là hơi lộn xộn mà không chỉ được
   lộn ở đâu.

   Bỏ hẳn họ CAM, dồn vai đó cho VÀNG — đúng ba màu của poster: xanh đêm,
   đỏ, vàng. Vàng đổi sắc độ theo nền chứ không đổi họ:

     nền tối  → vàng sáng  #F0B323   (7,4:1 trên nền đêm)
     nền sáng → vàng sâu   #6F5100   (7,4:1 trên trắng, 6,6:1 trên kem)

   Sau khi dồn, mỗi màu còn đúng một việc:

     xanh đêm  nền của dải tối, và toàn bộ chữ chính
     đỏ        HÀNH ĐỘNG — nút bấm, mục đang mở, liên kết trong câu
     vàng      màu phụ — nhãn nhỏ, giá, viền nhấn, gạch trang trí
     lục       CHỈ trạng thái còn chỗ, không dùng vào việc gì khác
     kem       nền ấm trung tính
   ====================================================================== */

:root {
	--vang-900: #6F5100;      /* vàng sâu, dùng cho chữ trên nền sáng */

	/* Thang chữ trên NỀN TỐI, bốn bậc, không hơn:
	     #FFFFFF  tiêu đề
	     --sang-1 chữ nhấn: mục menu, nhãn số liệu
	     --sang-2 chữ thường
	     --muc-400 nhãn nhỏ viết hoa, bậc mờ nhất
	   Trước đây bậc thứ hai có tới ba mã gần giống nhau (#DDE3F1, #DCE3F2,
	   #C7D0E6) do ba lần thêm rời rạc — mắt không phân biệt được, mà bảng màu
	   thì phình ra. */
	--sang-1: #E2E8F6;
	--sang-2: var(--muc-sang-mo);
}

/* Chữ trên nút vàng vốn là #14213D — cùng vai với mực chính #17203A mà lệch
   nhau vài phần trăm độ sáng, mắt không thấy khác, bảng màu thì dài thêm một
   dòng. Dồn về mực chính, vẫn 8,9:1 trên nền vàng. */
.ttnd-nut--vang, .ttnd-nut--vang:hover { color: var(--muc-900); }

:root {
	--cam-chu:  var(--vang-900);
	--cam-nen:  var(--vang-500);
	--cam-100:  var(--vang-200);
	--cam-800:  var(--vang-900);
	--cam-600:  var(--vang-500);
}

/* Cam THẬT, không dồn về vàng được — cùng lý do với hai chỗ bên trên: đây là
   dấu hiệu, không phải trang trí.

   Ô gian của khối đối tác phải tách khỏi ô "đang giữ chỗ", mà "đang giữ chỗ"
   chính là vàng. Lấy --cam-600 (đã bị dồn thành vàng #F0B323) thì hai trạng
   thái về cùng một màu, đúng cái đang cần tránh. Vì thế khai riêng ở đây thay
   vì sửa --cam-600: mọi chỗ khác trong theme dùng cam làm trang trí vẫn nên
   tiếp tục ra vàng. */
:root {
	--doi-tac-nen:  #E07A1F;   /* 5,2:1 với nền sơ đồ — ranh giới ô rõ */
	--doi-tac-vien: #8F4508;
	--doi-tac-chu:  var(--dem-900);   /* 6,2:1 trên nền cam */
}

/* Hai chỗ KHÔNG lấy vàng sáng được, vì chúng là dấu hiệu chứ không phải
   trang trí: WCAG 1.4.11 đòi ranh giới thành phần đạt 3:1, mà vàng sáng trên
   nền trắng chỉ 1,8:1. Cả hai chuyển sang đỏ. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible { outline-color: var(--do-700); }
.ttnd-o input:focus,
.ttnd-o select:focus,
.ttnd-o textarea:focus { border-color: var(--do-700); }

/* Trên nền đêm thì ngược lại: đỏ chỉ 2,3:1 với nền, vàng sáng 7,4:1. */
.ttnd-tour-dau a:focus-visible,   .ttnd-tour-dau button:focus-visible,
.ttnd-bc-dau a:focus-visible,     .ttnd-bc-dau button:focus-visible,
.ttnd-khoi--toi a:focus-visible,  .ttnd-khoi--toi button:focus-visible,
.ttnd-cta a:focus-visible,        .ttnd-cta button:focus-visible,
.ttnd-chan a:focus-visible,       .ttnd-chan button:focus-visible,
.ttnd-dg-banner a:focus-visible,  .ttnd-dg-banner button:focus-visible,
.ttnd-menu a:focus-visible,       .ttnd-menu button:focus-visible,
.ttnd-dau a:focus-visible,        .ttnd-dau button:focus-visible { outline-color: var(--vang-500); }

/* ======================================================================
   NHỊP CỦA TRANG

   Ba dải nội dung trước đây chỉ khác nhau ở màu nền, nên đọc lướt xuống thấy
   ba khối rời chứ không thấy một mạch. Thêm hai thứ để chúng thành hệ:
   gạch vàng ngắn mở đầu mỗi dải, và khoảng đệm co giãn theo bề ngang màn.
   ====================================================================== */

.ttnd-khoi { padding: clamp(46px, 6.6vw, 82px) 0; }
.ttnd-td { margin-bottom: clamp(28px, 3.4vw, 42px); }

/* Gạch lấy currentColor nên tự đổi theo nền: vàng sâu trên nền sáng, vàng
   sáng trên nền tối. Một luật, hai ngữ cảnh, không phải viết đôi. */
.ttnd-td__nhan::before,
.ttnd-tour-dau__nhan::before {
	content: ""; display: block;
	width: 32px; height: 3px; border-radius: 2px;
	background: currentColor; margin-bottom: 13px;
}
.ttnd-td__h { letter-spacing: -.022em; line-height: 1.14; }
.ttnd-td__p { max-width: 64ch; line-height: 1.62; }

/* ======================================================================
   TINH CHỈNH TRANG CHỦ
   ====================================================================== */

/* Dòng đầu H1 trắng, dòng sau vàng — nhưng chỉ khi H1 có hai dòng thật. */
.ttnd-tour-dau__h1 { line-height: 1.03; letter-spacing: -.032em; }

/* Bảng số liệu: viền ngoài đậm hơn viền trong một bậc, để cả bảng đọc thành
   MỘT vật thể có bốn ngăn, không phải bốn ô rời tình cờ nằm cạnh nhau. */
.ttnd-tour-so { border-color: rgba(240,179,35,.34); }
.ttnd-tour-so dd i { color: var(--sang-1); }

@media (min-width: 700px) {
	/* Cột ngày căn PHẢI: bốn khoảng ngày dài ngắn khác nhau, căn trái thì mép
	   phải lởm chởm ngay sát cột chữ. Căn phải cho một trục thẳng chạy dọc
	   giữa ngày và tên hội chợ — chỗ nghỉ mắt của cả dải. */
	.ttnd-chang__ngay { text-align: right; padding-right: 26px; border-right: 1px solid var(--vien); }
	.ttnd-chang--mo .ttnd-chang__ngay { border-right-color: var(--do-100); }
	.ttnd-chang { padding-bottom: 40px; }
	.ttnd-chang__moc::after { bottom: -40px; }
}

/* Khối lý do: số thứ tự to hơn và nhạt hơn, đóng vai mốc đếm chứ không tranh
   chỗ với tiêu đề ngay bên cạnh. */
.ttnd-ly-do span { font-size: 30px; letter-spacing: -.03em; }
.ttnd-ly-do h3 { letter-spacing: -.015em; }

/* ======================================================================
   BÁO CÁO DOANH THU — trang nội bộ

   Bố cục đi từ thô tới mịn, đúng thứ tự người xem cần: một con số lớn duy
   nhất, rồi tiền, rồi bán được Ở ĐÂU, cuối cùng mới tới từng đơn.
   ====================================================================== */

/* ------------------------------------------------------- cổng mật khẩu - */

.ttnd-bc-cong { display: flex; justify-content: center; padding: clamp(40px, 8vw, 90px) 24px; background: var(--nen-2); }
.ttnd-bc-cong__the {
	width: 100%; max-width: 420px; text-align: center;
	background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo);
	padding: clamp(26px, 6vw, 40px) clamp(20px, 5vw, 34px);
}
.ttnd-bc-cong__khoa {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; margin-bottom: 18px;
	background: var(--dem-800); border-radius: 50%;
}
.ttnd-bc-cong__khoa svg { width: 26px; height: 26px; fill: var(--trang); }
.ttnd-bc-cong__the h1 { font-size: clamp(21px, 4vw, 26px); margin: 0 0 10px; letter-spacing: -.02em; }
.ttnd-bc-cong__mo-ta { font-size: 14.5px; line-height: 1.6; color: var(--muc-mo); margin: 0 0 22px; }
.ttnd-bc-cong__loi {
	background: var(--do-100); border: 1px solid var(--do-700); border-radius: var(--bo-nho);
	padding: 11px 14px; margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--do-900);
}
.ttnd-bc-cong__chua {
	background: var(--vang-200); border: 1px solid var(--vang-800); border-radius: var(--bo-nho);
	padding: 13px 16px; margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--vang-800); text-align: left;
}
/* Khoác áo cho biểu mẫu gốc của WordPress. Nó in ra một <p> chứa nhãn, ô
   nhập và nút bấm nằm chung một dòng — tách ra thành khối dọc cho vừa màn
   điện thoại, và ép cỡ chữ 16px để iPhone không tự phóng to trang khi chạm
   vào ô nhập. */
.ttnd-bc-cong__form .post-password-form { margin: 0; text-align: left; }
.ttnd-bc-cong__form .post-password-form p { margin: 0 0 14px; font-size: 14px; color: var(--muc-mo); }
.ttnd-bc-cong__form .post-password-form label {
	display: block; font-size: 13.5px; font-weight: 600; color: var(--muc);
}
.ttnd-bc-cong__form input[type="password"] {
	display: block; width: 100%; margin: 7px 0 0;
	font-family: var(--chu); font-size: 16px; line-height: 1.5; padding: 12px 14px;
	background: var(--nen); border: 1.5px solid var(--vien-dam);
	border-radius: var(--bo-nho); color: var(--muc);
}
.ttnd-bc-cong__form input[type="password"]:focus { border-color: var(--do-700); }
.ttnd-bc-cong__form input[type="password"]:focus:not(:focus-visible) { outline: none; }
.ttnd-bc-cong__form input[type="submit"] {
	display: block; width: 100%; margin-top: 14px;
	font-family: var(--chu); font-size: 15px; font-weight: 700; line-height: 1.2;
	padding: 14px 22px; min-height: 48px; cursor: pointer;
	background: var(--chinh); color: #fff;
	border: 1.5px solid var(--chinh); border-radius: var(--bo-nho);
}
.ttnd-bc-cong__form input[type="submit"]:hover { background: var(--chinh-dam); border-color: var(--chinh-dam); }

/* ----------------------------------------------------------- dải đầu --- */

.ttnd-bc-dau { background: var(--dem-800); color: #fff; padding: clamp(30px, 5vw, 46px) 0; }
.ttnd-bc-dau__luoi { display: grid; gap: 26px; align-items: center; }
.ttnd-bc-dau__nhan {
	font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--muc-400); margin: 0 0 12px;
}
.ttnd-bc-dau__h1 { font-size: clamp(24px, 4.4vw, 36px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 12px; color: #fff; }
.ttnd-bc-dau__mo-ta { font-size: 14.5px; line-height: 1.65; color: var(--muc-sang-mo); margin: 0; max-width: 52ch; }

/* Con số lớn duy nhất của trang. */
.ttnd-bc-vong {
	border: 1px solid var(--vien-toi); border-radius: var(--bo);
	padding: 20px 24px; text-align: center;
}
.ttnd-bc-vong b {
	display: block; font-size: clamp(46px, 12vw, 68px); font-weight: 800; line-height: 1;
	letter-spacing: -.04em; color: var(--trang); font-variant-numeric: tabular-nums;
}
.ttnd-bc-vong b i { font-style: normal; font-size: .4em; margin-left: 3px; }
.ttnd-bc-vong span { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sang-1); margin-top: 10px; }
.ttnd-bc-vong em { display: block; font-style: normal; font-size: 13px; color: var(--muc-400); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ ba ô tiền */

.ttnd-bc-tien { display: grid; gap: 1px; background: var(--vien); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; }
.ttnd-bc-tien > div { background: var(--nen); padding: 18px 20px; }
.ttnd-bc-tien span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muc-nhan); margin-bottom: 9px; }
.ttnd-bc-tien b { display: block; font-size: clamp(20px, 4vw, 25px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--muc); font-variant-numeric: tabular-nums; }
.ttnd-bc-tien i { display: block; font-style: normal; font-size: 13px; color: var(--muc-mo); margin-top: 8px; }
.ttnd-bc-tien--con b { color: var(--chinh-dam); }

.ttnd-bc-hom-nay { font-size: 14px; color: var(--muc-mo); margin: 16px 0 0; }
.ttnd-bc-hom-nay strong { color: var(--muc); }

/* ---------------------------------------------------------- chi phí, lãi */

/* Hai ô lãi tô nền thay vì để trần như ba ô tiền bên trên: đây là con số kết
   luận của cả trang, phải khác sắc độ với các ô đầu vào thì mắt mới dừng lại
   đúng chỗ. Lãi âm đổi sang tông đỏ — dấu trừ một mình quá dễ đọc lướt qua. */
.ttnd-bc-lai { display: grid; gap: 1px; background: var(--vien); border: 1px solid var(--vien);
	border-radius: var(--bo); overflow: hidden; margin-top: 16px; }
.ttnd-bc-lai > div { background: var(--luc-100); padding: 18px 20px; }
.ttnd-bc-lai span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--luc-800); margin-bottom: 9px; }
.ttnd-bc-lai b { display: block; font-size: clamp(20px, 4vw, 25px); font-weight: 800; line-height: 1.05;
	letter-spacing: -.025em; color: var(--luc-800); font-variant-numeric: tabular-nums; }
.ttnd-bc-lai i { display: block; font-style: normal; font-size: 13px; color: var(--muc-mo); margin-top: 8px;
	font-variant-numeric: tabular-nums; }
/* Phải qua `> ` cho đủ nặng: `.ttnd-bc-lai > div` ở trên có hai mức chọn lọc,
   viết `.ttnd-bc-lai--am` trần một mức thì màu nền không bao giờ thắng — chữ
   đổi sang đỏ mà ô vẫn nền xanh, nhìn còn khó hiểu hơn là để nguyên. */
.ttnd-bc-lai > .ttnd-bc-lai--am { background: var(--do-100); }
.ttnd-bc-lai--am span, .ttnd-bc-lai--am b { color: var(--do-900); }

/* NHỊP DỌC CỦA CẢ TRANG.
   `.ttnd-bc-h2` khai margin clamp(30px,5vw,44px) 0 16px, nhưng chủ đề cha đè
   margin của h2 về 0 với mức chọn lọc cao hơn — nên suốt từ trước tới nay MỌI
   tiêu đề mục đều dính sát khối ngay trên nó, đo ra đúng 0px. Bám thêm
   `.ttnd-khoi` cho đủ nặng để trả lại khoảng thở mà tác giả đã định.
   Đặt một giá trị cho tất cả, không vá lẻ từng mục: vá lẻ thì mục nào được vá
   mới có lề, và trang trông như xếp ngẫu nhiên. */
.ttnd-khoi .ttnd-bc-h2 { margin-top: clamp(30px, 5vw, 44px); margin-bottom: 16px; }
/* Mục đầu tiên sau dải ô tiền không cần nhiều thế — nó đã có khoảng của khối. */
.ttnd-khoi .ttnd-bc-h2--chi { margin-top: 32px; }

.ttnd-bc-chi-trong { font-size: 14px; color: var(--muc-mo); margin: 0;
	padding: 14px 16px; border: 1px dashed var(--vien); border-radius: var(--bo); background: var(--kem-50); }
.ttnd-bc-chi-trong a { color: var(--cam-chu); font-weight: 600; }

/* ------------------------------------------------------- bảng thu chi */

/* Số tiền căn PHẢI và dùng chữ số đều bề ngang: cột tiền chỉ so sánh được
   bằng mắt khi hàng đơn vị thẳng nhau. Căn trái thì 858.200.000 và 40.000.000
   trông dài gần bằng nhau. */
.ttnd-thu-chi .ttnd-so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ttnd-thu-chi thead th.ttnd-so { text-align: right; }
.ttnd-thu-chi tbody th { font-weight: 600; white-space: normal; min-width: 210px; }
/* Chú thích phụ trong ô tên khoản mục: xuống dòng riêng, nhạt hơn, để tên
   khoản vẫn là thứ đọc trước. */
.ttnd-thu-chi tbody th em { display: block; font-style: normal; font-size: 12.5px;
	font-weight: 400; color: var(--muc-600); margin-top: 2px; }

.ttnd-thu-chi__chu { margin: 0 0 10px; padding: 11px 14px; font-size: 13px; line-height: 1.55;
	color: var(--muc-mo); background: var(--kem-50); border: 1px solid var(--vien);
	border-radius: var(--bo); }
.ttnd-thu-chi__chu b { color: var(--muc); font-weight: 700; }

/* Trên điện thoại bốn cột phải VỪA màn hình, không cuộn ngang: đây là bảng
   người ta mở trang để xem, cuộn ngang một bảng kết luận là bắt đọc từng mảnh.
   Bóp đệm, hạ cỡ chữ, bỏ min-width của cột tên và cho tên khoản mục xuống
   dòng — chữ nhỏ hơn nhưng vẫn đọc trọn một lần nhìn. */
@media (max-width: 699px) {
	.ttnd-bang.ttnd-thu-chi { font-size: 12.5px; }
	/* Đệm 7px mỗi bên vẫn dư 41px so với khung 341px — hạ xuống 4px và cho cột
	   tên co hết mức, đo lại thì vừa khít, không còn mẩu cột nào bị cắt. */
	.ttnd-bang.ttnd-thu-chi th,
	.ttnd-bang.ttnd-thu-chi td { padding: 9px 4px; white-space: normal; }
	.ttnd-bang.ttnd-thu-chi tbody th,
	.ttnd-bang.ttnd-thu-chi tfoot th { word-break: break-word; }
	.ttnd-bang.ttnd-thu-chi tbody th { min-width: 0; }
	/* Cột số nhỏ hơn cột chữ một nấc: chuỗi "858.200.000 đ" là thứ quyết định
	   bề ngang cả bảng, và chữ số đều bề ngang nên nhỏ đi vẫn dễ dò theo cột. */
	.ttnd-bang.ttnd-thu-chi .ttnd-so { white-space: nowrap; font-size: 11.5px; }
	.ttnd-bang.ttnd-thu-chi thead th { font-size: 10.5px; letter-spacing: .02em; }
	.ttnd-bang.ttnd-thu-chi tbody th em { font-size: 11px; }
	.ttnd-bang.ttnd-thu-chi tfoot th,
	.ttnd-bang.ttnd-thu-chi tfoot td { font-size: 13px; }
}

/* Chữ nhãn nhóm dùng --muc-600 chứ không --muc-nhan: đo trên nền --kem-100 thì
   --muc-nhan chỉ được 4,15:1, dưới ngưỡng 4,5:1 của chữ nhỏ (12px in hoa không
   tính là chữ lớn dù đậm). --muc-600 cho 5,26:1. */
.ttnd-thu-chi__nhom th { background: var(--kem-100); font-size: 12px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muc-600); padding-top: 9px; padding-bottom: 9px; }
.ttnd-thu-chi__nhom th em { display: inline; font-style: normal; font-size: 11.5px;
	font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muc-600); }
.ttnd-thu-chi__cong th, .ttnd-thu-chi__cong td { font-weight: 800; border-top: 1px solid var(--vien-dam); }
.ttnd-thu-chi__trong td { color: var(--muc-mo); font-size: 13.5px; white-space: normal; }

/* Dòng kết nổi hẳn lên: đây là câu trả lời của cả bảng.
   Phải bám thêm `.ttnd-bang` cho đủ nặng: quy tắc `.ttnd-bang tfoot th` ở dưới
   trong file có cùng mức chọn lọc nên nó thắng theo thứ tự, và nền kem của nó
   kèm chữ trắng của tôi cho ra tương phản 1,13:1 — gần như không đọc được. */
.ttnd-bang.ttnd-thu-chi tfoot th,
.ttnd-bang.ttnd-thu-chi tfoot td { background: var(--dem-800); color: #fff;
	font-weight: 800; font-size: 15px; border-top: 2px solid var(--dem-900); }
.ttnd-bang.ttnd-thu-chi tfoot .ttnd-so--am { color: #FFC2CA; }

/* --------------------------------------------- nút in giấy tờ của đơn */

/* Ba nút xếp ngang, không xuống dòng: cột này nằm cuối bảng đã cuộn ngang, để
   nút tự xuống dòng thì mỗi đơn cao một kiểu và mắt mất hàng khi dò. */
.ttnd-giay-to { white-space: nowrap; }

/* GHIM cột Giấy tờ vào mép phải khung cuộn. Bảng đơn có mười một cột nên trên
   màn hình thường cột cuối nằm ngoài tầm nhìn — người dùng bấm vào trang, thấy
   bảng, và không hề biết là có ba nút in nằm khuất bên phải. Ghim lại thì nút
   luôn ở đó, còn phần thông tin thì kéo ngang phía dưới nó.
   Nền phải ĐẶC: ô ghim trượt đè lên các ô khác, để trong suốt là chữ chồng chữ.
   Vệt đổ bóng bên trái nói cho mắt biết đây là cột đang nổi, không phải cột
   liền mạch với phần vừa kéo qua. */
/* CHỈ ghim từ 700px trở lên. Ba nút cạnh nhau chiếm 325px, mà khung cuộn trên
   điện thoại chỉ rộng 343px — ghim ở đó thì cột Giấy tờ che gần hết bảng và
   không còn chỗ nào để đọc tên đơn vị. Màn hình hẹp thì để nó là cột cuối
   bình thường, người dùng kéo ngang tới như mọi cột khác. */
@media (min-width: 700px) {
	/* GHIM CẢ CỤM THAO TÁC: ba nút in và nút đổi gian. Cột Đổi rộng cố định
	   64px nên cột Giấy tờ neo được vào mốc right:64px mà không phải đo. */
	.ttnd-bang--don td.ttnd-doi-o,
	.ttnd-bang--don th.ttnd-doi-o { position: sticky; right: 0; z-index: 2; width: 64px; min-width: 64px; }
	.ttnd-bang--don td.ttnd-giay-to,
	.ttnd-bang--don th.ttnd-giay-to-dau { position: sticky; right: 64px; z-index: 2;
		box-shadow: -9px 0 11px -9px rgba(0, 0, 0, .3); }
	.ttnd-bang--don td.ttnd-giay-to,
	.ttnd-bang--don td.ttnd-doi-o { background: var(--nen); }
	/* Ô tiêu đề phải nằm trên ô thân khi cuộn dọc, và giữ nền tối của thead. */
	.ttnd-bang--don thead th.ttnd-giay-to-dau,
	.ttnd-bang--don thead th.ttnd-doi-o { z-index: 3; background: var(--dem-800); }
}
.ttnd-giay-to__nut { display: inline-block; margin: 2px 4px 2px 0; padding: 7px 11px;
	font-size: 12.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
	color: var(--muc-900); background: var(--nen); border: 1px solid var(--vien-dam); border-radius: 7px; }
.ttnd-giay-to__nut:hover { background: var(--kem-100); border-color: var(--muc-600); color: var(--muc-900); }
.ttnd-giay-to__nut:focus-visible { outline: 2px solid var(--cam-600); outline-offset: 1px; }
/* Ghi đè quy tắc chung `.ttnd-bang td a` (đệm dọc cho số điện thoại bấm gọi) —
   nếu không, nút mất viền và trông như chữ thường. */
.ttnd-bang td.ttnd-giay-to a { display: inline-block; padding: 7px 11px; }

/* ------------------------------------------------- ô tìm nhanh trong đơn */

.ttnd-tim { margin: 0 0 14px; }
.ttnd-tim__nhan { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--muc-600); margin-bottom: 6px; }
/* 16px là cỡ chữ tối thiểu để Safari trên iPhone KHÔNG tự phóng to trang khi
   chạm vào ô nhập — phóng xong người dùng phải tự thu lại, rất khó chịu. */
.ttnd-tim input { width: 100%; min-height: 46px; padding: 11px 14px; font: inherit; font-size: 16px;
	color: var(--muc); background: var(--nen); border: 1px solid var(--vien-dam); border-radius: 10px; }
.ttnd-tim input:focus-visible { outline: 2px solid var(--cam-600); outline-offset: 1px; border-color: var(--cam-600); }
.ttnd-tim__dem { margin: 7px 0 0; font-size: 13px; color: var(--muc-mo); min-height: 1em; }

/* ----------------------------- danh sách đơn: THẺ trên điện thoại ------- */

/* Ban tổ chức làm việc chủ yếu trên điện thoại, mà bảng đơn có mười một cột —
   cuộn ngang trên màn 375px nghĩa là mỗi lần muốn đối chiếu tên đơn vị với số
   tiền phải kéo qua kéo lại, và ba nút in thì nằm khuất hẳn. Nên dưới 700px
   bảng bỏ hẳn dạng bảng: mỗi đơn thành MỘT THẺ đọc từ trên xuống, không còn
   cuộn ngang. Nhãn từng dòng lấy từ data-nhan vì hàng tiêu đề đã ẩn đi. */
@media (max-width: 699px) {
	.ttnd-bang-boc--don { overflow: visible; border: 0; background: none; border-radius: 0; }
	.ttnd-bang--don,
	.ttnd-bang--don tbody,
	.ttnd-bang--don tfoot,
	.ttnd-bang--don tr,
	.ttnd-bang--don th,
	.ttnd-bang--don td { display: block; width: auto; }
	.ttnd-bang--don thead { display: none; }

	.ttnd-bang--don tbody tr,
	.ttnd-bang--don tfoot tr { border: 1px solid var(--vien); border-radius: var(--bo);
		background: var(--nen); padding: 14px 16px; margin-bottom: 12px; }

	/* Mỗi ô là một dòng "nhãn — giá trị". white-space: normal để tên đơn vị dài
	   xuống dòng thay vì kéo thẻ rộng ra. */
	.ttnd-bang--don tbody td,
	.ttnd-bang--don tbody th { display: flex; justify-content: space-between; align-items: baseline;
		gap: 14px; padding: 5px 0; white-space: normal; text-align: right; border: 0; }
	.ttnd-bang--don tbody td::before,
	.ttnd-bang--don tbody th::before { content: attr(data-nhan); flex: 0 0 auto; text-align: left;
		font-size: 12.5px; font-weight: 600; color: var(--muc-600); }

	/* Mã đơn là tiêu đề thẻ: tách hẳn bằng một đường kẻ, chữ to hơn. */
	.ttnd-bang--don tbody th[scope="row"] { padding-bottom: 10px; margin-bottom: 6px;
		border-bottom: 1px solid var(--vien); }
	.ttnd-bang--don tbody th[scope="row"] code { font-size: 15px; font-weight: 800; }

	/* Tên đơn vị là thứ người ta dò, nên cho nó chiếm trọn một dòng, cỡ chữ lớn,
	   căn trái — không ép vào cột phải như các giá trị số. */
	.ttnd-bang--don tbody td.ttnd-bang__dv { display: block; text-align: left;
		font-size: 15.5px; font-weight: 700; line-height: 1.35; padding: 2px 0 8px; }
	.ttnd-bang--don tbody td.ttnd-bang__dv::before { display: block; margin-bottom: 2px; font-weight: 600; }

	/* Ba nút in chiếm trọn bề ngang, xếp dọc, cao 44px cho vừa ngón tay. */
	.ttnd-bang--don tbody td.ttnd-giay-to { display: block; text-align: left; padding-top: 10px;
		margin-top: 6px; border-top: 1px solid var(--vien); white-space: normal; }
	.ttnd-bang--don tbody td.ttnd-giay-to::before { display: block; margin-bottom: 7px; }
	/* min-height 46px: ngưỡng bấm bằng ngón cái mà Apple khuyến nghị là 44px,
	   đệm 12px chỉ cho ra 43px — thiếu đúng một điểm ảnh thì vẫn là thiếu. */
	.ttnd-bang td.ttnd-giay-to a,
	.ttnd-bang--don tbody td.ttnd-giay-to .ttnd-giay-to__nut { display: flex; width: 100%; margin: 0 0 8px;
		min-height: 46px; align-items: center; justify-content: center;
		padding: 10px; text-align: center; font-size: 15px; }

	/* Dòng cộng ở chân bảng: các ô colspan rỗng không còn chỗ đứng trong thẻ. */
	.ttnd-bang--don tfoot tr { background: var(--kem-100); font-weight: 700; }
	.ttnd-bang--don tfoot td:empty { display: none; }
	.ttnd-bang--don tfoot th, .ttnd-bang--don tfoot td { display: flex; justify-content: space-between;
		gap: 14px; padding: 4px 0; text-align: right; border: 0; white-space: normal; }

	/* ---- bảng "Theo hạng gian" cũng thành thẻ ---- */
	/* Năm cột, đo ra 591px trong khung 341px — hơn gấp rưỡi màn hình. Bảng này
	   chỉ có hai dòng nên xếp thành hai thẻ là đọc thoải mái nhất. */
	.ttnd-bang--the,
	.ttnd-bang--the tbody,
	.ttnd-bang--the tr,
	.ttnd-bang--the th,
	.ttnd-bang--the td { display: block; width: auto; }
	.ttnd-bang--the thead { display: none; }
	.ttnd-bang--the tbody tr { border: 1px solid var(--vien); border-radius: var(--bo);
		background: var(--nen); padding: 12px 14px; margin-bottom: 12px; }
	.ttnd-bang--the tbody td,
	.ttnd-bang--the tbody th { display: flex; justify-content: space-between; align-items: baseline;
		gap: 14px; padding: 5px 0; white-space: normal; text-align: right; border: 0; }
	.ttnd-bang--the tbody td::before,
	.ttnd-bang--the tbody th::before { content: attr(data-nhan); flex: 0 0 auto; text-align: left;
		font-size: 12.5px; font-weight: 600; color: var(--muc-600); }
	.ttnd-bang--the tbody th[scope="row"] { padding-bottom: 9px; margin-bottom: 5px;
		border-bottom: 1px solid var(--vien); font-size: 15px; }
	.ttnd-bang--the tbody th[scope="row"]::before { font-weight: 600; }
	.ttnd-bang-boc--the { overflow: visible; border: 0; background: none; }

	/* ---- bảng NHẬP khoản chi cũng thành thẻ ---- */
	/* Bảy ô nhập trên một hàng là 1136px, gấp hơn ba lần bề ngang điện thoại.
	   Gõ một khoản chi mà phải kéo ngang ba lần thì không ai gõ trên điện thoại
	   cả. Xuống đây mỗi khoản là một thẻ, nhãn nằm TRÊN ô nhập chứ không bên
	   trái — ô nhập được trọn bề ngang, ngón tay bấm dễ hơn. */
	.ttnd-chi-form .ttnd-bang-boc { overflow: visible; border: 0; background: none; }
	.ttnd-bang--sua,
	.ttnd-bang--sua tbody,
	.ttnd-bang--sua tr,
	.ttnd-bang--sua td { display: block; width: auto; }
	.ttnd-bang--sua thead { display: none; }
	.ttnd-bang--sua tbody tr { border: 1px solid var(--vien); border-radius: var(--bo);
		background: var(--nen); padding: 12px 14px; margin-bottom: 12px; }
	.ttnd-bang--sua td { padding: 6px 0; border: 0; }
	.ttnd-bang--sua td::before { content: attr(data-nhan); display: block; margin-bottom: 4px;
		font-size: 12.5px; font-weight: 600; color: var(--muc-600); }
	/* 16px để Safari trên iPhone không tự phóng trang khi chạm vào ô nhập.
	   Phải bám thêm .ttnd-chi-form cho đủ nặng: quy tắc .ttnd-bang--sua input
	   ở phần dưới file có cùng mức chọn lọc nên nó thắng theo thứ tự, và ô
	   nhập rơi về 14px — đúng cỡ khiến iPhone phóng trang. */
	.ttnd-chi-form .ttnd-bang--sua input[type="text"],
	.ttnd-chi-form .ttnd-bang--sua input[type="date"],
	.ttnd-chi-form .ttnd-bang--sua select { font-size: 16px; min-height: 46px; min-width: 0; }
	.ttnd-chi-form .ttnd-bang--sua .ttnd-chi-so { text-align: right; }
	/* Ô xoá: nhãn và ô tích nằm cùng dòng, tách bằng đường kẻ cho khỏi bấm nhầm. */
	.ttnd-bang--sua td.ttnd-chi-xoa { display: flex; align-items: center; gap: 10px;
		margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--vien); }
	.ttnd-bang--sua td.ttnd-chi-xoa::before { margin: 0; }
	.ttnd-bang--sua td.ttnd-chi-xoa input { width: 26px; height: 26px; }

	.ttnd-chi-luu { flex-direction: column; align-items: stretch; }
	.ttnd-chi-luu .ttnd-nut { width: 100%; text-align: center; }
	.ttnd-chi-tam { text-align: center; }
}

/* --------------------------------- ô thêm khoản chi + danh sách khoản chi */

/* Một hàng bốn ô trên máy tính, xếp dọc trên điện thoại. Không dùng bảng: chỉ
   có ba trường, mà bảng thì kéo theo cuộn ngang và một hàng tiêu đề thừa. */
.ttnd-chi-them { display: grid; gap: 12px; margin: 0 0 18px; padding: 16px;
	border: 1px solid var(--vien); border-radius: var(--bo); background: var(--kem-50); }
.ttnd-chi-o { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.ttnd-chi-o label { font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--muc-600); }
/* 16px là cỡ tối thiểu để Safari trên iPhone không tự phóng trang khi chạm ô. */
.ttnd-chi-them input, .ttnd-chi-them select { width: 100%; min-height: 46px; padding: 11px 13px;
	font: inherit; font-size: 16px; color: var(--muc); background: var(--nen);
	border: 1px solid var(--vien-dam); border-radius: 9px; }
.ttnd-chi-them input:focus-visible, .ttnd-chi-them select:focus-visible {
	outline: 2px solid var(--cam-600); outline-offset: 1px; border-color: var(--cam-600); }
.ttnd-chi-o--tien input { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.ttnd-chi-o--nut { justify-content: flex-end; }
.ttnd-chi-them .ttnd-nut { width: 100%; min-height: 46px; text-align: center; }

@media (min-width: 760px) {
	/* Ngày · hạng mục · ghi chú · số tiền · nút. Ghi chú được phần co giãn rộng
	   nhất vì đó là ô duy nhất không đoán trước được độ dài. Nút không có nhãn
	   nên hàng cuối căn đáy cho thẳng với bốn ô kia. */
	.ttnd-chi-them { grid-template-columns: 158px 190px minmax(0, 1fr) 150px auto; align-items: end; }
	.ttnd-chi-them .ttnd-nut { width: auto; padding-left: 24px; padding-right: 24px; }
}
/* Màn hình vừa: xếp hai hàng thay vì ép năm ô vào một hàng chật. */
@media (min-width: 560px) and (max-width: 759px) {
	.ttnd-chi-them { grid-template-columns: 1fr 1fr; }
	.ttnd-chi-o--ghi { grid-column: 1 / -1; }
}

.ttnd-chi-ds { list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--vien); border-radius: var(--bo); background: var(--nen); overflow: hidden; }
.ttnd-chi-ds li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ttnd-chi-ds li + li { border-top: 1px solid var(--vien); }
.ttnd-chi-ds__muc { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14.5px; }
.ttnd-chi-ds__muc em { display: block; font-style: normal; font-size: 12.5px;
	font-weight: 400; color: var(--muc-600); margin-top: 2px; }
.ttnd-chi-ds__tien { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.ttnd-chi-ds form { margin: 0; flex: 0 0 auto; }
/* Nút xoá 40px cho vừa ngón tay, chữ × chỉ là hình — tên thật nằm ở .ttnd-an
   cho trình đọc màn hình. */
.ttnd-chi-ds__xoa { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	font-size: 22px; line-height: 1; color: var(--do-700); background: none;
	border: 1px solid var(--vien); border-radius: 9px; cursor: pointer; }
.ttnd-chi-ds__xoa:hover { background: var(--do-100); border-color: var(--do-700); }
.ttnd-chi-ds__xoa:focus-visible { outline: 2px solid var(--do-700); outline-offset: 1px; }
/* Nút Sửa là chữ, nút Xoá là dấu × — hai hình dạng khác nhau để không bấm nhầm
   cái nọ ra cái kia khi ngón tay che mất chữ. Cao 40px cho vừa ngón. */
.ttnd-chi-ds__sua-nut { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	min-height: 40px; padding: 0 14px; font-size: 13.5px; font-weight: 600; text-decoration: none;
	color: var(--muc-900); background: var(--nen); border: 1px solid var(--vien-dam); border-radius: 9px; }
.ttnd-chi-ds__sua-nut:hover { background: var(--kem-100); border-color: var(--muc-600); color: var(--muc-900); }
.ttnd-chi-ds__sua-nut:focus-visible { outline: 2px solid var(--cam-600); outline-offset: 1px; }

/* Dòng đang sửa: bỏ đệm của <li> vì biểu mẫu bên trong đã có đệm riêng, và
   nhuộm nền khác để thấy ngay mình đang sửa dòng nào. */
.ttnd-chi-ds__sua { display: block; padding: 0; background: var(--cam-100); }
.ttnd-chi-them--sua { margin: 0; border: 0; border-radius: 0; background: none; }
.ttnd-chi-huy { display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px;
	font-size: 14px; font-weight: 600; color: var(--muc-600); text-decoration: underline; }
.ttnd-chi-huy:hover { color: var(--muc-900); }
.ttnd-chi-o--nut { flex-direction: row; align-items: center; gap: 4px; }

.ttnd-chi-ds__cong { background: var(--kem-100); font-weight: 800; }
/* Chữ chỉ dành cho trình đọc màn hình: không ẩn bằng display:none vì như thế
   trình đọc cũng bỏ qua luôn. */
.ttnd-an { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------ ghi khoản chi ngay trên trang */

.ttnd-chi-bao { font-size: 14px; margin: 0 0 14px; padding: 11px 15px; border-radius: var(--bo);
	border: 1px solid var(--vien); }
.ttnd-chi-bao--tot { background: var(--luc-100); border-color: var(--luc-600); color: var(--luc-800); }
.ttnd-chi-bao--loi { background: var(--do-100); border-color: var(--do-700); color: var(--do-900); }

/* Ô nhập nằm trong bảng đã có đệm 11px, nên viền ô phải mảnh và sát — ô nhập
   cao như trên biểu mẫu thường sẽ đội dòng lên gần gấp đôi và bảng mười cột
   thành một bức tường. Vẫn giữ đủ 40px chiều cao cho ngón tay bấm. */
.ttnd-bang--sua td { padding: 6px 8px; vertical-align: middle; }
.ttnd-bang--sua input[type="text"],
.ttnd-bang--sua input[type="date"],
.ttnd-bang--sua select { width: 100%; min-height: 40px; padding: 7px 9px; font: inherit; font-size: 14px;
	color: var(--muc); background: var(--nen); border: 1px solid var(--vien); border-radius: 7px; }
.ttnd-bang--sua input:focus-visible,
.ttnd-bang--sua select:focus-visible { outline: 2px solid var(--cam-600); outline-offset: 1px; border-color: var(--cam-600); }
.ttnd-bang--sua .ttnd-chi-rong { min-width: 240px; }
.ttnd-bang--sua .ttnd-chi-so { min-width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.ttnd-bang--sua select { min-width: 190px; }
.ttnd-bang--sua input[type="date"] { min-width: 150px; }
/* Ô tích nhỏ hơn 24px là dưới ngưỡng bấm của WCAG 2.5.8 — phóng ô lên thay vì
   trông cậy vào việc người dùng bấm trúng. */
.ttnd-chi-xoa { text-align: center; }
.ttnd-chi-xoa input { width: 22px; height: 22px; accent-color: var(--do-700); cursor: pointer; }

.ttnd-chi-luu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.ttnd-chi-luu span { font-size: 13px; color: var(--muc-mo); max-width: 52ch; }
.ttnd-chi-luu em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muc); }

/* Tổng cộng tạm, cập nhật lúc gõ — đứng cạnh nút Lưu để mắt không phải rời
   khỏi chỗ đang thao tác mới biết mình sắp lưu cái gì. */
.ttnd-chi-tam { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--luc-800);
	background: var(--luc-100); border-radius: 999px; padding: 7px 14px; font-variant-numeric: tabular-nums; }
/* Dòng đã tích xoá: mờ đi chứ không ẩn — ẩn thì bấm nhầm là mất dấu, còn mờ
   thì bỏ tích là quay lại ngay. */
.ttnd-chi-bo { opacity: .42; }
.ttnd-chi-bo input:not([type="checkbox"]), .ttnd-chi-bo select { text-decoration: line-through; }
.ttnd-bang--sua input.ttnd-chi-sai { border-color: var(--do-700); background: var(--do-100); color: var(--do-900); }

/* ------------------------------------------------------ lấp đầy từng khu */

.ttnd-bc-h2 { font-size: clamp(17px, 2.6vw, 20px); margin: clamp(30px, 5vw, 44px) 0 16px; display: flex; align-items: baseline; gap: 10px; letter-spacing: -.015em; }
.ttnd-bc-h2 span { font-size: 13px; font-weight: 500; color: var(--muc-nhan); }

.ttnd-bc-bat { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ttnd-bc-bat li { display: grid; gap: 8px; }
.ttnd-bc-bat__dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ttnd-bc-bat__dau b { font-size: 15px; }
.ttnd-bc-bat__dau span { font-size: 12.5px; color: var(--muc-nhan); font-variant-numeric: tabular-nums; }
.ttnd-bc-bat__thanh { height: 10px; background: var(--kem-100); border: 1px solid var(--vien); border-radius: 999px; overflow: hidden; }
.ttnd-bc-bat__thanh span { display: block; height: 100%; background: var(--luc-600); }
.ttnd-bc-bat__so { display: flex; align-items: baseline; gap: 10px; }
.ttnd-bc-bat__so em { font-style: normal; font-size: 15px; font-weight: 800; color: var(--luc-800); font-variant-numeric: tabular-nums; }
.ttnd-bc-bat__so i { font-style: normal; font-size: 12.5px; color: var(--muc-nhan); font-variant-numeric: tabular-nums; }

.ttnd-bc-cuoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.ttnd-bc-canh-bao { font-size: 13.5px; color: var(--vang-800); }
.ttnd-bc-canh-bao a { color: var(--cam-chu); font-weight: 600; }

/* Bảng cuộn TRONG hộp của nó, không đẩy cả trang trôi ngang. */
.ttnd-bang-boc { overflow-x: auto; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--nen); -webkit-overflow-scrolling: touch; }
.ttnd-bang { width: 100%; border-collapse: collapse; font-size: 14px; }
.ttnd-bang th, .ttnd-bang td { padding: 11px 14px; text-align: left; white-space: nowrap; }
.ttnd-bang thead th { background: var(--dem-800); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ttnd-bang tbody tr { border-top: 1px solid var(--vien); }
.ttnd-bang tbody th { font-weight: 700; }
.ttnd-bang tbody th code { font-size: 13.5px; }
/* Số điện thoại trong bảng là liên kết bấm gọi — chữ trần chỉ cao 16px,
   dưới mức tối thiểu 24px của WCAG 2.5.8. Thêm đệm dọc thay vì phóng chữ. */
.ttnd-bang td a { display: inline-block; padding: 5px 0; color: var(--muc); text-decoration: none; }
.ttnd-bang td a:hover { color: var(--chinh); }
.ttnd-bang tfoot th, .ttnd-bang tfoot td { border-top: 2px solid var(--muc-900); font-weight: 700; background: var(--nen-2); }
.ttnd-bang__gian { white-space: normal; min-width: 150px; font-variant-numeric: tabular-nums; }
.ttnd-bang__huy { color: var(--muc-nhan); }
.ttnd-bang__huy code { text-decoration: line-through; }

@media (min-width: 620px) {
	.ttnd-bc-tien { grid-template-columns: repeat(3, 1fr); }
	.ttnd-bc-lai { grid-template-columns: repeat(2, 1fr); }
	.ttnd-bc-bat li { grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 6px 18px; }
	.ttnd-bc-bat__dau { grid-column: 1; }
	.ttnd-bc-bat__thanh { grid-column: 1; }
	.ttnd-bc-bat__so { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
}
@media (min-width: 900px) {
	.ttnd-bc-dau__luoi { grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; }
}

/* ======================================================================
   KHỐI ĐƠN VỊ TỔ CHỨC

   Hai công ty cùng đứng tên nên phải là MỘT khối hai ngăn, không phải hai
   ảnh dán cạnh nhau. Mỗi ngăn cao bằng nhau, logo co trong hộp của nó bằng
   object-fit nên ảnh nào thừa viền trắng cũng không kéo ảnh kia lệch theo.

   Chất công nghệ đến từ đúng một chi tiết: bốn dấu ngoặc góc bằng nét vàng
   1px, như khung ngắm của máy đo. Không bóng, không chuyển sắc.
   ====================================================================== */

.ttnd-don-vi {
	position: relative;
	display: grid; gap: 1px;
	padding: 22px;
	border: 1px solid var(--vien-toi);
	border-radius: var(--bo);
}
.ttnd-don-vi--doi { gap: 0; }

/* ĐỦ BỐN góc, không phải hai. Hai góc chéo nhau làm khung nghiêng hẳn về
   một phía — mắt đọc ra ngay là thiếu, dù không chỉ được thiếu chỗ nào.
   Hai pseudo trên .ttnd-don-vi__goc lo hai góc, hai pseudo trên chính khung
   lo hai góc còn lại; vẫn không thêm thẻ rỗng nào vào cây trợ năng. */
.ttnd-don-vi__goc { position: absolute; inset: -1px; pointer-events: none; }
.ttnd-don-vi__goc::before,
.ttnd-don-vi__goc::after,
.ttnd-don-vi::before,
.ttnd-don-vi::after {
	content: ""; position: absolute; width: 14px; height: 14px;
	border: 0 solid var(--trang); pointer-events: none;
}
.ttnd-don-vi__goc::before { top: -1px;    left: -1px;  border-top-width: 2px;    border-left-width: 2px; }
.ttnd-don-vi__goc::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.ttnd-don-vi::before      { top: -1px;    right: -1px; border-top-width: 2px;    border-right-width: 2px; }
.ttnd-don-vi::after       { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px; }

.ttnd-don-vi__o { padding: 4px 0; min-width: 0; }
.ttnd-don-vi--doi .ttnd-don-vi__o + .ttnd-don-vi__o {
	margin-top: 20px; padding-top: 22px; border-top: 1px solid var(--vien-toi);
}
/* Nhãn chừa sẵn chỗ cho HAI dòng. "Đơn vị thực hiện" dài hơn "Đơn vị tổ
   chức" nên ở cột hẹp nó xuống hai dòng, đẩy logo bên phải tụt xuống một
   dòng so với logo bên trái — hai logo lệch nhau mà nguyên nhân lại nằm ở
   cái nhãn phía trên. Chừa sẵn chiều cao thì nhãn dài hay ngắn, logo vẫn
   đứng cùng một mức. Giãn cách chữ giảm một chút để phần lớn khổ màn nhãn
   vẫn nằm gọn một dòng. */
.ttnd-don-vi__nhan {
	display: block;
	font-size: 12px; font-weight: 700; line-height: 1.3;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--muc-400); margin-bottom: 12px;
}

/* Hộp cao cố định — chính chỗ này làm hai logo đều nhau. */
.ttnd-don-vi__anh { height: 58px; }
.ttnd-don-vi__anh a { display: block; height: 100%; }
.ttnd-don-vi__anh img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; }

.ttnd-don-vi--sang { border-color: var(--vien); }
.ttnd-don-vi--sang .ttnd-don-vi__goc::before,
.ttnd-don-vi--sang .ttnd-don-vi__goc::after { border-color: var(--cam-chu); }
.ttnd-don-vi--sang .ttnd-don-vi__nhan { color: var(--muc-nhan); }
.ttnd-don-vi--sang .ttnd-don-vi__o + .ttnd-don-vi__o { border-top-color: var(--vien); }

/* Từ tablet trở lên hai ngăn nằm ngang, ngăn nhau bằng một vạch dọc. */
@media (min-width: 620px) {
	.ttnd-don-vi--doi { grid-template-columns: 1fr 1fr; }
	.ttnd-don-vi--doi { align-items: stretch; }
	/* Chừa chỗ hai dòng CHỈ khi hai ngăn nằm cạnh nhau — lúc đó nhãn dài mới
	   xuống dòng và mới đẩy logo lệch. Xếp chồng thì mỗi ngăn rộng cả khối,
	   nhãn không bao giờ vắt dòng, chừa thêm chỉ tạo một khoảng trống thừa
	   giữa nhãn và logo. */
	.ttnd-don-vi--doi .ttnd-don-vi__nhan { min-height: 2.6em; }
	.ttnd-don-vi--doi .ttnd-don-vi__o + .ttnd-don-vi__o {
		margin-top: 0; padding-top: 4px; padding-left: 26px;
		border-top: 0; border-left: 1px solid var(--vien-toi);
	}
	.ttnd-don-vi--sang.ttnd-don-vi--doi .ttnd-don-vi__o + .ttnd-don-vi__o { border-left-color: var(--vien); }
}

/* Logo dựng bằng mã, dùng khi chưa có tệp ảnh chính thức. Vẽ tại chỗ chứ
   không nhúng qua <img>: SVG nằm trong thẻ <img> không tải được phông chữ
   của trang, phần chữ sẽ rơi về phông hệ thống và lệch hẳn khỏi bản gốc.

   TỈ LỆ ĐO TỪ CHÍNH TỆP netholding-nen-toi.png, không ước lượng bằng mắt:

     cụm ba cánh   cao 470/470  = 100% chiều cao logo
     khối chữ      cao 234/470  = 49,8%, mép trên ở 210/470 = 44,7%
     chữ đè lên cánh 71/470     = 15,1%

   Bản dựng trước để chữ cao gần 41px trong hộp 58px, tức 70% — to gấp rưỡi
   netholding, nên hai logo đứng cạnh nhau lệch hẳn. Hộp cao 58px là cố định
   ở mọi khổ màn nên quy ra px thẳng, không cần tính theo phần trăm.
   ====================================================================== */

.ttnd-hieu-ve { display: inline-flex; align-items: stretch; height: 100%; }
/* Chữ TUỘT VÀO trong hõm dưới cánh xanh dương, không đứng sau cả cụm ba
   cánh. Đo trên tệp netholding: ở dải chữ, cánh màu kết thúc rồi chữ bắt
   đầu ở 52,1% chiều cao logo tính từ mép trái — tức chữ nằm đè lên nửa phải
   của cụm cánh. Để chữ đứng sau trọn cụm thì hở ra một khoảng trống 20px
   ngay giữa logo, đúng chỗ bản gốc không có gì. 58 − 30 = −28px. */
.ttnd-hieu-ve__dau { width: auto; height: 100%; flex: none; margin-right: -28px; }

/* 26px = 44,7% của 58px: đẩy khối chữ xuống nửa dưới đúng như bản gốc. */
.ttnd-hieu-ve__chu { padding-top: 26px; }
.ttnd-hieu-ve__chu b {
	display: block; font-size: 20px; font-weight: 700; line-height: .95;
	letter-spacing: -.045em; color: #fff;
}
.ttnd-hieu-ve__chu b i { font-style: normal; font-weight: 300; letter-spacing: -.03em; }
.ttnd-hieu-ve__chu em {
	display: block; font-style: normal; font-size: 7px; font-weight: 400;
	line-height: 1; letter-spacing: .02em; color: #fff;
	margin-top: 2px; white-space: nowrap;
}
.ttnd-don-vi--sang .ttnd-hieu-ve__chu b,
.ttnd-don-vi--sang .ttnd-hieu-ve__chu em { color: var(--muc); }

/* ======================================================================
   CỘNG TÁC VIÊN — ô "mã giới thiệu" trong biểu mẫu và trang /cong-tac-vien/
   ====================================================================== */

.ttnd-tuy-chon { font-weight: 400; color: var(--muc-mo); }

/* Biểu mẫu đăng nhập gốc của WordPress, khoác lớp áo của site. */
.ttnd-ctv-dang-nhap form p { margin: 0 0 14px; display: flex; flex-direction: column; gap: 5px; }
.ttnd-ctv-dang-nhap label { font-size: 13.5px; font-weight: 600; }
.ttnd-ctv-dang-nhap input[type="text"],
.ttnd-ctv-dang-nhap input[type="password"] {
	width: 100%; font-family: var(--chu); font-size: 16px; line-height: 1.5; padding: 12px 14px;
	background: var(--nen); border: 1.5px solid var(--vien-dam); border-radius: var(--bo-nho); color: var(--muc);
}
.ttnd-ctv-dang-nhap .login-remember label { flex-direction: row; display: flex; align-items: center; gap: 8px; font-weight: 400; }
.ttnd-ctv-dang-nhap input[type="submit"] {
	width: 100%; min-height: 48px; padding: 13px 24px; font-family: var(--chu); font-size: 15px; font-weight: 600;
	background: var(--chinh); color: #fff; border: 0; border-radius: var(--bo-nho); cursor: pointer;
}
.ttnd-ctv-dang-nhap input[type="submit"]:hover { background: var(--chinh-dam); }
.ttnd-ctv-quen { margin: 4px 0 0; font-size: 14px; }
.ttnd-ctv-quen a { display: inline-flex; align-items: center; min-height: 32px; }
.ttnd-ctv-dang-nhap input[type="checkbox"] { width: 24px; height: 24px; margin: 0; accent-color: var(--chinh); }
.ttnd-ctv-dang-nhap .login-remember label { min-height: 32px; cursor: pointer; }
.ttnd-ctv-ghi { font-size: 14px; color: var(--muc-mo); margin: 18px 0 0; }

.ttnd-ctv-dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ttnd-ctv-dau h1 { font-size: clamp(24px, 3.4vw, 34px); margin: 4px 0 0; }
.ttnd-ctv-dau .ttnd-nut { min-height: 44px; }

.ttnd-ctv-ma {
	display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 14px;
	background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 18px 20px; margin-bottom: 16px;
}
.ttnd-ctv-ma__nhan { display: block; font-size: 13px; font-weight: 600; color: var(--muc-mo); margin-bottom: 7px; }
.ttnd-ctv-ma__dong { display: flex; align-items: center; gap: 10px; }
.ttnd-ctv-ma__so { font-size: 26px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--muc); }
.ttnd-ctv-ma__dong input {
	flex: 1; min-width: 0; font-family: var(--chu); font-size: 16px; padding: 11px 12px;
	border: 1.5px solid var(--vien-dam); border-radius: var(--bo-nho); background: var(--nen-2); color: var(--muc);
}
.ttnd-ctv-ma__dong .ttnd-nut { flex: none; }

.ttnd-ctv-so { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.ttnd-ctv-so__o { display: flex; flex-direction: column; gap: 3px; margin: 0; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px 18px; }
.ttnd-ctv-so__nhan { font-size: 13px; font-weight: 600; color: var(--muc-mo); }
.ttnd-ctv-so__o strong { font-size: 22px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--muc); }
.ttnd-ctv-so__phu { font-size: 12.5px; color: var(--muc-mo); }
.ttnd-ctv-so__o--chinh { background: var(--luc-100); border-color: var(--luc-600); }
.ttnd-ctv-so__o--chinh strong { color: var(--tot-dam); }

.ttnd-ctv-luat { background: var(--nen); border: 1px solid var(--vien); border-left: 4px solid var(--trang); border-radius: var(--bo); padding: 16px 20px; margin-bottom: 26px; }
.ttnd-ctv-luat h2 { font-size: 17px; margin: 0 0 8px; }
.ttnd-ctv-luat ul { margin: 0; padding-left: 20px; }
.ttnd-ctv-luat li { font-size: 14.5px; line-height: 1.6; margin: 0 0 4px; }

.ttnd-ctv-h { font-size: 20px; margin: 0 0 12px; }
.ttnd-ctv-cuon { overflow-x: auto; }
.ttnd-ctv-bang { width: 100%; border-collapse: collapse; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); font-size: 14px; }
.ttnd-ctv-bang th { text-align: left; font-size: 13px; color: var(--muc-mo); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--vien); text-transform: none; letter-spacing: 0; }
.ttnd-ctv-bang td { padding: 12px 14px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.ttnd-ctv-bang tr:last-child td { border-bottom: 0; }
.ttnd-ctv-bang td span { display: block; font-size: 12.5px; color: var(--muc-mo); margin-top: 2px; }
.ttnd-ctv-bang--huy td { color: var(--muc-mo); }
.ttnd-ctv-tt { display: inline-block; margin-left: 8px; font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--bo-nho); white-space: nowrap; }
.ttnd-ctv-tt--tam-tinh     { background: var(--vang-200); color: var(--vang-800); }
.ttnd-ctv-tt--du-dieu-kien { background: var(--luc-100); color: var(--luc-800); }
.ttnd-ctv-tt--da-chi       { background: var(--dem-800); color: #fff; }
.ttnd-ctv-tt--huy          { background: var(--kem-100); color: var(--muc-600); }

@media (max-width: 782px) {
	.ttnd-ctv-ma { grid-template-columns: 1fr; padding: 16px; }
	.ttnd-ctv-ma__dong { flex-wrap: wrap; }
	.ttnd-ctv-ma__dong input { flex-basis: 100%; }
	.ttnd-ctv-ma__o--rong .ttnd-nut { width: 100%; }
	.ttnd-ctv-so { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ttnd-ctv-so__o { padding: 14px; }
	.ttnd-ctv-so__o strong { font-size: 18px; }

	/* Bảng thành thẻ: mỗi đơn một khối, nhãn cột đứng trước giá trị. */
	.ttnd-ctv-bang, .ttnd-ctv-bang tbody, .ttnd-ctv-bang tr, .ttnd-ctv-bang td { display: block; width: 100%; }
	.ttnd-ctv-bang { background: none; border: 0; }
	.ttnd-ctv-bang thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ttnd-ctv-bang tr { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 6px 14px; margin-bottom: 10px; }
	.ttnd-ctv-bang td { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--vien); }
	.ttnd-ctv-bang tr td:last-child { border-bottom: 0; }
	.ttnd-ctv-bang td::before { content: attr(data-nhan); font-size: 12.5px; font-weight: 600; color: var(--muc-mo); grid-row: 1 / span 3; }
	/* Mọi giá trị trong ô nằm cột phải — không để dòng phụ và nhãn trạng thái rơi sang cột tiêu đề. */
	.ttnd-ctv-bang td > * { grid-column: 2; }
	.ttnd-ctv-bang td { row-gap: 2px; align-items: start; }
	.ttnd-ctv-tt { margin: 4px 0 0; justify-self: start; }
}

.ttnd-ctv-dat-ho { background: var(--luc-100); border: 1px solid var(--luc-600); border-left: 4px solid var(--luc-600); border-radius: var(--bo-nho); padding: 12px 14px; gap: 4px; }
.ttnd-ctv-dat-ho strong { font-size: 14.5px; color: var(--tot-dam); }
.ttnd-ctv-dat-ho span { font-size: 14px; line-height: 1.55; }

.ttnd-ctv-hai { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.ttnd-ctv-hai__o { display: flex; gap: 12px; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px 18px; }
.ttnd-ctv-hai__so { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dem-800); color: #fff; font-weight: 700; font-size: 14px; }
.ttnd-ctv-hai__o strong { font-size: 15.5px; }
.ttnd-ctv-hai__o p { font-size: 14px; line-height: 1.55; color: var(--muc-mo); margin: 4px 0 10px; }
.ttnd-ctv-hai__o .ttnd-nut { min-height: 44px; }
@media (max-width: 782px) {
	.ttnd-ctv-hai { grid-template-columns: 1fr; }
	.ttnd-ctv-hai__o .ttnd-nut { width: 100%; }
}
.ttnd-coc-them { background: var(--luc-100); }
@media (min-width: 760px) {
	/* Mã gian · số tiền · ghi chú · nút — bốn ô, khác bảng chi năm ô. */
	.ttnd-coc-them { grid-template-columns: 150px 170px minmax(0, 1fr) auto; }
}

/* ----------------------------------------- đổi gian ngay trong danh sách */

/* Nút biểu tượng vuông 40px — đủ cho ngón tay, và vì nó đứng một cột riêng
   nên không còn nằm cạnh dãy số mã gian để bấm nhầm nữa. */
.ttnd-doi-o { text-align: center; width: 1%; }
.ttnd-bang td.ttnd-doi-o a,
.ttnd-doi-gian__mo { display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0; text-decoration: none; color: var(--muc-600);
	background: var(--nen); border: 1px solid var(--vien-dam); border-radius: 9px; }
.ttnd-doi-gian__mo svg { fill: currentColor; display: block; }
.ttnd-doi-gian__mo:hover { background: var(--kem-100); border-color: var(--muc-600); color: var(--muc-900); }
.ttnd-doi-gian__mo:focus-visible { outline: 2px solid var(--cam-600); outline-offset: 1px; }
/* Đang mở thì nút đổi màu để biết dòng nào đang sửa, và bấm lại là đóng. */
.ttnd-bang td.ttnd-doi-o a.ttnd-doi-gian__mo--dang { background: var(--cam-600); border-color: var(--cam-800); color: #fff; }

.ttnd-doi-hang > td { background: var(--cam-100); padding: 0; }

/* Ô đổi gian tách khỏi dòng chữ mã gian bằng nền và khoảng thở, để không ai
   tưởng con số đang gõ là một phần của danh sách gian hiện tại. */
.ttnd-doi-gian { display: block; margin: 0; padding: 12px 14px; white-space: normal;
	background: var(--cam-100); border: 0; }
.ttnd-doi-gian label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--muc-600); margin-bottom: 5px; }
.ttnd-doi-gian input { width: 100%; max-width: 420px; min-height: 44px; padding: 9px 11px;
	font: inherit; font-size: 16px; color: var(--muc); background: var(--nen);
	border: 1px solid var(--vien-dam); border-radius: 8px; }
.ttnd-doi-gian input:focus-visible { outline: 2px solid var(--cam-600); outline-offset: 1px; }
.ttnd-doi-gian__nut { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.ttnd-doi-gian__nut .ttnd-nut { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; }
.ttnd-doi-gian__nut a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px;
	font-size: 14px; font-weight: 600; color: var(--muc-600); text-decoration: underline; }

/* Trên điện thoại bảng đơn là thẻ, nên dòng biểu mẫu đổi gian cũng phải xuống
   dạng khối chứ không còn là một hàng bảng. */
@media (max-width: 699px) {
	.ttnd-bang--don tbody tr.ttnd-doi-hang { padding: 0; border-color: var(--cam-600); }
	.ttnd-bang--don tbody tr.ttnd-doi-hang > td { display: block; padding: 0; }
	.ttnd-bang--don tbody tr.ttnd-doi-hang > td::before { content: none; }
	.ttnd-bang--don tbody td.ttnd-doi-o { justify-content: space-between; }
}

/* Trên điện thoại hai chỗ bấm này còn dưới 44px — ngưỡng ngón cái. Số điện
   thoại là liên kết gọi, bấm hụt là gọi nhầm hoặc không gọi được; nút đổi gian
   là thao tác động tới tiền, càng phải chắc tay. */
@media (max-width: 699px) {
	.ttnd-bang--don tbody td a[href^="tel:"] { min-height: 44px; display: inline-flex;
		align-items: center; padding: 0 2px; }
	.ttnd-bang--don tbody td.ttnd-doi-o a.ttnd-doi-gian__mo { width: 46px; height: 46px; }
}

/* ------------------------------- ngưỡng chạm trên điện thoại ------------ */

/* Chân trang và logo đầu trang: các liên kết ở đây cao 28–41px, qua được mức
   tối thiểu 24px của WCAG 2.5.8 nhưng dưới 44px mà ngón cái cần. Trong số đó
   có số hotline và email — đúng những thứ người ta bấm khi đang đứng ở hội chợ
   và cần gọi ngay. Nới bằng đệm dọc chứ không phóng chữ: phóng chữ thì chân
   trang vỡ bố cục, còn đệm chỉ làm vùng bấm rộng ra. */
@media (max-width: 782px) {
	.ttnd-chan__ds a,
	.ttnd-chan__menu a,
	.ttnd-chan-lich a,
	.ttnd-chan__phu a,
	.ttnd-hieu {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	/* Mục menu chân trang xếp dọc nên cho chiếm trọn bề ngang — vùng bấm rộng
	   hết dòng thì không phải nhắm vào đúng mấy chữ. */
	.ttnd-chan__menu li { display: block; }
	.ttnd-chan__menu a { width: 100%; }
}

/* MỌI ô nhập của biểu mẫu trên điện thoại cao tối thiểu 46px.
   Đo thấy vài ô còn 40px — ô gõ tay mã gian ở trang đặt gian, ô mã đơn và số
   điện thoại ở trang tra cứu. Thiếu 4px nghe nhỏ, nhưng đó đúng là khoảng
   cách giữa "bấm phát trúng" và "bấm hai lần mới vào ô". Đặt một luật chung
   thay vì vá từng ô: ô nhập mới thêm về sau cũng tự đạt ngưỡng. */
@media (max-width: 782px) {
	.ttnd-form input,
	.ttnd-form select,
	.ttnd-form textarea,
	.ttnd-o input,
	.ttnd-o select,
	.ttnd-ma-nhap input,
	.post-password-form input[type="password"] { min-height: 46px; }
	/* Ô tích "ghi nhớ đăng nhập" của WordPress rộng 24px — vừa đúng mức tối
	   thiểu, nhưng bấm bằng ngón cái thì vẫn hụt. Cho cả nhãn thành vùng bấm. */
	.login-remember label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
	.login-remember input[type="checkbox"] { width: 24px; height: 24px; }

	/* Hai liên kết trong trang cộng tác viên còn 32px và 18px — riêng cái 18px
	   là DƯỚI mức tối thiểu 24px của WCAG 2.5.8, mà đó lại là số hotline. */
	.ttnd-ctv-quen a,
	.ttnd-ctv-ghi a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Thiết bị CHẠM, bất kể bề ngang.
   Máy tính bảng ở 768px vẫn dùng bố cục bảng, nhưng ngón tay thì không nhỏ đi
   theo màn hình: đo ở đó thấy nút in giấy tờ 31px, nút đổi gian 40px. Nên
   ngưỡng chạm bám vào LOẠI CON TRỎ chứ không vào bề ngang — chuột vẫn được
   giao diện gọn, còn ngón tay ở mọi cỡ máy đều có đủ 44px.
   Kèm luôn nhánh theo bề ngang cho trình duyệt cũ không hiểu pointer. */
@media (pointer: coarse), (max-width: 899px) {
	.ttnd-bang td.ttnd-giay-to a,
	.ttnd-giay-to__nut { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
	.ttnd-bang td.ttnd-doi-o a.ttnd-doi-gian__mo { width: 46px; height: 46px; }
	.ttnd-bang--don tbody td a[href^="tel:"],
	.ttnd-bang td a { min-height: 44px; display: inline-flex; align-items: center; }
	.ttnd-chi-ds__xoa,
	.ttnd-chi-ds__sua-nut { min-height: 44px; }
	.ttnd-chi-ds__xoa { width: 44px; }
}

/* --------------------------------------------- tải cả tập giấy tờ ------ */

/* Khối này nằm ngay trên danh sách đơn ở trang nội bộ. Kẻ viền đứt để mắt
   tách nó khỏi bảng dữ liệu bên dưới: đây là hành động, không phải số liệu. */
.ttnd-tai-ve {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 12px 18px;
	margin: 0 0 18px; padding: 14px 16px;
	border: 1px dashed var(--vien-dam); border-radius: var(--bo);
	background: var(--nen-3);
}
.ttnd-tai-ve__chu b { display: block; font-size: 15px; color: var(--muc); }
.ttnd-tai-ve__chu span { display: block; font-size: 13px; color: var(--muc-mo); margin-top: 2px; }
.ttnd-tai-ve__nut { display: flex; flex-wrap: wrap; gap: 8px; }
.ttnd-tai-ve__nut .ttnd-nut { font-size: 14px; padding: 9px 14px; min-height: 44px; }

@media (max-width: 782px) {
	/* Trên điện thoại ba nút xếp dọc, mỗi nút trọn bề ngang — bấm bằng ngón
	   cái không trượt sang nút bên cạnh. */
	.ttnd-tai-ve { flex-direction: column; align-items: stretch; }
	.ttnd-tai-ve__nut { flex-direction: column; }
	.ttnd-tai-ve__nut .ttnd-nut { justify-content: center; }
}

/* Bộ PDF rời — khối thứ hai trong mục tải về, nhấn hơn khối HTML vì đây là
   thứ mang đi hàng photo. Nền vàng nhạt để tách khỏi khối trên. */
.ttnd-tai-ve--pdf { background: var(--vang-200); border-style: solid; border-color: var(--vang-800); }
.ttnd-tai-ve--pdf .ttnd-tai-ve__chu span { color: var(--vang-900); }

/* Bản kết xuất — viền đỏ vì bên trong là ruột site, không phải giấy tờ in. */
.ttnd-tai-ve--xuat { background: var(--do-100); border-style: solid; border-color: var(--do-700); }
.ttnd-tai-ve--xuat .ttnd-tai-ve__chu span { color: var(--do-900); }
.ttnd-tai-ve--xuat code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

/* ===================================================== Festival Phủ Lý === */

/* Trang Phủ Lý mượn nguyên bộ lớp của trang Nam Định (.ttnd-dat-gian,
   .ttnd-dg-banner, .ttnd-buoc-o…) nên ở đây chỉ còn hai thứ riêng: dải mốc
   ngày và bảng kê khu. */


/* Thẻ sơ đồ: cùng dáng thẻ bước của Nam Định (.ttnd-buoc-o) nhưng KHÔNG mang
   tên lớp ấy — mang tên ấy là JS nhận nhầm thành một bước của trình ba bước
   rồi thu gọn lại. Không đặt max-width: để thẻ chạy hết cột như Nam Định. */
.ttnd-pl-so-do { background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); }
.ttnd-pl-so-do .ttnd-the-tab,
.ttnd-pl-so-do .ttnd-pane { padding-left: 20px; padding-right: 20px; }
.ttnd-pl-so-do .ttnd-pane { padding-bottom: 20px; }
@media (max-width: 782px) {
	.ttnd-pl-so-do .ttnd-the-tab,
	.ttnd-pl-so-do .ttnd-pane { padding-left: 14px; padding-right: 14px; }
}

/* ---- mặt bằng có kích thước riêng (ngoài Nam Định) ----

   Khung tự co theo bề ngang thật của khu đất (xem ttnd_ve_so_do), nên mọi sơ
   đồ trong tour vẽ chung MỘT tỉ lệ px/mét và ô gian bằng nhau. Nhờ vậy ở đây
   không phải chỉnh cỡ chữ gì cả — cỡ chữ của Nam Định vừa khít.

   Chỉ còn một việc: canh giữa, vì khung hẹp hơn cột chứa nó. */
.ttnd-quang-truong--tuy { margin-left: auto; margin-right: auto; }

/* Nhãn KHÔNG ngắt dòng. Khu đất Phủ Lý hẹp nên quy ra pixel thì hộp nhãn chỉ
   còn vài chục px — đủ chỗ cho chữ nhưng không đủ cho hộp, nhãn tự xuống hai
   ba dòng và chồng lên ô gian. Cho tràn ngang ra chỗ trống bên cạnh: nhãn khu
   không có nền nên tràn cũng không che gì. */
.ttnd-quang-truong--tuy .ttnd-moc--nhan-khu,
.ttnd-quang-truong--tuy .ttnd-moc--san-khau,
.ttnd-quang-truong--tuy .ttnd-moc--dai-bieu,
.ttnd-quang-truong--tuy .ttnd-moc--cong { white-space: nowrap; }
.ttnd-quang-truong--tuy .ttnd-moc--nhan-khu { overflow: visible; }

/* ---- mặt bằng có kích thước riêng ----

   Bề ngang khung lấy theo ĐÚNG bề ngang thật của khu đất, tính bằng phần trăm
   so với khung Nam Định, nên mọi sơ đồ trong tour vẽ chung một tỉ lệ px/mét và
   ô gian bằng nhau ở mọi cỡ màn hình. Bố cục xung quanh thì để nguyên như
   Nam Định — sơ đồ canh giữa cột, chú thích nằm dưới. */
.ttnd-quang-truong--tuy {
	width: calc(100% * var(--k, 100%) / 100%);
	max-width: var(--rong-max, 620px);
	margin-left: auto; margin-right: auto;
}



/* Nhãn cổng trên mặt bằng hẹp: bỏ bớt giãn chữ, không thì 8 ký tự cũng tràn
   khỏi ô cổng vài chục pixel. */
.ttnd-quang-truong--tuy .ttnd-moc--cong { letter-spacing: .06em; }

/* ------------------------------------------- sơ đồ Phủ Lý: chữ to hơn ----
   Nam Định có 200 ô nên số gian chỉ 8–9px. Phủ Lý 66 ô, ô trên điện thoại
   rộng ~31–39px — đủ chỗ cho số 12px, đọc được mà không phải phóng. Phần lớn
   khách đặt gian bằng điện thoại. Chỉ áp cho khuôn trang Phủ Lý. */
.page-template-page-festival-phu-ly .ttnd-gian,
.ttnd-trang-so-do-nho .ttnd-gian { font-size: 11px; }
.ttnd-trang-so-do-nho .ttnd-moc  { font-size: 9.5px; }
@media (max-width: 600px) { .ttnd-trang-so-do-nho .ttnd-gian { font-size: 12px; } }
/* Hải Hậu: 11 ô một hàng — trên điện thoại ô ~23px. Chữ co theo màn hình để
   máy hẹp (320px) vẫn không đè sang ô bên cạnh; hạng mục ký hiệu chữ nhỏ. */
.ttnd-trang-so-do-nho.ttnd-trang-hai-hau .ttnd-moc  { font-size: min(9px, calc((100vw - 36px) * .024)); }
.page-template-page-festival-phu-ly .ttnd-moc  { font-size: 9.5px; }
@media (max-width: 600px) {
	.page-template-page-festival-phu-ly .ttnd-gian { font-size: 12px; }
	.page-template-page-festival-phu-ly .ttnd-moc,
	.page-template-page-festival-phu-ly .ttnd-moc--nhan-khu { font-size: 9.5px; }
}
/* Lối ngang trong cụm đôi Phủ Lý chỉ cao 1,5–2 m: chữ phải nằm một dòng. */
.page-template-page-festival-phu-ly .ttnd-moc--loi-giua { white-space: nowrap; font-size: 8.5px; line-height: 1; overflow: visible; }