/* ═══════════════════════════════════════════════════════════════════════════
AMATAY · ama.css — Hệ thiết kế (Amatay-Spec § 2)
Bảng màu trích trực tiếp từ LOGO. CSS thuần, không Bootstrap/Tailwind.
Mobile-first · Sáng/Tối · @media print
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. BIẾN: MÀU LẤY TỪ LOGO ─────────────────────────────────────────────── */
:root{
/* XANH ĐẬM — chữ "AI MARKETING", thân chữ A/i */
--ama-navy-900:#001233; --ama-navy-800:#001848; --ama-navy-700:#00246C; --ama-navy-600:#002E86;
/* Nền của các mảng TỐI đặt chữ trắng lên trên (thanh bên quản trị, hộp
thông báo, dải giới thiệu). Phải là màu tối ở CẢ hai chế độ sáng và tối —
tách riêng khỏi --ama-navy-800 vì ở chế độ tối biến đó lật thành xanh
nhạt để làm màu CHỮ, kéo theo thanh bên sáng trắng mà chữ vẫn trắng. */
--ama-nen-dam:#001848;
/* XANH DƯƠNG — vòng swoosh, khối pixel, gradient chữ A */
--ama-blue-700:#0038A8; --ama-blue-600:#0048C0; --ama-blue-500:#0054CC;
--ama-blue-400:#0060D8; --ama-blue-300:#0078E4;
--ama-blue-100:#DCE9FB; --ama-blue-050:#F0F5FE;
/* CAM — chữ "ASSISTANT", vòng swoosh cam, ô vuông chữ i */
--ama-orange-600:#B4490A; --ama-orange-500:#F26A1B; --ama-orange-400:#FF8A2B;
--ama-orange-100:#FFE8D6; --ama-orange-050:#FFF6EF;
/* TRUNG TÍNH */
--ama-white:#FFFFFF; --ama-paper:#FEFEFE;
--ama-gray-050:#F6F8FB; --ama-gray-100:#EDF1F6; --ama-gray-200:#DDE3EC;
/* Xám nhạt cũ #98A4B8 chỉ đạt 2,5:1 trên nền trắng — dùng làm chữ phụ ở
dòng thời gian phiếu, ngày giờ, ghi chú thì người trên 50 tuổi đọc không
ra. Hạ xuống #647491 (4,7:1) mà vẫn nhạt hơn hẳn chữ chính. */
/* gray-600 là màu chữ phụ. Trên nền trắng nó thừa sức, nhưng khi dòng đó
nằm trong ô nhấn màu (phiếu hỏng, việc trễ) thì nền hồng nhạt kéo tỉ lệ
xuống 4,4 — chỉ hụt một chút, và chỉ ở vài dòng, nên rất dễ lọt. */
--ama-gray-400:#647491; --ama-gray-600:#556279; --ama-gray-800:#2A3548;
/* TRẠNG THÁI */
--ama-success:#0F7A4C; --ama-warning:#996E00; --ama-danger:#C62929; --ama-info:#0078E4;
/* ★★★ HAI MÀU DÀNH RIÊNG CHO CHỮ (Lượt 75)
*
* Ba lượt quét bắt được 20 vi phạm trên trang phiếu đăng ký — và cả 20 đều
* MỚI LỘ RA vì lượt trước gộp sáu thẻ thành MỘT FORM: những ô trước đây bị
* giấu trong thẻ khác nên máy đo không nhìn thấy, nay hiện hết một lượt.
* Chúng chưa bao giờ đúng, chỉ là chưa bao giờ bị nhìn.
*
* `--ama-orange-500` #F26A1B làm chữ giá trên nền trắng → 3,06 (cần 4,5)
* `--ama-danger` #C62929 làm chữ "Xoá dòng" trên nền tối → 2,55
*
* ★★ KHÔNG sửa thẳng `--ama-orange-500` và `--ama-danger`: hai màu ấy còn
* đang làm NỀN ở chỗ khác (`.chip--danger.is-on` là chữ trắng trên nền
* đỏ ấy). Làm nhạt màu nền đi để chữ dễ đọc là chữa chỗ này, hỏng chỗ
* kia. Màu làm NỀN và màu làm CHỮ là hai việc khác nhau, nên hai tên.
* ★ Và phải khai ở CẢ BA khối chủ đề, không chỉ khối gốc: một màu chỉ khai
* trong khối nền tối thì người để máy ở chế độ "theo hệ thống" không bao
* giờ nhận được nó. */
--ama-cam-chu:#B4490A; /* cam làm CHỮ trên nền sáng — 5,39 */
--ama-do-chu:#C62929; /* đỏ làm CHỮ trên nền sáng — 5,60 */
/* GRADIENT THƯƠNG HIỆU */
--ama-grad-hero:linear-gradient(135deg,#001848 0%,#0038A8 55%,#0060D8 100%);
--ama-grad-cta:linear-gradient(135deg,#F26A1B 0%,#FF8A2B 100%);
--ama-grad-swoosh:linear-gradient(90deg,#0054CC 0%,#0078E4 45%,#F26A1B 100%);
/* Chữ — Be Vietnam Pro có đủ dấu tiếng Việt chuẩn */
--ama-font-head:'Inter','Be Vietnam Pro','Segoe UI',system-ui,-apple-system,sans-serif;
--ama-font-body:'Inter','Be Vietnam Pro','Segoe UI',system-ui,-apple-system,sans-serif;
--ama-font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
/* Thang khoảng cách 4px */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;
/* Bo góc */
--r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--r-pill:999px;
/* Đổ bóng — 3 mức, không dùng nhiều hơn */
--sh-1:0 1px 2px rgba(0,24,72,.06),0 1px 3px rgba(0,24,72,.08);
--sh-2:0 4px 12px rgba(0,24,72,.08),0 2px 4px rgba(0,24,72,.05);
--sh-3:0 12px 32px rgba(0,24,72,.14),0 4px 8px rgba(0,24,72,.06);
--sh-cta:0 6px 18px rgba(242,106,27,.32);
/* Chuyển động */
--ease:cubic-bezier(.4,0,.2,1); --dur-fast:140ms; --dur:220ms; --dur-slow:360ms;
/* Nền theo vai trò */
--bg:var(--ama-paper); --surface:var(--ama-white); --text:var(--ama-navy-800);
--text-soft:var(--ama-gray-600); --border:var(--ama-gray-200); --alt:var(--ama-blue-050);
color-scheme:light;
}
/* ── 2. CHẾ ĐỘ TỐI ────────────────────────────────────────────────────────── */
:root[data-theme="dark"]{
--ama-paper:#0A1224; --ama-white:#111C33;
--ama-gray-050:#131F38; --ama-gray-100:#1B2A47; --ama-gray-200:#25375A;
--ama-gray-400:#7A8AA6; --ama-gray-600:#AAB7CC; --ama-gray-800:#E4EAF3;
--ama-navy-800:#8FB4FF; --ama-navy-900:#050B18; --ama-nen-dam:#0A162E;
--ama-blue-050:#131F38; --ama-blue-100:#1B2A47;
--ama-orange-050:#2A1A0E; --ama-orange-100:#3A2312;
--bg:#0A1224; --surface:#111C33; --text:#E4EAF3; --text-soft:#AAB7CC;
--border:#25375A; --alt:#131F38; --eyebrow:#6EA8FF;
--sh-1:0 1px 3px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.45);
--ama-cam-chu:#FF8A2B;
--ama-do-chu:#FF8F8F;
--sh-3:0 14px 36px rgba(0,0,0,.55);
color-scheme:dark;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ama-paper:#0A1224; --ama-white:#111C33;
--ama-gray-050:#131F38; --ama-gray-100:#1B2A47; --ama-gray-200:#25375A;
--ama-gray-400:#7A8AA6; --ama-gray-600:#AAB7CC; --ama-gray-800:#E4EAF3;
--ama-navy-800:#8FB4FF; --ama-navy-900:#050B18; --ama-nen-dam:#0A162E;
--ama-blue-050:#131F38; --ama-blue-100:#1B2A47;
--ama-orange-050:#2A1A0E; --ama-orange-100:#3A2312;
--bg:#0A1224; --surface:#111C33; --text:#E4EAF3; --text-soft:#AAB7CC;
--border:#25375A; --alt:#131F38; --eyebrow:#6EA8FF;
--sh-1:0 1px 3px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.45);
/* ★ Nền tối thì phải ĐẢO SÁNG lên, không phải giữ nguyên. */
--ama-cam-chu:#FF8A2B; /* 7,21 trên #111C33 */
--ama-do-chu:#FF8F8F; /* 6,35 trên #1B2A47 */
--sh-3:0 14px 36px rgba(0,0,0,.55);
color-scheme:dark;
}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ── 3. NỀN TẢNG ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);
font:400 17px/1.65 var(--ama-font-body);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--ama-chu-lien-ket);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--ama-blue-400);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--ama-blue-100);color:var(--ama-navy-800)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;
background:var(--ama-nen-dam);color:#fff;border-radius:0 0 var(--r-md) 0}
.skip-link:focus{left:0}
h1,h2,h3,h4{font-family:var(--ama-font-head);line-height:1.22;margin:0 0 var(--sp-3);
color:var(--text);font-weight:700;letter-spacing:-.015em}
h1{font-size:32px;font-weight:800;letter-spacing:-.02em}
h2{font-size:26px}
h3{font-size:20px}
h4{font-size:17px;font-weight:600}
p{margin:0 0 var(--sp-4)}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.3em}
li{margin-bottom:var(--sp-2)}
small{font-size:14px;color:var(--text-soft)}
blockquote{margin:var(--sp-6) 0;padding:var(--sp-4) var(--sp-5);border-left:4px solid var(--ama-orange-500);
background:var(--ama-orange-050);border-radius:0 var(--r-md) var(--r-md) 0;font-style:italic}
code{font-family:var(--ama-font-mono);font-size:.86em;background:var(--ama-blue-050);
padding:2px 7px;border-radius:var(--r-sm);color:var(--ama-chu-lien-ket)}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-8) 0}
@media (min-width:768px){
h1{font-size:44px} h2{font-size:32px} h3{font-size:22px}
}
@media (min-width:1024px){
h1{font-size:56px} h2{font-size:36px} h3{font-size:24px}
body{font-size:17px}
}
/* ── 4. BỐ CỤC ────────────────────────────────────────────────────────────── */
.ama-container{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--sp-5)}
/* ★★★ LƯỢT 77 — KHUNG ĐẦU TRANG RỘNG HƠN KHUNG NỘI DUNG.
*
* Đo được sau khi đưa 8 mục thực đơn ra cùng hàng: đầu trang cần **1.413px**
* mà khung chỉ cho **1.180px** → tràn 233px.
*
* ★ Đầu trang là MỘT HÀNG NGANG; khung 1.180px sinh ra để giữ dòng chữ đọc
* không dài quá mắt theo kịp — một ràng buộc của VĂN BẢN, không phải của
* một hàng nút. Nới riêng đầu trang lên 1.340px là trả lại 160px mà không
* đụng gì tới bề rộng đọc của các khối bên dưới. */
.ama-header .ama-container{max-width:1340px}
/* ★★ Và dưới 1.360px thì khung đầu trang bám sát mép: mỗi bên 20px lề là đủ,
* không cần giữ khoảng trắng của một khung đọc. */
@media (max-width:1359px){ .ama-header .ama-container{padding:0 var(--sp-4)} }
.ama-container--narrow{max-width:820px}
.ama-section{padding:var(--sp-12) 0}
.ama-section--alt{background:var(--alt)}
.ama-section--dark{background:var(--ama-nen-dam);color:#fff}
.ama-section--dark h1,.ama-section--dark h2,.ama-section--dark h3{color:#fff}
.ama-section--warm{background:var(--ama-orange-050)}
@media (min-width:768px){.ama-section{padding:var(--sp-20) 0}}
.ama-grid{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr)}
.ama-grid--2{grid-template-columns:minmax(0,1fr)}
.ama-grid--3{grid-template-columns:minmax(0,1fr)}
/* ★★★ LƯỢT 76 — HAI CỘT TRÊN MÀN 390px LÀ NGUYÊN NHÂN CỦA CẢ HAI VẤN ĐỀ.
*
* Mổ một thẻ Lính trên màn 390px, lưới 2 cột → mỗi thẻ rộng **165px**:
*
* 109px phần đầu (số + tên)
* 59px tên tiếng Anh ← VỠ BỐN DÒNG trong 165px
* 116px dòng tả
* 298px danh sách việc ← mỗi dòng việc vỡ 2–3 dòng
* 86px phần chân
* ────
* 686px một thẻ, và chiều cao danh sách việc chạy từ 196px tới 430px
*
* Nên khối `agents` cao **3.421px** trên điện thoại (một phần năm cả trang
* chủ), và bảy thẻ lệch nhau **186px**. Hai cột không làm nó gọn hơn — nó
* làm mọi dòng chữ vỡ ra, và chữ vỡ thì cao hơn chữ không vỡ.
*
* ★★ Một cột dưới 560px: không dòng nào vỡ, nên mỗi thẻ thấp hơn hẳn VÀ bảy
* thẻ bằng nhau. Gọn hơn bằng cách cho chữ đủ chỗ — không phải bằng cách
* nhồi thêm cột.
* ★ Thẻ "năm việc" thì ngược lại: ruột nó ngắn (một dòng tên + 3 dòng tả),
* nên hai cột vẫn vừa và tiết kiệm được thật. Giữ 2 cột cho nó. */
.ama-grid--4{grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.ama-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ama-grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.ama-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ama-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.ama-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ama-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ama-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* ★★★ LƯỢT 76 — HAI NỬA PHẢI CAO BẰNG NHAU.
*
* Đo được ở khối bản đồ: bản đồ 380px, khung bên phải 579px → **lệch 199px**
* trên máy tính và 236px trên điện thoại. `align-items:center` căn giữa hai
* khối cao khác nhau, nên khối thấp nổi lơ lửng giữa hai vệt trắng.
* ★ `stretch` cho hai nửa kéo bằng nhau; khối nào cần căn giữa ruột thì tự
* lo bên trong nó. */
.ama-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6);
align-items:stretch}
@media (min-width:960px){.ama-split{grid-template-columns:1.1fr .9fr;gap:var(--sp-12)}}
/* ★★★ LƯỢT 76 — THU DIỆN TÍCH PHẦN GIỚI THIỆU KHỐI.
*
* Đo được: riêng phần tiêu đề của khối `agents` cao **203px** trên điện
* thoại — gần một phần tư màn hình chỉ để giới thiệu khối sắp tới. Có 11
* phần tiêu đề như vậy trên trang chủ, nên mỗi 16px cắt ở đây nhân lên 11
* lần.
* ★ `--sp-10` (40px) → `--sp-6` (24px) và câu phụ 17px → 16px. */
.sec-head{text-align:center;max-width:720px;margin:0 auto var(--sp-6)}
.sec-head p{color:var(--text-soft);font-size:16px;margin:0;line-height:1.55}
.sec-head__tai{margin-top:var(--sp-3)!important}
.eyebrow{display:inline-block;font:700 13px/1 var(--ama-font-head);letter-spacing:.18em;
text-transform:uppercase;color:var(--eyebrow,var(--ama-blue-600));margin-bottom:var(--sp-3)}
.ama-section--dark .eyebrow{color:var(--ama-orange-400)}
/* ── 5. THẺ (CARD) ────────────────────────────────────────────────────────── */
.ama-card{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
padding:var(--sp-5);box-shadow:var(--sh-1);transition:box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease)}
.ama-card--hover:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.ama-card h3{margin-bottom:var(--sp-2)}
.ama-card p:last-child{margin-bottom:0}
/* ── 6. NÚT ───────────────────────────────────────────────────────────────── */
.btn-cta,.btn-primary,.btn-ghost,.btn-danger,.btn-white{
display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
min-height:48px;padding:0 var(--sp-6);border:0;border-radius:var(--r-pill);
font:700 16px/1 var(--ama-font-head);letter-spacing:.01em;cursor:pointer;
text-decoration:none!important;white-space:nowrap;max-width:100%;
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
background var(--dur) var(--ease)}
.btn-cta{background:var(--ama-grad-cta);color:#fff;box-shadow:var(--sh-cta)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(242,106,27,.42)}
.btn-cta:active{transform:translateY(0)}
.btn-primary{background:var(--ama-blue-600);color:#fff}
.btn-primary:hover{background:var(--ama-blue-700);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ama-chu-lien-ket);
box-shadow:inset 0 0 0 2px var(--ama-blue-600)}
.btn-ghost:hover{background:var(--ama-blue-050)}
.btn-white{background:#fff;color:var(--ama-navy-800);box-shadow:var(--sh-2)}
.btn-white:hover{transform:translateY(-2px)}
.btn-danger{background:var(--ama-danger);color:#fff}
.btn-cta[disabled],.btn-primary[disabled]{background:var(--ama-gray-200);
color:var(--ama-gray-400);box-shadow:none;cursor:not-allowed;transform:none}
.btn-sm{min-height:38px;padding:0 var(--sp-4);font-size:14px}
.btn-lg{min-height:56px;padding:0 var(--sp-8);font-size:17px}
.btn-block{display:flex;width:100%}
.btn-icon{width:40px;height:40px;flex:none;min-height:44px;padding:0;border-radius:var(--r-md);
background:transparent;color:var(--text-soft);display:inline-grid;place-items:center;
border:0;cursor:pointer;font-size:18px;transition:background var(--dur) var(--ease)}
.btn-icon:hover{background:var(--ama-gray-100);color:var(--text)}
.btn-group{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
@media (max-width:400px){
.btn-cta,.btn-primary,.btn-ghost,.btn-white,.btn-danger{
white-space:normal;padding:10px var(--sp-4);line-height:1.3;text-align:center}
.btn-lg{font-size:15px}
}
/* ── 7. NHÃN & HUY HIỆU ───────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);
font:700 12px/1.5 var(--ama-font-head);letter-spacing:.04em}
.badge--blue{background:var(--ama-blue-100);color:var(--ama-chu-lien-ket)}
.badge--orange{background:var(--ama-orange-100);color:var(--ama-orange-600)}
.badge--green{background:var(--ama-success-100);color:var(--ama-success-700)}
.badge--gray{background:var(--ama-gray-100);color:var(--ama-gray-600)}
.badge--live{background:var(--ama-success-100);color:var(--ama-success-700)}
.badge--soon{background:var(--ama-gray-100);color:var(--ama-gray-400)}
/* ★ Thiếu đúng một biến thể: "cần người để ý". (Lượt 83)
* Màu chữ dùng `--ama-warning` (#996E00) chứ không phải một sắc vàng nhạt —
* vàng nhạt trên nền vàng nhạt là cặp màu đọc không nổi, và một nhãn
* "Cần gọi hỏi lại" mà đọc không nổi thì không gọi được ai. */
.badge--warn{background:#FFF4D6;color:var(--ama-warning)}
.pill-outline{display:inline-block;padding:6px 16px;max-width:100%;border-radius:var(--r-pill);
border:1.5px solid rgba(255,255,255,.35);color:#fff;
font:700 12px/1.5 var(--ama-font-head);letter-spacing:.16em;text-transform:uppercase;
word-break:break-word}
/* ── 8. HEADER ────────────────────────────────────────────────────────────── */
.ama-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--surface) 88%,transparent);
backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);
border-bottom:1px solid var(--border)}
.ama-header__inner{display:flex;align-items:center;gap:var(--sp-4);height:64px}
.ama-logo{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none!important}
.ama-logo__mark{width:40px;height:40px;border-radius:11px;background:var(--ama-grad-hero);
color:#fff;display:flex;align-items:center;justify-content:center;
font:800 16px/1 var(--ama-font-head);flex:none;box-shadow:var(--sh-1);white-space:nowrap}
.ama-logo__mark span{color:var(--ama-orange-400)}
.ama-logo__txt{display:none;flex-direction:column;line-height:1.15}
.ama-logo__name{font:800 16px/1.1 var(--ama-font-head);color:var(--text);letter-spacing:-.02em}
/* ★★★ LƯỢT 77 — DÒNG SLOGAN CHIẾM MẤT CHỖ CỦA THỰC ĐƠN.
*
* ĐO ĐƯỢC: khối logo rộng **358px**, trong đó riêng dòng slogan là **308px** —
* 31 ký tự ở cỡ 12px với giãn chữ 0,16em. Thực đơn còn 407px, và từ 1.100px
* trở xuống thực đơn **biến mất hẳn** thành nút ba gạch.
*
* Chủ dự án: *"thiết kế dòng chữ này cho nó gọn lại, rút lại, chữ nhỏ xíu
* thôi"* — để lấy chỗ đưa các mục con của "Dịch vụ" ra cùng hàng.
*
* ★ Giãn chữ 0,16em trên 31 ký tự tự nó đã cộng thêm ~60px. Hạ cỡ chữ xuống
* 9,5px và giãn chữ xuống 0,04em: dòng ấy còn ~150px, trả lại một nửa chỗ.
* ★★ `max-width` + cắt bằng ba chấm: một bản dịch dài hơn sẽ bị kẹp lại chứ
* không đẩy thực đơn văng đi lần nữa. */
/* ★★★ 12px LÀ SÀN, KHÔNG PHẢI GỢI Ý.
* Tôi hạ dòng này xuống 9,5px cho vừa hàng đầu trang, và bộ kiểm thử kêu đỏ
* ngay: dự án có luật CẤM cỡ chữ dưới 12px (chữ nhỏ hơn thế thì người trên
* 40 tuổi đọc không nổi — mà khách của Amatay phần lớn là chủ tiệm ở tuổi
* ấy). Chủ dự án bảo "chữ nhỏ xíu thôi", nhưng "nhỏ" có một cái sàn.
* ★ Chỗ tiết kiệm thật nằm ở CÂU NGẮN (`TenHieu::sloganNgan`), không nằm ở
* việc thu chữ xuống mức đọc không ra. */
.ama-logo__sub{font:700 12px/1.25 var(--ama-font-head);letter-spacing:.02em;
color:var(--ama-orange-600);text-transform:uppercase;
/* ★ Trần đủ cho trọn câu 31 ký tự ở cỡ 9,5px. Trần 22ch cắt thành
* "AI MARKETING FOR LOC…" — chữ cụt giữa từ trông như hỏng, mà mục đích
* là thu gọn chứ không phải giấu bớt. Vẫn giữ cắt-ba-chấm làm lưới an
* toàn cho bản dịch dài hơn. */
max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ★★★ DƯỚI 1.360px THÌ GIẤU HẲN DÒNG SLOGAN, ĐỪNG CẮT NÓ.
*
* Đo được: để trọn câu thì ở 1.280px hàng đầu trang thừa 33px. Cắt bớt thành
* "AI MARKETING FOR LOC…" thì vừa, nhưng một câu cụt giữa từ trông như trang
* hỏng — và nó chẳng nói thêm gì cho ai.
*
* ★ Giấu hẳn thì không mất thông tin: câu ấy vẫn nằm trong `aria-label` của
* chính thẻ logo (máy đọc màn hình vẫn đọc đủ), và vẫn hiện nguyên ở chân
* trang. Màn hẹp thì tám mục thực đơn đáng chỗ hơn một dòng phụ đề. */
/* ★ Dạng ngắn vừa ở mọi khổ desktop, nên không phải giấu nữa. Dưới 1.000px
* thì cả khối chữ logo đã ẩn sẵn (luật `.ama-logo__txt{display:none}`). */
/* Trong chân trang nền xanh đậm, chữ cam đậm lại tối quá — dùng sắc sáng hơn.
Cùng một chữ "Assistant", hai nền khác nhau, hai màu khác nhau. */
.ama-footer .ama-logo__sub{color:var(--ama-orange-400)}
.ama-nav{display:none;margin-left:auto;align-items:center;gap:2px;flex-wrap:nowrap}
/* ★ Đệm 12px×2 nhân bảy mục là 168px chỉ để chừa lề. Xuống 9px vẫn bấm được
* thoải mái (vùng bấm cao 38px) và trả lại 42px cho chữ. */
/* ★ Đo được ở 1.280px: hàng đầu trang còn thừa 56px. Đệm 8px×2 nhân tám mục
* là 128px chỉ để chừa lề; xuống 6px trả lại 32px, cỡ chữ 14→13.5 trả thêm
* ~24px. Vùng bấm vẫn cao 36px — ngón tay và chuột đều tới được. */
.ama-nav a{white-space:nowrap;padding:8px 6px;border-radius:var(--r-md);color:var(--text);font-weight:600;
font-size:13.5px;text-decoration:none!important;transition:background var(--dur) var(--ease)}
.ama-nav a:hover{background:var(--ama-blue-050)}
.ama-header__tools{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.ama-nav+.ama-header__tools{margin-left:var(--sp-3)}
.lang-switch{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-pill);
overflow:hidden;background:var(--surface)}
.lang-switch a{padding:7px 11px;font:700 12px/1 var(--ama-font-head);color:var(--text-soft);
text-decoration:none!important;transition:all var(--dur) var(--ease)}
.lang-switch a.is-active{background:var(--ama-blue-600);color:#fff}
.header-cta{display:none}
@media (min-width:800px){
.ama-header__inner{height:72px}
.ama-logo__txt{display:flex}
.header-cta{display:inline-flex}
}
@media (min-width:1180px){
.ama-nav{display:flex}
.ama-menu-btn{display:none!important}
}
/* ── 9. NGĂN KÉO DI ĐỘNG ──────────────────────────────────────────────────── */
.ama-menu-btn{display:inline-grid}
.ama-drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none;
overflow:hidden}
.ama-drawer[aria-hidden="false"]{visibility:visible;pointer-events:auto}
.ama-drawer__scrim{position:absolute;inset:0;background:rgba(0,18,51,.5);opacity:0;
transition:opacity var(--dur) var(--ease)}
.ama-drawer[aria-hidden="false"] .ama-drawer__scrim{opacity:1}
.ama-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(84vw,320px);
background:var(--surface);box-shadow:var(--sh-3);padding:var(--sp-5);
transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);
overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.ama-drawer[aria-hidden="false"] .ama-drawer__panel{transform:translateX(0)}
.ama-drawer__panel a{display:block;padding:14px 12px;border-radius:var(--r-md);
color:var(--text);font-weight:600;font-size:17px;text-decoration:none!important;
border-bottom:1px solid var(--ama-gray-100)}
.ama-drawer__panel a:last-of-type{border-bottom:0}
.ama-drawer__close{position:absolute;top:12px;right:12px}
/* ── 10. THANH TAB ĐÁY (DI ĐỘNG) ──────────────────────────────────────────── */
.ama-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);
border-top:1px solid var(--border);box-shadow:0 -3px 14px rgba(0,24,72,.08);
padding-bottom:env(safe-area-inset-bottom)}
/* ★★★ LƯỢT 76 — CHỮ TRONG THANH ĐÁY KHÔNG ĐƯỢC VỠ.
*
* Đo được trên màn 390px: ô CTA rộng **78px**, cao **72px**, chữ trải **5
* dòng**. Nguyên do không nằm ở CSS mà ở CHUỖI: `nav.register` dùng chung cho
* ba chỗ rộng 78px, 139px và 420px, và bản tiếng Anh của nó là "GET STARTED".
* Một chuỗi cho ba bề rộng ấy thì chỗ hẹp nhất phải vỡ. Lượt này tách riêng
* một chuỗi ngắn cho thanh đáy (`nav.register_tab`).
*
* ★★ Và chặn ở CSS thêm một lớp nữa, vì bản dịch nào cũng có thể dài ra: kẹp
* đúng MỘT dòng, thừa thì bỏ bằng dấu ba chấm. Một ô điều hướng cao gấp
* đôi mấy ô bên cạnh làm cả thanh lệch, và người ta bấm trượt. */
.ama-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;min-height:60px;color:var(--text-soft);font:600 12px/1.2 var(--ama-font-head);
text-decoration:none!important;text-align:center;padding:6px 2px;
white-space:nowrap;overflow:hidden}
.ama-tabbar a>:not(i){display:block;max-width:100%;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.ama-tabbar a i{font-style:normal;font-size:19px;line-height:1}
/* ★ Dùng biến chữ-liên-kết (đổi theo chế độ Sáng/Tối), KHÔNG dùng thẳng
--ama-blue-600. Biến đó là màu xanh ĐẬM cố định: ở chế độ Tối nó nằm trên
nền xanh đen và chỉ đạt 2,2:1 — mục đang chọn trên thanh dưới cùng hoá ra
là mục KHÓ ĐỌC NHẤT, trên mọi trang công khai. */
.ama-tabbar a.is-active{color:var(--ama-chu-lien-ket)}
.ama-tabbar__cta{position:relative}
.ama-tabbar__cta i{width:46px;height:46px;border-radius:50%;background:var(--ama-grad-cta);
color:#fff!important;display:grid;place-items:center;margin-top:-18px;
box-shadow:var(--sh-cta);font-size:20px!important}
/* Chữ nhỏ 10,5px thì màu cam sáng chỉ đạt 3,06:1 — dùng bậc đậm hơn */
.ama-tabbar__cta{color:var(--ama-orange-600)!important}
body{padding-bottom:66px}
@media (min-width:1180px){.ama-tabbar{display:none}body{padding-bottom:0}}
/* ── 11. HERO ─────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--ama-grad-hero);color:#fff;overflow:hidden;
padding:var(--sp-12) 0 var(--sp-16)}
.hero::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
background-image:
radial-gradient(circle at 12% 22%,rgba(255,255,255,.5) 1.5px,transparent 1.6px),
radial-gradient(circle at 82% 68%,rgba(255,138,43,.7) 2px,transparent 2.1px);
background-size:46px 46px,64px 64px}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);
gap:var(--sp-8);align-items:center}
.hero h1{color:#fff;margin:var(--sp-4) 0 var(--sp-4);text-wrap:balance;max-width:16ch}
/* ★★★ LƯỢT 77 — TIÊU ĐỀ NHỎ LẠI ĐỂ CÂN VỚI CỘT PHẢI.
* Chủ dự án: *"Cho kích thước nhỏ lại và cân nó bằng hình bên tay phải"*.
* Đo được: ở 46px câu tiêu đề chiếm NĂM dòng và cao 248px trên một cột 600px,
* trong khi cả cột phải chỉ có một khung điện thoại 264px. Xuống 38/42px thì
* tiêu đề còn bốn dòng và hai cột nhìn ngang nhau. */
@media (min-width:960px){.hero h1{max-width:none;font-size:38px}}
@media (min-width:1280px){.hero h1{font-size:42px}}
.hero__lead{font-size:17px;line-height:1.7;color:rgba(255,255,255,.9);
margin-bottom:var(--sp-6);max-width:54ch}
.hero__ticks{display:grid;gap:var(--sp-2);margin-top:var(--sp-8);
grid-template-columns:minmax(0,1fr);font-size:14.5px;color:rgba(255,255,255,.92)}
.hero__ticks span{display:flex;align-items:flex-start;gap:8px}
.hero__ticks span::before{content:"✓";color:var(--ama-orange-400);font-weight:800;flex:none}
.hero__visual{position:relative}
.hero__phone{background:#fff;border-radius:22px;padding:14px;box-shadow:var(--sh-3);
max-width:290px;margin:0 auto;color:var(--ama-navy-800)}
.hero__phone-bar{height:5px;width:44px;background:var(--ama-gray-200);border-radius:3px;
margin:0 auto var(--sp-3)}
.hero__post{border:1px solid var(--ama-gray-100);border-radius:var(--r-md);overflow:hidden}
.hero__post-img{height:104px;background:linear-gradient(135deg,#FFE8D6,#DCE9FB);
display:grid;place-items:center;font-size:34px}
.hero__post-body{padding:11px 12px;font-size:12.5px;line-height:1.5}
.hero__post-meta{display:flex;align-items:center;gap:6px;margin-top:9px;
font-size:12px;color:var(--ama-gray-600)}
.hero__note{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
border-radius:var(--r-md);padding:12px 14px;margin-top:var(--sp-4);
font-size:13.5px;color:#fff;display:flex;gap:9px;align-items:flex-start;max-width:290px;
margin-left:auto;margin-right:auto}
@media (min-width:640px){.hero__ticks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:960px){
.hero{padding:var(--sp-20) 0}
.hero__grid{grid-template-columns:1.15fr .85fr;gap:var(--sp-12)}
.hero__lead{font-size:19px}
.hero__phone{max-width:320px}
}
/* ── 12. DẢI TIN CẬY ──────────────────────────────────────────────────────── */
.trust{background:var(--surface);border-bottom:1px solid var(--border)}
.trust__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);
padding:var(--sp-6) 0}
.trust__item{text-align:center}
.trust__num{font:800 26px/1.1 var(--ama-font-head);color:var(--ama-navy-800);
letter-spacing:-.02em}
.trust__lab{font-size:12.5px;color:var(--text-soft);margin-top:3px;line-height:1.4}
@media (min-width:900px){
.trust__grid{grid-template-columns:repeat(5,minmax(0,1fr));padding:var(--sp-8) 0}
.trust__num{font-size:32px}
.trust__lab{font-size:13.5px}
}
/* ── 13. NGŨ GIÁC 5 BƯỚC ──────────────────────────────────────────────────── */
.penta{position:relative}
/* ★★★ LƯỢT 76 — NĂM THẺ PHẢI CAO BẰNG NHAU.
*
* Đo được trên điện thoại: 361 · 361 · 294 · 294 · 249 px → **lệch 112px**.
* Trên máy tính lưới kéo cho đều 294px, nhưng dòng tả bên trong vẫn so le
* **3 · 4 · 5 · 6 dòng** — nên thẻ nào cũng chừa một khoảng trắng khác nhau
* ở dưới, và mắt đọc ra ngay là chưa xong.
*
* ★★ Chữa HAI đầu, không một đầu: rút dòng tả cho đều (xem bản vá i18n của
* lượt này) VÀ đặt sàn 3 dòng ở đây. Chỉ rút chữ thì lần sau ai sửa chữ
* là lệch lại; chỉ đặt sàn thì chữ dài vẫn đẩy thẻ cao lên. */
.penta__item{text-align:center;padding:var(--sp-4) var(--sp-3);min-width:0;
display:flex;flex-direction:column}
.penta__icon{width:52px;height:52px;margin:0 auto var(--sp-2);border-radius:50%;
display:grid;place-items:center;font-size:26px;background:var(--surface);
box-shadow:var(--sh-2);border:2px solid var(--ama-blue-100)}
.penta__item:nth-child(3) .penta__icon,
.penta__item:nth-child(5) .penta__icon{border-color:var(--ama-orange-100)}
.penta__name{font:800 13px/1.2 var(--ama-font-head);letter-spacing:.1em;
color:var(--ama-navy-800);margin-bottom:4px;overflow-wrap:anywhere;hyphens:auto}
.penta__en{font:700 12px/1.3 var(--ama-font-head);letter-spacing:.14em;
color:var(--ama-gray-400);margin-bottom:var(--sp-3);text-transform:uppercase;
overflow-wrap:anywhere}
@media (min-width:560px){ .penta__desc{min-height:4.8em!important} }
.penta__desc{font-size:14px;color:var(--text-soft);line-height:1.6;margin:0;
/* ★ Sàn 3 dòng: 3 × 1.6 = 4.8em. Thẻ nào chữ ngắn thì chừa đúng bằng thẻ
* chữ dài, nên năm thẻ cao bằng nhau mà không cắt chữ của ai.
* ★★ Thẻ "năm việc" xếp HAI CỘT ngay từ màn hẹp nhất, nên ở đây phải đặt
* sàn cho CẢ điện thoại — khác thẻ Lính (một cột dưới 560px). Trên màn
* hẹp, 60 ký tự vỡ thành 5 dòng, nên sàn ở đó là 5 × 1.6 = 8em. */
min-height:8em;
overflow-wrap:anywhere}
/* ── 14. THẺ AGENT ────────────────────────────────────────────────────────── */
.agent{position:relative;display:flex;flex-direction:column;height:100%}
.agent__head{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-2);
min-width:0}
.agent__head>div:not(.agent__no){min-width:0;flex:1}
.agent__no{width:38px;height:38px;border-radius:var(--r-md);flex:none;display:grid;
place-items:center;font:800 15px/1 var(--ama-font-head);color:#fff;
background:var(--ama-grad-cta);box-shadow:var(--sh-1)}
.agent--soon .agent__no{background:var(--ama-gray-400);box-shadow:none}
/* ★★★ LƯỢT 76 — BẢY THẺ LÍNH PHẢI CAO BẰNG NHAU.
*
* Đo được trên điện thoại: thấp nhất 686px, cao nhất 905px → **lệch 219px**.
* Không phải do dòng tả (đã đều, 38–54 ký tự) mà do:
* · TÊN lính dài ngắn khác nhau — "Mạng xã hội" một dòng, còn
* "Hồ sơ doanh nghiệp Google" và "Website & Tìm kiếm AI" hai dòng;
* · danh sách việc 4 dòng hoặc 5 dòng (đúng theo bản in, không sửa được).
*
* ★★ Nên đặt SÀN theo số dòng lớn nhất: tên 2 dòng, tả 2 dòng, việc 5 dòng.
* Thẻ nào ít hơn thì chừa trống đúng bằng thẻ nhiều nhất. Cách khác là
* cắt bớt việc của ba lính 5 việc — nhưng con số 31 đầu việc in trên bản
* giấy, sửa nó là làm bản in nói khác phần mềm. */
.agent__title{font:700 16px/1.25 var(--ama-font-head);color:var(--text);margin:2px 0 2px;
overflow-wrap:anywhere}
.agent__en{font-size:12px;color:var(--ama-gray-400);letter-spacing:.03em;overflow-wrap:anywhere}
.agent__desc{font-size:14.5px;color:var(--text-soft);line-height:1.6;
margin-bottom:var(--sp-3)}
.agent__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
padding-top:var(--sp-3);border-top:1px solid var(--ama-gray-100);font-size:12.5px;
color:var(--text-soft);flex-wrap:wrap}
.agent--soon{opacity:.72}
.agent__note{font-size:12px;color:var(--ama-orange-600);margin-top:var(--sp-2);
display:flex;gap:5px;align-items:flex-start}
/* ── 15. BẢNG GIÁ ─────────────────────────────────────────────────────────── */
.price{position:relative;display:flex;flex-direction:column;text-align:center;height:100%}
.price--pop{border-color:var(--ama-orange-500);box-shadow:var(--sh-3);
border-width:2px}
.price__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
background:var(--ama-grad-cta);color:#fff;padding:5px 16px;border-radius:var(--r-pill);
font:800 12px/1 var(--ama-font-head);letter-spacing:.14em;white-space:nowrap;
box-shadow:var(--sh-cta)}
.price__name{font:800 15px/1 var(--ama-font-head);letter-spacing:.1em;text-transform:uppercase;
color:var(--ama-blue-600);margin:var(--sp-2) 0 var(--sp-4)}
.price--pop .price__name{color:var(--ama-orange-500)}
.price__amt{font:800 46px/1 var(--ama-font-head);color:var(--text);letter-spacing:-.03em}
.price__per{font-size:15px;color:var(--text-soft);font-weight:600}
.price__tag{font-size:14px;color:var(--text-soft);margin:var(--sp-2) 0 var(--sp-4);
min-height:44px;line-height:1.5}
/* ★ Đo được: riêng danh sách tính năng cao 407px trong một thẻ giá 712px —
* quá nửa. Siết khe dòng, không cắt dòng nào: mỗi dòng là một hạn mức khách
* cần đọc để so hai gói. */
.price__list{list-style:none;padding:0;margin:0 0 var(--sp-4);text-align:left;flex:1}
.price__list li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;
margin-bottom:var(--sp-2)}
.price__list li::before{content:"✓";color:var(--ama-success-700);font-weight:800;flex:none}
.price__note{font-size:13px;color:var(--text-soft);text-align:center;margin-top:var(--sp-6)}
/* ── 16. AGENT-PICKER (Menu-List tự tính tiền) ────────────────────────────── */
.picker{background:var(--surface);border:2px solid var(--ama-blue-100);
border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-2)}
.picker__head{font:800 14px/1 var(--ama-font-head);letter-spacing:.12em;text-transform:uppercase;
color:var(--ama-navy-800);margin-bottom:var(--sp-4);text-align:center}
.picker__list{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.checkbox-card{position:relative;display:block;cursor:pointer}
.checkbox-card input{position:absolute;opacity:0;width:0;height:0}
.checkbox-card>span{display:flex;align-items:center;gap:11px;min-height:52px;
padding:10px 14px;border:2px solid var(--border);border-radius:var(--r-md);
background:var(--surface);font:500 15px/1.35 var(--ama-font-body);color:var(--text);
transition:all var(--dur) var(--ease)}
.checkbox-card input:checked+span{border-color:var(--ama-blue-600);background:var(--ama-blue-050);
color:var(--ama-navy-800);font-weight:600;box-shadow:inset 0 0 0 1px var(--ama-blue-600)}
.checkbox-card input:focus-visible+span{outline:3px solid var(--ama-blue-400);outline-offset:2px}
.checkbox-card input:disabled+span{opacity:.55;cursor:not-allowed}
.checkbox-card__tick{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);
flex:none;display:grid;place-items:center;font-size:13px;color:transparent;
transition:all var(--dur) var(--ease)}
.checkbox-card input:checked+span .checkbox-card__tick{background:var(--ama-blue-600);
border-color:var(--ama-blue-600);color:#fff}
.checkbox-card__main{flex:1;min-width:0}
.checkbox-card__name{font-weight:600;display:block}
.checkbox-card__meta{font-size:12px;color:var(--text-soft);display:block;margin-top:1px}
.checkbox-card__price{font:700 13px/1 var(--ama-font-head);color:var(--ama-cam-chu);
white-space:nowrap;flex:none}
.picker__sum{border-top:2px dashed var(--border);padding-top:var(--sp-4);text-align:center}
.picker__count{font-size:14px;color:var(--text-soft);margin-bottom:var(--sp-2)}
.picker__total{font:800 34px/1 var(--ama-font-head);color:var(--ama-navy-800);
letter-spacing:-.02em}
.picker__total small{font:600 15px/1 var(--ama-font-head);color:var(--text-soft)}
.picker__match{margin-top:var(--sp-3);padding:9px 14px;border-radius:var(--r-md);
background:var(--ama-success-100);color:var(--ama-success-700);font-size:13.5px;font-weight:600}
.picker__disc{margin-top:var(--sp-2);font-size:13px;color:var(--text-soft)}
.picker__hint{font-size:12px;color:var(--ama-orange-600);margin-top:var(--sp-2);
display:none}
.picker__hint.is-on{display:block}
/* ── 17. QUY TRÌNH 3 BƯỚC ─────────────────────────────────────────────────── */
.step{position:relative;text-align:center;padding-top:var(--sp-4)}
.step__no{width:52px;height:52px;border-radius:50%;background:var(--ama-grad-hero);
color:#fff;display:grid;place-items:center;font:800 21px/1 var(--ama-font-head);
margin:0 auto var(--sp-4);box-shadow:var(--sh-2)}
.step h3{font-size:18px}
.step p{font-size:14.5px;color:var(--text-soft);margin:0}
/* ── 18. VỀ CHÚNG TÔI ─────────────────────────────────────────────────────── */
.about__body{max-width:760px;margin:0 auto;font-size:16.5px;line-height:1.8;
color:rgba(255,255,255,.9)}
.about__body h3{font-size:20px;margin:var(--sp-8) 0 var(--sp-3);color:#fff}
.about__body strong{color:#fff}
.about__body blockquote{background:rgba(255,255,255,.08);border-left-color:var(--ama-orange-400);
color:#fff}
.about__body table{width:100%;border-collapse:collapse;margin:var(--sp-4) 0;font-size:15px}
.about__body td{padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.14)}
.about__body td:last-child{text-align:right;white-space:nowrap;color:var(--ama-orange-400);
font-weight:700}
.about__body ol{padding-left:1.2em}
.about__body a{color:var(--ama-orange-400)}
/* ── 19. CAM KẾT BẢO MẬT ──────────────────────────────────────────────────── */
.sec-list{display:grid;gap:var(--sp-4);counter-reset:s}
.sec-item{display:flex;gap:var(--sp-3);align-items:flex-start;background:var(--surface);
border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1)}
.sec-item__no{width:34px;height:34px;border-radius:50%;background:var(--ama-orange-500);
color:#fff;display:grid;place-items:center;font:800 15px/1 var(--ama-font-head);flex:none}
.sec-item p{margin:0;font-size:14.5px;line-height:1.55}
.sec-sum{text-align:center;font-size:13.5px;color:var(--text-soft);font-style:italic;
margin-top:var(--sp-6)}
/* ── 20. HỎI–ĐÁP ──────────────────────────────────────────────────────────── */
.faq{max-width:800px;margin:0 auto}
.faq details{background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);margin-bottom:var(--sp-3);overflow:hidden}
.faq summary{padding:var(--sp-3) var(--sp-4);cursor:pointer;font-weight:600;font-size:15.5px;
list-style:none;display:flex;justify-content:space-between;gap:var(--sp-4);align-items:center;
min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--ama-font-head);color:var(--ama-blue-600);
flex:none;transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 var(--sp-5) var(--sp-5);color:var(--text-soft);font-size:15px;
line-height:1.7}
/* ── 21. LIÊN HỆ ──────────────────────────────────────────────────────────── */
.contact-card{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-6);
box-shadow:var(--sh-1);border:1px solid var(--border);height:100%}
.contact-card h3{font-size:15px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ama-blue-600);margin-bottom:var(--sp-4)}
.contact-row{display:flex;align-items:flex-start;gap:11px;padding:9px 0;
border-bottom:1px solid var(--ama-gray-100);font-size:15px}
.contact-row:last-child{border-bottom:0}
.contact-row i{font-style:normal;font-size:17px;flex:none;line-height:1.5}
.contact-row a{font-weight:600;word-break:break-word}
.contact-row small{display:block;color:var(--text-soft);font-size:12.5px;margin-top:1px}
/* ── 22. BẢN ĐỒ ───────────────────────────────────────────────────────────── */
.map-panel{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--sh-1);border:1px solid var(--border);
/* ★ Nửa bản đồ kéo cao bằng nửa bên phải, và khung ảnh bản đồ ăn hết phần
* dư — chứ không để một vệt trắng dưới chân bản đồ. */
display:flex;flex-direction:column}
.map-panel .map-canvas{flex:1;min-height:340px;height:auto}
.map-canvas{height:340px;background:var(--ama-blue-050);display:grid;place-items:center;
color:var(--text-soft);font-size:14px;text-align:center;padding:var(--sp-5)}
.map-stats{padding:var(--sp-5)}
.map-stats__row{display:flex;justify-content:space-between;padding:9px 0;
border-bottom:1px solid var(--ama-gray-100);font-size:15px}
.map-stats__row:last-child{border-bottom:0}
.map-stats__row b{font-weight:700}
.map-attr{font-size:12px;color:var(--ama-gray-400);padding:var(--sp-2) var(--sp-5)}
/* ── 23. FOOTER ───────────────────────────────────────────────────────────── */
.ama-footer{background:var(--ama-navy-900);color:rgba(255,255,255,.72);
padding:var(--sp-8) 0 var(--sp-5);font-size:14px}
.ama-footer a{color:rgba(255,255,255,.82);text-decoration:none}
.ama-footer a:hover{color:#fff;text-decoration:underline}
.ama-footer h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
margin-bottom:var(--sp-4)}
.ama-footer ul{list-style:none;padding:0;margin:0}
.ama-footer li{margin-bottom:6px;line-height:1.45}
/* ★★★ LƯỢT 76 — FOOTER thu từ 1.012px (điện thoại) xuống. Bốn cột cao
* 159 · 164 · 196 · 209px → lệch 50px; khe 32px giữa các cột nhân bốn lần. */
.ama-footer__grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
.ama-footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--sp-5);
padding-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-3);
justify-content:space-between;font-size:13px}
@media (min-width:768px){.ama-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
/* ── 24. CHATBOT NỔI ──────────────────────────────────────────────────────── */
.chat-fab{position:fixed;right:16px;bottom:80px;z-index:65;min-height:56px;
border-radius:var(--r-pill);background:var(--ama-grad-cta);color:#fff;border:0;cursor:pointer;
display:inline-flex;align-items:center;gap:9px;padding:0 20px 0 16px;
box-shadow:var(--sh-cta);transition:transform var(--dur) var(--ease);
font:700 15px/1 var(--ama-font-head)}
.chat-fab:hover{transform:scale(1.05)}
.chat-fab__i{font-size:23px;line-height:1}
@media (max-width:479px){.chat-fab{padding:0;width:56px;justify-content:center}
.chat-fab__t{display:none}}
@media (min-width:1180px){.chat-fab{bottom:24px;right:24px}}
/* ── Hộp trò chuyện ─────────────────────────────────────────────────────── */
.chat{position:fixed;z-index:70;right:16px;bottom:148px;width:min(calc(100vw - 32px),392px);
height:min(72vh,560px);background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-xl);box-shadow:var(--sh-3);display:flex;flex-direction:column;
overflow:hidden}
@media (min-width:1180px){.chat{bottom:92px;right:24px}}
@media (max-width:479px){.chat{right:8px;left:8px;width:auto;bottom:142px;height:min(74vh,540px)}}
.chat[hidden]{display:none}
.chat__h{display:flex;align-items:center;gap:11px;padding:12px 14px;flex:none;
background:var(--ama-nen-dam);color:#fff}
.chat__av{width:38px;height:38px;border-radius:11px;background:var(--ama-grad-cta);flex:none;
display:grid;place-items:center;font:800 16px/1 var(--ama-font-head)}
.chat__ten{flex:1;min-width:0}
.chat__ten b{display:block;font:700 14.5px/1.3 var(--ama-font-head)}
.chat__ten small{display:block;font-size:12px;color:rgba(255,255,255,.7)}
.chat__x{background:transparent;border:0;color:#fff;cursor:pointer;font-size:15px;
width:34px;height:34px;border-radius:9px;flex:none}
.chat__x:hover{background:rgba(255,255,255,.16)}
.chat__ds{flex:1;overflow-y:auto;padding:var(--sp-4);display:flex;flex-direction:column;
gap:11px;background:var(--ama-gray-050);overscroll-behavior:contain}
.chat__f{flex:none;display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);
background:var(--surface);align-items:flex-end}
.chat__f textarea{flex:1;min-width:0;resize:none;border:1px solid var(--border);
border-radius:var(--r-md);padding:11px 12px;font:400 15px/1.45 var(--ama-font-body);
background:var(--surface);color:var(--text);max-height:96px}
.chat__f textarea:focus{outline:none;border-color:var(--ama-blue-600)}
.chat__f button{flex:none;width:44px;height:44px;border-radius:var(--r-md);border:0;
background:var(--ama-grad-cta);color:#fff;cursor:pointer;font-size:16px}
.chat__ghi{flex:none;margin:0;padding:8px 12px;font-size:12px;text-align:center;
color:var(--text-soft);background:var(--surface);border-top:1px solid var(--border)}
.chat__ghi a{color:var(--ama-chu-lien-ket);font-weight:700;text-decoration:none}
.cbub{max-width:88%;display:flex;flex-direction:column;gap:7px}
.cbub--user{align-self:flex-end;align-items:flex-end}
.cbub--bot{align-self:flex-start}
.cbub__t{padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.55;
white-space:pre-wrap;overflow-wrap:anywhere}
.cbub--bot .cbub__t{background:var(--surface);border:1px solid var(--border);
border-bottom-left-radius:5px;color:var(--text)}
.cbub--user .cbub__t{background:var(--ama-blue-600);color:#fff;border-bottom-right-radius:5px}
.cbub__mo{font-size:12.5px;color:var(--ama-orange-600);font-weight:600}
.cbub__nut{display:flex;gap:7px;flex-wrap:wrap}
.cbtn{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;
border-radius:var(--r-pill);border:1.5px solid var(--ama-blue-600);background:var(--surface);
color:var(--ama-blue-600);font:600 13.5px/1 var(--ama-font-head);text-decoration:none}
.cbtn:hover{background:var(--ama-blue-600);color:#fff}
.cbub__goi{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cbub__goi small{color:var(--text-soft);font-size:12px}
.cgoi{text-align:left;border:1px dashed var(--border);background:var(--surface);
border-radius:12px;padding:8px 12px;cursor:pointer;font:500 13.5px/1.4 var(--ama-font-body);
color:var(--ama-blue-700);max-width:100%;overflow-wrap:anywhere}
.cgoi:hover{border-color:var(--ama-blue-600);border-style:solid;background:var(--ama-blue-050)}
.cbub--go .cbub__t{display:none}
.cbub--go{flex-direction:row;gap:5px;padding:13px 16px;background:var(--surface);
border:1px solid var(--border);border-radius:16px;border-bottom-left-radius:5px;width:auto}
.cbub--go span{width:7px;height:7px;border-radius:50%;background:var(--ama-gray-400);
animation:cgo 1.1s infinite}
.cbub--go span:nth-child(2){animation-delay:.16s}
.cbub--go span:nth-child(3){animation-delay:.32s}
@keyframes cgo{0%,60%,100%{opacity:.28;transform:translateY(0)}
30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.cbub--go span{animation:none;opacity:.6}}
/* ── 25. BIỂU MẪU ─────────────────────────────────────────────────────────── */
.field{margin-bottom:var(--sp-4)}
.field-label{display:block;font:600 15px/1.4 var(--ama-font-head);margin-bottom:6px;
color:var(--text)}
.field-label .req{color:var(--ama-danger-700);margin-left:2px}
.field-hint{font-size:13px;color:var(--text-soft);margin-top:4px}
.field-err{font-size:13px;color:var(--ama-danger-700);margin-top:4px;font-weight:600}
.input,.select,.textarea{
width:100%;min-height:48px;padding:11px 14px;border:2px solid var(--border);
border-radius:var(--r-md);background:var(--surface);color:var(--text);
font:400 16px/1.4 var(--ama-font-body); /* 16px BẮT BUỘC — iOS không tự phóng to */
transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.textarea{min-height:110px;resize:vertical;padding-top:12px}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--ama-blue-600);
box-shadow:0 0 0 3px var(--ama-blue-100)}
.input[aria-invalid="true"]{border-color:var(--ama-danger)}
.select{appearance:none;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235A6880' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.switch input{position:absolute;opacity:0}
.switch__track{width:46px;height:26px;border-radius:13px;background:var(--ama-gray-200);
position:relative;transition:background var(--dur) var(--ease);flex:none}
.switch__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
border-radius:50%;background:#fff;box-shadow:var(--sh-1);
transition:transform var(--dur) var(--ease)}
.switch input:checked+.switch__track{background:var(--ama-blue-600)}
.switch input:checked+.switch__track::after{transform:translateX(20px)}
/* ── 26. BẢNG DỮ LIỆU ─────────────────────────────────────────────────────── */
.ama-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md);
border:1px solid var(--border)}
.ama-table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface)}
.ama-table th{text-align:left;padding:12px 14px;background:var(--ama-gray-050);
font:600 13px/1.3 var(--ama-font-head);color:var(--text-soft);white-space:nowrap;
border-bottom:1px solid var(--border);position:sticky;top:0}
.ama-table td{padding:12px 14px;border-bottom:1px solid var(--ama-gray-100)}
.ama-table tr:last-child td{border-bottom:0}
.ama-table tbody tr:hover{background:var(--ama-blue-050)}
/* ── 27. PHẢN HỒI: TOAST · MODAL · TIẾN TRÌNH ─────────────────────────────── */
.toast-wrap{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:200;
display:flex;flex-direction:column;gap:9px;width:min(92vw,420px);pointer-events:none}
.toast{background:var(--ama-nen-dam);color:#fff;border-radius:var(--r-md);
padding:13px 17px;font-size:14.5px;box-shadow:var(--sh-3);pointer-events:auto;
animation:toastIn var(--dur) var(--ease);display:flex;gap:10px;align-items:flex-start}
.toast--ok{background:var(--ama-success)} .toast--err{background:var(--ama-danger)}
.toast--warn{background:var(--ama-warning);color:#111}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:1180px){.toast-wrap{bottom:24px;left:auto;right:24px;transform:none}}
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:var(--sp-4);
background:rgba(0,18,51,.55);visibility:hidden;opacity:0;
transition:opacity var(--dur) var(--ease),visibility var(--dur)}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal__box{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-6);
width:min(94vw,560px);max-height:88vh;overflow-y:auto;box-shadow:var(--sh-3);
overscroll-behavior:contain;transform:translateY(12px);
transition:transform var(--dur) var(--ease)}
.modal[aria-hidden="false"] .modal__box{transform:none}
.progress{height:8px;background:var(--ama-gray-100);border-radius:var(--r-pill);overflow:hidden}
.progress__bar{height:100%;background:var(--ama-grad-cta);border-radius:var(--r-pill);
transition:width var(--dur-slow) var(--ease)}
.skeleton{background:linear-gradient(90deg,var(--ama-gray-100) 25%,var(--ama-gray-050) 50%,
var(--ama-gray-100) 75%);background-size:200% 100%;animation:sk 1.4s infinite;
border-radius:var(--r-sm)}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.empty-state{text-align:center;padding:var(--sp-12) var(--sp-5);color:var(--text-soft)}
.empty-state__icon{font-size:44px;margin-bottom:var(--sp-3);opacity:.55}
.alert{border-radius:var(--r-md);padding:14px 17px;font-size:15px;display:flex;gap:11px;
align-items:flex-start;margin-bottom:var(--sp-4)}
.alert--info{background:var(--ama-blue-050);color:var(--ama-chu-lien-ket);
border:1px solid var(--ama-blue-100)}
.alert--warn{background:var(--ama-warning-100);color:var(--ama-warning-700);border:1px solid #F3E0A8}
.alert--ok{background:var(--ama-success-100);color:var(--ama-success-700);border:1px solid #B6E4CE}
.alert--err{background:var(--ama-danger-100);color:var(--ama-danger-700);border:1px solid #F5C6C6}
/* ── 28. DẢI BĂNG STAGING ─────────────────────────────────────────────────── */
/* Dải băng cảnh báo: nền vàng SÁNG với chữ gần đen. Dùng --ama-warning (đã
làm tối để chữ trắng đọc được) làm NỀN thì chữ đen trên đó chỉ còn 4,03:1. */
.staging-banner{position:sticky;top:0;z-index:80;background:#FFC81F;color:#1A1300;
/* ★ LƯỢT 79 — đáy của clamp() là 8,5px: trên màn 360px nó tính ra 9,2px,
* thủng sàn 12px của dự án. `clamp()` che cái sai rất giỏi vì trong mã nó
* trông như đã lo cho mọi bề rộng — chỉ khi ĐO ở đúng 360px mới lộ. */
font:700 clamp(12px,2.55vw,12.5px)/28px var(--ama-font-head);text-align:center;
letter-spacing:0;height:28px;overflow:hidden;padding:0 6px;white-space:nowrap}
@media (min-width:600px){.staging-banner{letter-spacing:.02em}}
.staging-banner+.ama-header{top:28px}
/* ── 29. HIỆN DẦN KHI CUỘN ────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);
transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
/* ── 30. TIỆN ÍCH ─────────────────────────────────────────────────────────── */
.text-center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}
.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}
.muted{color:var(--text-soft)}
.nowrap{white-space:nowrap}
.hide-mobile{display:none}
@media (min-width:768px){.hide-mobile{display:block}.hide-desktop{display:none}}
/* ── 31. IN ẤN — A4 ───────────────────────────────────────────────────────── */
@media print{
@page{size:A4 portrait;margin:12mm}
html,body{background:#fff!important;color:#000!important;font-size:10.5pt;
padding-bottom:0!important}
.no-print,.ama-header,.ama-tabbar,.ama-drawer,.chat-fab,.ama-footer,
.staging-banner,.toast-wrap,.modal,.lang-switch,.btn-icon{display:none!important}
.print-only{display:block!important}
.ama-section{padding:0!important}
.ama-container{max-width:100%!important;padding:0!important}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
a[href^="#"]::after,a[href^="tel"]::after,a[href^="mailto"]::after{content:""}
.page-break{break-after:page}
table,tr,.ama-card,.price,.agent{break-inside:avoid}
h1,h2,h3{break-after:avoid}
*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
box-shadow:none!important}
.hero{background:#fff!important;color:#000!important}
.hero h1,.ama-section--dark h2,.ama-section--dark h3{color:#000!important}
.ama-section--dark{background:#fff!important;color:#000!important}
.about__body{color:#000!important}
}
.print-only{display:none}
/* ── 32. TRANG IN A4 CHUYÊN DỤNG ──────────────────────────────────────────── */
.a4{width:210mm;min-height:297mm;margin:0 auto;background:#fff;color:#001848;
padding:12mm;font:10.5pt/1.45 var(--ama-font-body);box-shadow:var(--sh-3)}
.a4 *{color:inherit}
.a4__head{display:flex;align-items:center;gap:6mm;border-bottom:1.2mm solid #0048C0;
padding-bottom:4mm;margin-bottom:5mm}
.a4__mark{width:20mm;height:20mm;border-radius:4mm;background:var(--ama-grad-hero);color:#fff;
display:flex;align-items:center;justify-content:center;font:800 9mm/1 var(--ama-font-head);
flex:none;white-space:nowrap}
.a4__mark span{color:#FF8A2B}
.a4__title{font:800 7mm/1.1 var(--ama-font-head);letter-spacing:-.02em;margin:0}
.a4__tag{font:700 2.6mm/1 var(--ama-font-head);letter-spacing:.24em;color:#B4490A;
text-transform:uppercase;margin-top:1.5mm}
.a4__claim{font:800 5.4mm/1.3 var(--ama-font-head);text-align:center;margin:0 0 4mm;
text-wrap:balance}
.a4__penta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2mm;text-align:center;
padding:3mm 0;border-top:.3mm solid #DDE3EC;border-bottom:.3mm solid #DDE3EC;margin-bottom:4mm}
.a4__penta div{font:800 2.7mm/1.3 var(--ama-font-head);letter-spacing:.06em}
.a4__penta span{display:block;font-size:5mm;margin-bottom:1mm}
.a4__cols{display:grid;grid-template-columns:1.15fr .85fr;gap:6mm;margin-bottom:4mm}
.a4 h3{font:800 3.6mm/1.2 var(--ama-font-head);letter-spacing:.1em;text-transform:uppercase;
color:#0048C0;margin:0 0 2.5mm}
.a4__row{display:flex;justify-content:space-between;gap:3mm;padding:1.6mm 0;
border-bottom:.2mm dotted #DDE3EC;font-size:3.1mm}
.a4__row:last-child{border-bottom:0}
.a4__price{border:.4mm solid #F26A1B;border-radius:2.5mm;padding:3mm;margin-bottom:2.5mm}
.a4__price b{font-size:4.4mm;color:#B4490A}
.a4__steps{background:#F0F5FE;border-radius:2.5mm;padding:3.5mm;margin-bottom:4mm;
font-size:3.2mm;line-height:1.6}
.a4__ticks{display:grid;grid-template-columns:1fr 1fr;gap:1.5mm 4mm;font-size:3.1mm;
margin-bottom:4mm}
.a4__ticks span::before{content:"✓ ";color:#0F7A4C;font-weight:800}
.a4__foot{display:flex;align-items:center;gap:5mm;border-top:1.2mm solid #001848;
padding-top:3.5mm;margin-top:auto}
.a4__qr{width:26mm;height:26mm;flex:none;border:.3mm solid #DDE3EC;border-radius:2mm;
display:grid;place-items:center;background:#fff}
.a4__contact{font-size:3.2mm;line-height:1.7}
.a4__contact b{font-size:3.8mm}
@media print{.a4{width:auto;min-height:0;margin:0;padding:0;box-shadow:none}
body{background:#fff}}
@media (max-width:230mm){.a4{width:100%;padding:var(--sp-5)}}
/* ══════════════════════════════════════════════════════════════════════════
33. TRÌNH HƯỚNG DẪN 6 BƯỚC — Phiếu thông tin tiệm (Amatay-Spec § 10)
★ Một bộ CSS cho CẢ máy tính và di động. Không có bản riêng cho di động.
══════════════════════════════════════════════════════════════════════════ */
.wiz{max-width:940px;margin:0 auto}
/* Thanh tiến độ dính NGAY DƯỚI thanh điều hướng (cao 64px), không nấp sau nó.
Có dải BẢN CHẠY THỬ thì thanh điều hướng tụt xuống 28px, thanh này tụt theo. */
.wiz__top{position:sticky;top:64px;z-index:40;background:var(--bg);
padding:var(--sp-3) 0 var(--sp-3);border-bottom:1px solid var(--border);
margin-bottom:var(--sp-6)}
.staging-banner~main .wiz__top{top:92px}
/* Chừa chỗ cho thanh nút dính đáy — ô cuối cùng của mỗi bước không bị che khuất */
/* ★ Trên điện thoại có HAI thanh dính ở đáy màn hình chồng lên nhau:
thanh nút của trình hướng dẫn (.wiz__nav, cao ~102px) nằm trên
thanh thực đơn dưới cùng (.ama-tabbar, cao 64px).
Đo trên máy 390×844: ô cuối của bước 1 (booking_link) có mép dưới ở
681px trong khi thanh nút bắt đầu ở 678px — cuộn hết cỡ vẫn bị che,
không cách nào nhìn thấy trọn ô. Phải chừa đủ chỗ cho CẢ HAI thanh. */
@media (max-width:599px){
.wiz__panel{padding-bottom:calc(var(--sp-10) + 118px + env(safe-area-inset-bottom))}
}
.wiz__toprow{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:9px}
.wiz__stepno{font:700 13px/1 var(--ama-font-head);color:var(--ama-chu-lien-ket);flex:none}
.wiz__pct{margin-left:auto;font:700 13px/1 var(--ama-font-head);
color:var(--ama-orange-500);flex:none}
.wiz__save{font-size:12px;color:var(--text-soft);flex:none;transition:opacity var(--dur)}
.wiz__save.is-off{opacity:0}
/* Dải chấm bước — cuộn ngang được trên máy nhỏ, không kéo trang tràn */
.wiz__rail{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
-webkit-overflow-scrolling:touch;padding-bottom:2px}
.wiz__rail::-webkit-scrollbar{display:none}
.wiz__dot{flex:1 0 auto;min-width:0;display:flex;align-items:center;gap:7px;
padding:7px 11px;border-radius:var(--r-pill);border:2px solid var(--border);
background:var(--surface);font:600 13px/1.2 var(--ama-font-head);color:var(--text-soft);
cursor:pointer;white-space:nowrap;transition:all var(--dur) var(--ease)}
.wiz__dot i{font-style:normal;width:20px;height:20px;flex:none;border-radius:50%;
display:grid;place-items:center;background:var(--ama-gray-100);
font:700 12px/1 var(--ama-font-head);color:var(--text-soft)}
.wiz__dot.is-on{border-color:var(--ama-blue-600);background:var(--ama-blue-050);
color:var(--ama-navy-800)}
.wiz__dot.is-on i{background:var(--ama-blue-600);color:#fff}
.wiz__dot.is-done i{background:var(--ama-success);color:#fff}
.wiz__dot span{display:none}
@media (min-width:768px){.wiz__dot span{display:inline}}
/* Tấm bước */
.wiz__panel[hidden]{display:none}
.wiz__panel{animation:wizIn var(--dur) var(--ease)}
@keyframes wizIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wiz__head{margin-bottom:var(--sp-5)}
.wiz__head h2{font-size:clamp(21px,4.4vw,29px);margin:0 0 5px;display:flex;
align-items:center;gap:10px;flex-wrap:wrap}
.wiz__head p{color:var(--text-soft);margin:0;font-size:15px}
.wiz__note{background:var(--ama-blue-050);border-left:4px solid var(--ama-blue-600);
border-radius:0 var(--r-md) var(--r-md) 0;padding:11px 15px;font-size:14px;
color:var(--text);margin-bottom:var(--sp-5)}
/* Lưới 12 cột — dùng chung desktop/tablet/mobile, chỉ đổi số cột */
.wiz-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
gap:0 var(--sp-4)}
.wiz-grid>.field{grid-column:span 12}
/* Phải viết .wiz-grid>.f-d6 chứ không phải .f-d6: luật nền .wiz-grid>.field
có độ ưu tiên (0,2,0), một lớp đơn (0,1,0) không đè nổi — cả biểu mẫu sẽ
rơi về 1 cột trên máy tính mà không báo lỗi gì. */
/* ★★★ LƯỢT 73 — KHỔ ĐIỆN THOẠI, thứ lược đồ đã khai từ đầu mà CSS chưa từng
nghe. Xem chú thích ở `$cls` trong `app/views/site/register.php`.
★★ DƯỚI 380px THÌ MỌI Ô CHIẾM CẢ DÒNG, bất kể lược đồ khai gì. Trên một
màn hình 320px, hai ô cạnh nhau còn ~140px mỗi cái — chưa đủ cho một nhãn
tiếng Việt có dấu, và ngón tay cái bấm vào đúng ô mình muốn là chuyện may
rủi. Đây là chỗ CSS được quyền không nghe lược đồ, và nó phải nói ra vì sao.
★ Khoảng 380–599px mới áp `f-m*`: đó là dải của gần như mọi điện thoại đang
dùng, và ở đó “Tiểu bang | Mã ZIP” nằm cạnh nhau đọc tự nhiên hơn hẳn hai
dòng rời. */
@media (min-width:380px) and (max-width:599px){
.wiz-grid>.f-m1{grid-column:span 1} .wiz-grid>.f-m2{grid-column:span 2} .wiz-grid>.f-m3{grid-column:span 3} .wiz-grid>.f-m4{grid-column:span 4} .wiz-grid>.f-m5{grid-column:span 5} .wiz-grid>.f-m6{grid-column:span 6} .wiz-grid>.f-m7{grid-column:span 7} .wiz-grid>.f-m8{grid-column:span 8} .wiz-grid>.f-m9{grid-column:span 9} .wiz-grid>.f-m10{grid-column:span 10} .wiz-grid>.f-m11{grid-column:span 11} .wiz-grid>.f-m12{grid-column:span 12}}
@media (min-width:600px){
.wiz-grid>.f-t1{grid-column:span 1} .wiz-grid>.f-t2{grid-column:span 2} .wiz-grid>.f-t3{grid-column:span 3} .wiz-grid>.f-t4{grid-column:span 4} .wiz-grid>.f-t5{grid-column:span 5} .wiz-grid>.f-t6{grid-column:span 6} .wiz-grid>.f-t7{grid-column:span 7} .wiz-grid>.f-t8{grid-column:span 8} .wiz-grid>.f-t9{grid-column:span 9} .wiz-grid>.f-t10{grid-column:span 10} .wiz-grid>.f-t11{grid-column:span 11} .wiz-grid>.f-t12{grid-column:span 12}}
@media (min-width:1024px){
.wiz-grid>.f-d1{grid-column:span 1} .wiz-grid>.f-d2{grid-column:span 2} .wiz-grid>.f-d3{grid-column:span 3} .wiz-grid>.f-d4{grid-column:span 4} .wiz-grid>.f-d5{grid-column:span 5} .wiz-grid>.f-d6{grid-column:span 6} .wiz-grid>.f-d7{grid-column:span 7} .wiz-grid>.f-d8{grid-column:span 8} .wiz-grid>.f-d9{grid-column:span 9} .wiz-grid>.f-d10{grid-column:span 10} .wiz-grid>.f-d11{grid-column:span 11} .wiz-grid>.f-d12{grid-column:span 12}}
.field[hidden]{display:none}
/* Lưới thẻ tick — luôn minmax(0,1fr) để không tràn ở 320px */
.card-grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr))}
.card-grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.sub-label{font:600 13px/1.3 var(--ama-font-head);color:var(--text-soft);
margin:var(--sp-3) 0 7px;text-transform:uppercase;letter-spacing:.03em}
/* Nút nói 🎤 */
.ta-wrap{position:relative}
.mic{position:absolute;right:9px;bottom:9px;width:42px;height:42px;border-radius:50%;
border:2px solid var(--border);background:var(--surface);font-size:19px;cursor:pointer;
display:grid;place-items:center;transition:all var(--dur) var(--ease)}
.mic:hover{border-color:var(--ama-blue-600)}
.mic.is-rec{background:var(--ama-danger);border-color:var(--ama-danger);color:#fff;
animation:micPulse 1.1s infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(210,43,43,.55)}
70%{box-shadow:0 0 0 11px rgba(210,43,43,0)}}
.counter{font-size:12px;color:var(--text-soft);text-align:right;margin-top:3px}
.counter.is-over{color:var(--ama-danger-700);font-weight:700}
/* Hàng kênh online */
.chan{border:2px solid var(--border);border-radius:var(--r-md);background:var(--surface);
margin-bottom:10px;overflow:hidden;transition:border-color var(--dur) var(--ease)}
.chan.is-on{border-color:var(--ama-blue-600)}
.chan__head{display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer;
min-height:56px}
.chan__head input{position:absolute;opacity:0;width:0;height:0}
.chan__tick{width:24px;height:24px;flex:none;border-radius:7px;border:2px solid var(--border);
display:grid;place-items:center;font-size:14px;color:transparent;
transition:all var(--dur) var(--ease)}
.chan.is-on .chan__tick{background:var(--ama-blue-600);border-color:var(--ama-blue-600);
color:#fff}
.chan__ico{font-size:21px;flex:none;line-height:1}
.chan__txt{flex:1;min-width:0}
.chan__name{font:600 15px/1.3 var(--ama-font-head);display:block}
.chan__sub{font-size:12.5px;color:var(--text-soft);display:block;margin-top:1px}
.chan__star{flex:none;font-size:12px;font-weight:700;color:var(--ama-orange-600);
background:var(--ama-orange-050);border-radius:var(--r-pill);padding:3px 9px;
white-space:nowrap}
.chan__body{padding:0 13px 13px;border-top:1px dashed var(--border);margin-top:2px;
padding-top:13px}
.chan__body[hidden]{display:none}
.chan__acc{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.chan__acc label{cursor:pointer}
.chan__acc input{position:absolute;opacity:0;width:0;height:0}
.chan__acc span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
border:2px solid var(--border);border-radius:var(--r-pill);font:600 13px/1 var(--ama-font-head);
color:var(--text-soft);background:var(--surface);transition:all var(--dur) var(--ease)}
.chan__acc input:checked+span{border-color:var(--ama-orange-500);
background:var(--ama-orange-050);color:var(--ama-orange-600)}
/* Cam kết bảo mật 3 điều */
.pledge{background:var(--ama-blue-050);border:2px solid var(--ama-blue-100);
border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5)}
.pledge h3{font-size:16px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.pledge ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pledge li{font-size:14px;line-height:1.5;padding-left:26px;position:relative}
.pledge li::before{content:"🔒";position:absolute;left:0;top:0}
/* Bảng khuyến mãi — cuộn ngang trong chính nó, trang không bao giờ tràn */
.promo-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
border:2px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.promo{width:100%;min-width:680px;border-collapse:collapse}
.promo th{font:600 12.5px/1.3 var(--ama-font-head);text-align:left;padding:9px 10px;
background:var(--ama-gray-050);color:var(--text-soft);border-bottom:2px solid var(--border);
text-transform:uppercase;letter-spacing:.03em}
.promo td{padding:6px 7px;border-bottom:1px solid var(--border);vertical-align:middle}
.promo tr:last-child td{border-bottom:0}
.promo .input{min-height:42px;font-size:15px;border-width:1px}
.promo__del{width:38px;height:38px;border:0;background:transparent;cursor:pointer;
border-radius:var(--r-sm);font-size:16px;color:var(--ama-gray-400)}
.promo__del:hover{background:var(--ama-gray-100);color:var(--ama-do-chu)}
.skip-box{border:2px dashed var(--border);border-radius:var(--r-md);padding:14px;
margin-bottom:var(--sp-4)}
/* Giờ mở cửa — ô nhập + nút gợi ý nhanh */
.hours-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.hours-quick button{border:1px solid var(--border);background:var(--surface);
border-radius:var(--r-pill);padding:6px 11px;font:600 12.5px/1 var(--ama-font-head);
color:var(--text-soft);cursor:pointer;min-height:34px}
.hours-quick button:hover{border-color:var(--ama-blue-600);color:var(--ama-chu-lien-ket)}
/* Bảng ký tên */
.sigpad{border:2px dashed var(--border);border-radius:var(--r-md);background:var(--surface);
position:relative;overflow:hidden}
.sigpad canvas{display:block;width:100%;height:190px;touch-action:none;cursor:crosshair}
.sigpad__hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
color:var(--ama-gray-400);font-size:14px}
.sigpad.is-signed .sigpad__hint{display:none}
.sigpad__bar{display:flex;justify-content:flex-end;gap:8px;padding:8px;
border-top:1px dashed var(--border)}
/* Ô đồng ý uỷ quyền */
.consent{border:2px solid var(--ama-orange-500);background:var(--ama-orange-050);
border-radius:var(--r-lg);padding:var(--sp-5);cursor:pointer;display:flex;gap:13px;
align-items:flex-start}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent__tick{width:28px;height:28px;flex:none;border-radius:8px;border:2px solid var(--ama-orange-500);
background:#fff;display:grid;place-items:center;font-size:17px;color:transparent;
transition:all var(--dur) var(--ease)}
.consent input:checked~.consent__tick{background:var(--ama-orange-500);color:#fff}
.consent__txt{font-size:14.5px;line-height:1.6}
.consent[aria-invalid="true"]{border-color:var(--ama-danger);background:#FDECEC}
/* Bước 6 — xem lại */
.review{display:grid;gap:var(--sp-4)}
.review__sec{border:2px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
overflow:hidden}
.review__head{display:flex;align-items:center;gap:10px;padding:12px 15px;
background:var(--ama-gray-050);border-bottom:1px solid var(--border)}
.review__head b{flex:1;min-width:0;font:700 15px/1.3 var(--ama-font-head)}
.review__rows{padding:6px 15px 12px}
.review__row{display:flex;gap:var(--sp-4);padding:8px 0;border-bottom:1px dotted var(--border);
font-size:14.5px;flex-wrap:wrap}
.review__row:last-child{border-bottom:0}
.review__row dt{flex:0 0 190px;min-width:0;color:var(--text-soft);margin:0}
.review__row dd{flex:1 1 200px;min-width:0;margin:0;font-weight:600;
overflow-wrap:anywhere}
.review__empty{padding:14px 15px;color:var(--text-soft);font-size:14px}
.meter{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
border:2px solid var(--ama-blue-100);background:var(--ama-blue-050);
border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5)}
/* Con số phần trăm to nhất trang tra cứu — cùng lý do như trên (2,1:1 ở chế độ Tối). */
.meter__num{font:800 40px/1 var(--ama-font-head);color:var(--ama-chu-lien-ket);flex:none}
.meter__txt{flex:1 1 220px;min-width:0;font-size:14px;color:var(--text-soft)}
.meter .progress{width:100%;margin-top:8px}
/* Thanh điều hướng dưới cùng */
.wiz__nav{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:2px solid var(--border)}
.wiz__nav .grow{flex:1 1 auto;min-width:0}
@media (max-width:599px){
.wiz__nav{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));
background:var(--bg);padding-bottom:var(--sp-3);z-index:30;margin-top:var(--sp-6)}
.wiz__nav .btn-cta,.wiz__nav .btn-primary{flex:1 1 100%}
}
/* Trang cảm ơn & tra cứu */
.done{text-align:center;max-width:640px;margin:0 auto}
.done__ico{width:92px;height:92px;margin:0 auto var(--sp-5);border-radius:50%;
background:var(--ama-success-100);display:grid;place-items:center;font-size:44px}
.done__code{font:800 27px/1 var(--ama-font-mono);color:var(--ama-navy-800);
letter-spacing:.06em;background:var(--ama-gray-050);border:2px dashed var(--border);
border-radius:var(--r-md);padding:15px;margin:var(--sp-5) 0;overflow-wrap:anywhere}
.tl{list-style:none;margin:var(--sp-6) 0 0;padding:0;text-align:left}
.tl li{position:relative;padding:0 0 var(--sp-6) 34px;border-left:2px solid var(--border);
margin-left:11px}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-9px;top:2px;width:16px;height:16px;
border-radius:50%;background:var(--ama-gray-200);border:3px solid var(--bg)}
.tl li.is-done::before{background:var(--ama-success)}
.tl li.is-now::before{background:var(--ama-orange-500);
box-shadow:0 0 0 4px var(--ama-orange-050)}
.tl b{display:block;font:700 15px/1.4 var(--ama-font-head)}
.tl small{color:var(--text-soft);font-size:13px}
/* Trên máy nhỏ, nút Chat tròn nằm đè lên nút "Tiếp tục" của biểu mẫu —
trang có trình hướng dẫn thì đẩy nút Chat lên trên thanh nút. */
@media (max-width:599px){body.has-wiz .chat-fab{bottom:calc(146px + env(safe-area-inset-bottom))}}
.done__lead{font-size:17px;line-height:1.7;color:var(--text-soft);max-width:54ch;
margin:var(--sp-3) auto var(--sp-4)}
/* Thẻ tick trong cùng một hàng phải cao bằng nhau — ô nào chữ dài xuống 2 dòng
mà ô bên cạnh vẫn 1 dòng thì hàng trông so le, rất khó nhìn trên máy tính. */
.card-grid>.checkbox-card{height:100%}
.card-grid>.checkbox-card>span{height:100%}
/* Bảng khuyến mãi trên điện thoại: 5 cột trong 390px là không đọc nổi.
Dưới 600px mỗi dòng thành một thẻ dựng đứng, có nhãn cho từng ô —
chủ tiệm điền bằng ngón tay, không phải kéo ngang tìm cột. */
.promo__del-txt{display:none}
@media (max-width:599px){
.promo-wrap{overflow:visible;border:0;background:transparent}
.promo{min-width:0;display:block}
.promo thead{display:none}
.promo tbody{display:grid;gap:12px}
.promo tr{display:block;border:2px solid var(--border);border-radius:var(--r-md);
background:var(--surface);padding:12px 13px}
.promo td{display:block;padding:0 0 10px;border:0}
.promo td:last-child{padding-bottom:0;text-align:right}
.promo td[data-label]::before{content:attr(data-label);display:block;
font:600 12px/1.3 var(--ama-font-head);color:var(--text-soft);
text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.promo td[data-label=""]::before{content:none}
.promo .input{min-height:46px;border-width:2px}
.promo__del{width:auto;padding:0 13px;min-height:40px;display:inline-flex;
align-items:center;gap:7px;border:1px solid var(--border);color:var(--text-soft)}
.promo__del-txt{display:inline;font:600 13px/1 var(--ama-font-head)}
}
/* ══════════════════════════════════════════════════════════════════════════
THÀNH PHẦN DÙNG CHUNG — lọc nhanh · nhãn trạng thái · hạn xử lý ·
phân trang · màn hình trống.
★ Trước đây những khối này nằm trong admin.css, nên cổng chủ tiệm (chỉ nạp
ama.css + portal.css) hiện ra chữ trần: "Đang xử lý3 Đã xong3" thay vì
những viên thuốc bấm được. Chuyển sang đây để CẢ HAI vỏ dùng chung một
bản duy nhất — sửa một chỗ là cả hệ thống đổi theo.
══════════════════════════════════════════════════════════════════════════ */
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:var(--sp-3) var(--sp-4)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;
border-radius:var(--r-pill);border:2px solid var(--border);background:var(--surface);
font:600 13.5px/1 var(--ama-font-head);color:var(--text-soft);cursor:pointer;
text-decoration:none!important;white-space:nowrap;transition:all var(--dur) var(--ease)}
/* ★ TRẠNG THÁI DI CHUỘT CŨNG PHẢI ĐỌC ĐƯỢC Ở CHẾ ĐỘ TỐI (Lượt 22).
--ama-blue-600 là xanh ĐẬM CỐ ĐỊNH, không lật theo chế độ. Đặt nó làm màu
chữ trên nền tối cho 2,21:1 — nhãn thẻ lọc gần như biến mất đúng lúc người
ta đang trỏ vào nó.
Bốn lượt quét trợ năng trước đều chấm sạch, vì con trỏ chuột chưa bao giờ
tình cờ dừng trên một thẻ lọc: MÁY ĐO CHỈ ĐO ĐƯỢC TRẠNG THÁI NÓ VÔ TÌNH ĐẶT
PHẦN TỬ VÀO. Nay bộ quét có bước di chuột riêng. */
/* :not(.is-on) — thẻ ĐANG CHỌN có nền xanh và chữ trắng; để :hover đè lên
thì chữ trắng biến thành xanh nhạt trên nền xanh: 2,62:1. Bản vá đầu của
chính Lượt 22 đã tạo ra đúng lỗi đó, và bộ quét mới bắt được ngay. */
.chip:not(.is-on):hover{border-color:var(--ama-blue-400);color:var(--ama-chu-lien-ket)}
.chip.is-on{background:var(--ama-blue-600);border-color:var(--ama-blue-600);color:#fff}
.chip--danger{border-color:#F3C9C9;color:var(--ama-danger-700)}
.chip--danger.is-on{background:var(--ama-danger);border-color:var(--ama-danger);color:#fff}
.chip--warn{border-color:#F3E0A8;color:var(--ama-warning-700)}
/* ★ KHÔNG viết cứng màu chữ trên nền cảnh báo. #241C00 đặt trên #996E00 chỉ
đạt 3,69:1 — dưới chuẩn 4,5:1 — và thẻ lọc "Hợp đồng sắp hết" đang chọn là
thẻ người quản lý bấm nhiều nhất. Tính từ chính màu nền thì không lệch. */
.chip--warn.is-on{background:var(--ama-warning);border-color:var(--ama-warning);
color:var(--ama-chu-tren-warning)}
.chip--ok{border-color:#B6E4CE;color:var(--ama-success-700)}
.chip--ok.is-on{background:var(--ama-success);border-color:var(--ama-success);color:#fff}
/* opacity:.8 kéo tương phản xuống 3,67:1 — đổi sang màu đã tính sẵn */
/* Con số trong thẻ lọc PHẢI theo màu chữ của thẻ: thẻ trắng thì chữ đậm,
thẻ đang chọn (nền xanh) thì chữ trắng. Đặt cứng một màu là hỏng một trong
hai trạng thái; opacity .8 như bản đầu thì cả hai đều mờ dưới chuẩn. */
.chip__n{font-size:12px;color:inherit;font-weight:700} /* Không dùng opacity ở đây: mờ đi 8% là tỉ lệ tương phản tụt xuống dưới
chuẩn ngay, mà con số trong thẻ lọc lại là thứ người ta nhìn đầu tiên. */
.st{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);
font:700 12px/1.5 var(--ama-font-head);white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.st--new{background:var(--ama-blue-100);color:var(--ama-chu-lien-ket)}
.st--contacted{background:#E4E9F2;color:#3A4A66}
.st--info_pending{background:var(--ama-warning-100);color:var(--ama-warning-700)}
.st--qualified{background:#E0E9FF;color:var(--ama-blue-700)}
.st--proposal_sent{background:var(--ama-orange-100);color:var(--ama-orange-600)}
.st--won{background:var(--ama-success-100);color:var(--ama-success-700)}
.st--lost{background:var(--ama-danger-100);color:var(--ama-danger-700)}
.st--spam{background:var(--ama-gray-100);color:var(--ama-gray-600)}
/* Trung tính: "chưa rõ / không còn" — KHÔNG dùng màu đỏ, vì đỏ nghĩa là hỏng */
.st--na{background:var(--ama-gray-100);color:var(--ama-gray-600)}
.st--todo{background:var(--ama-blue-100);color:var(--ama-chu-lien-ket)}
.st--doing{background:var(--ama-orange-100);color:var(--ama-orange-600)}
.st--blocked{background:var(--ama-danger-100);color:var(--ama-danger-700)}
.st--review{background:var(--ama-warning-100);color:var(--ama-warning-700)}
.st--done{background:var(--ama-success-100);color:var(--ama-success-700)}
.st--cancelled{background:var(--ama-gray-100);color:var(--ama-gray-600)}
/* Hạn gọi — quá hạn phải đập vào mắt */
.sla{font:600 13px/1.35 var(--ama-font-head);white-space:nowrap;max-width:100%}
.sla--late{color:var(--ama-danger-700);font-weight:800}
.sla--soon{color:var(--ama-orange-600)}
/* ★ Hẹn ĐÚNG HÔM NAY — chưa trễ, nhưng hết hôm nay là trễ. Phải khác hẳn cả
"quá hẹn" (đỏ) lẫn "hẹn ngày kia" (xám nhạt), nếu không thì người trực đọc
lướt sẽ xếp nó vào nhóm còn thong thả. Dùng màu chữ, KHÔNG dùng opacity. */
.sla--due{color:var(--ama-orange-600);font-weight:800}
.sla--ok{color:var(--text-soft)}
.sla--done{color:var(--ama-success-700)}
.pager{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
margin-top:var(--sp-4);font-size:14px;color:var(--text-soft)}
.pager__n{display:flex;gap:5px;flex-wrap:wrap;flex:1 1 auto}
.pager a,.pager span.pg{min-width:38px;height:38px;padding:0 10px;border-radius:9px;
border:1px solid var(--border);background:var(--surface);display:inline-flex;
align-items:center;justify-content:center;text-decoration:none;color:var(--text);
font:600 14px/1 var(--ama-font-head)}
.pager a:hover{border-color:var(--ama-blue-600);color:var(--ama-chu-lien-ket)}
.pager .is-on{background:var(--ama-blue-600);border-color:var(--ama-blue-600);color:#fff}
.pager .gap{border:0;background:transparent}
.empty{text-align:center;padding:var(--sp-16) var(--sp-5);color:var(--text-soft)}
.empty__i{font-size:46px;margin-bottom:var(--sp-3)}
.empty b{display:block;font:700 17px/1.4 var(--ama-font-head);color:var(--text);
margin-bottom:5px}
/* ══════════════════════════════════════════════════════════════════════════
VÙNG CHỌN TỆP — dùng chung cho cổng chủ tiệm VÀ hậu đài.
★ Trước đây khối này chỉ có trong portal.css, mà hậu đài không nạp tệp đó:
trang "Nhập kho kiến thức từ Excel" hiện ra một khung trần, và ô bị position:absolute mà không có mốc neo nên trôi ra khỏi màn
hình, đẩy cả trang rộng thêm 5px ở khổ 360–390px.
══════════════════════════════════════════════════════════════════════════ */
.drop{position:relative;border:2px dashed var(--border);border-radius:var(--r-lg);
padding:var(--sp-6);text-align:center;background:var(--surface);overflow:hidden;
transition:all var(--dur) var(--ease)}
.drop.is-over{border-color:var(--ama-blue-600);background:var(--ama-blue-050)}
.drop__i{font-size:38px;margin-bottom:var(--sp-2)}
.drop b{display:block;font:700 16px/1.4 var(--ama-font-head);margin-bottom:4px}
.drop small{color:var(--text-soft);font-size:13.5px;line-height:1.5;display:block}
/* Giấu ô chọn tệp mà KHÔNG dùng display:none (máy đọc màn hình bỏ qua) và
không để nó trôi ra ngoài khung: neo vào .drop, kích thước 1px, cắt sạch. */
.drop input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;
opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.drop label{display:inline-flex;margin-top:var(--sp-4)}
.picked{display:grid;gap:8px;margin-top:var(--sp-4)}
.picked__i{display:flex;align-items:center;gap:11px;padding:11px 13px;
border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.picked__i b{flex:1;min-width:0;font:600 14.5px/1.35 var(--ama-font-head);
overflow-wrap:anywhere}
.picked__i small{color:var(--text-soft);font-size:12.5px;flex:none}
.picked__x{border:0;background:transparent;cursor:pointer;font-size:16px;
width:34px;height:34px;flex:none;border-radius:8px;color:var(--ama-gray-400)}
.picked__x:hover{background:var(--ama-gray-100);color:var(--ama-danger)}
/* ═══ TRANG VĂN BẢN (Hỏi-Đáp · Bảo mật · Quyền riêng tư · Điều khoản) ═══════
Chữ dài phải dễ đọc trên điện thoại: dòng không quá rộng, khoảng cách thoáng,
tiêu đề bám dính khi cuộn để người đọc luôn biết mình đang ở mục nào. */
.doc{padding:var(--sp-10) 0 var(--sp-16)}
.doc__head{max-width:820px;margin:0 auto var(--sp-8);padding:0 var(--sp-5)}
.doc__head h1{font-size:clamp(26px,4.2vw,38px);line-height:1.22;margin:0 0 var(--sp-3)}
.doc__meta{color:var(--text-soft);font-size:14.5px;margin:0}
.doc__body{max-width:820px;margin:0 auto;padding:0 var(--sp-5);font-size:16.5px;line-height:1.75}
.doc__body h2{font-size:21px;line-height:1.3;margin:var(--sp-10) 0 var(--sp-3);
padding-top:var(--sp-3);border-top:1px solid var(--border);color:var(--ama-navy-800)}
.doc__body h2:first-of-type{border-top:0;padding-top:0;margin-top:var(--sp-6)}
/* ★ KHÔNG dùng --ama-navy-700: biến đó KHÔNG lật ở chế độ Tối (chỉ -800 lật),
nên tiêu đề nhỏ hoá ra xanh đen trên nền xanh đen — 1,3:1, gần như vô hình. */
.doc__body h3{font-size:17px;margin:var(--sp-6) 0 var(--sp-2);color:var(--ama-navy-800)}
.doc__body p{margin:0 0 var(--sp-4);color:var(--text-soft)}
.doc__body strong,.doc__body b{color:var(--ama-navy-800)}
.doc__body ul,.doc__body ol{margin:0 0 var(--sp-4);padding-left:22px;color:var(--text-soft)}
.doc__body li{margin-bottom:var(--sp-2)}
/* Liên kết nằm giữa đoạn văn phải phân biệt được KHÔNG CHỈ bằng màu —
người mù màu (khoảng 1 trong 12 nam giới) không thấy khác biệt nào. */
.doc__body a{color:var(--ama-chu-lien-ket);text-decoration:underline;
text-underline-offset:2px}
.doc__note{background:var(--ama-blue-050);border:1px solid var(--ama-blue-100);
border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-6)}
.doc__note p:last-child{margin-bottom:0}
.doc__warn{background:var(--ama-orange-050);border:1px solid var(--ama-orange-100)}
.doc__toc{background:var(--ama-gray-050);border:1px solid var(--border);border-radius:var(--r-md);
padding:var(--sp-4) var(--sp-5);margin:0 0 var(--sp-8)}
.doc__toc ol{margin:0;padding-left:20px;columns:2;column-gap:var(--sp-6)}
.doc__toc li{margin-bottom:4px;break-inside:avoid}
@media (max-width:640px){.doc__toc ol{columns:1}}
.doc__tbl{width:100%;border-collapse:collapse;margin:0 0 var(--sp-6);font-size:15px}
.doc__tbl th,.doc__tbl td{border:1px solid var(--border);padding:10px 12px;text-align:left;
vertical-align:top}
.doc__tbl th{background:var(--ama-gray-050);font-weight:700;color:var(--ama-navy-800)}
.doc__tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Hỏi–Đáp: mỗi câu là một khối bấm mở */
.qa{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
margin-bottom:var(--sp-3);overflow:hidden}
.qa summary{cursor:pointer;padding:var(--sp-4) var(--sp-5);font-weight:650;font-size:16.5px;
color:var(--ama-navy-800);list-style:none;display:flex;gap:12px;align-items:flex-start}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"+";color:var(--ama-orange-500);font-weight:800;font-size:19px;
line-height:1.3;flex:none}
.qa[open] summary::before{content:"−"}
.qa summary:hover{background:var(--ama-gray-050)}
.qa__a{padding:0 var(--sp-5) var(--sp-4) calc(var(--sp-5) + 24px);color:var(--text-soft)}
/* Chữ cảnh báo trên nền sáng. --ama-warning được chọn để CHỮ TRẮNG đọc được
TRÊN nó; dùng chính nó làm màu chữ trên nền trắng thì chỉ đạt 4,19:1.
Bậc đậm hơn dành riêng cho chữ. */
.canh-bao-chu{color:var(--ama-warning-700);font-weight:600}
/* Liên kết nằm GIỮA một câu chữ: phải gạch chân. Chỉ đổi màu là không đủ —
người mù màu không phân biệt được đâu là chỗ bấm được, và chuẩn WCAG đòi
tương phản 3:1 giữa chữ liên kết và chữ xung quanh, điều mà xanh trên xám
nhạt (1,38:1) không đạt. */
.lg__sub a, .card__b p a, .alert a,
small a, .muted a, .tml a{text-decoration:underline;text-underline-offset:2px}
/* ── LỊCH TUẦN ĐẦU MIỄN PHÍ trên trang tra cứu (Lượt 35) ───────────────────
Chỗ DUY NHẤT một người CHƯA KÝ xem được lịch của mình. Viền và nền nhạt để
khối này nổi hẳn khỏi phần "tiến độ hồ sơ" — đây là món quà, không phải một
dòng trạng thái nữa. Đọc được ở cả nền sáng và nền tối. */
.lich-mp{margin-top:var(--sp-6);padding:var(--sp-5);border-radius:var(--r-md);
background:var(--ama-blue-050);border:1px solid var(--ama-blue-100);text-align:left}
.lich-mp__h{margin:0 0 6px;font:800 18px/1.35 var(--ama-font-head);color:var(--text)}
.lich-mp__d{margin:0 0 var(--sp-4);font-size:15px;color:var(--text)}
.lich-mp__ds{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lich-mp__o{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
padding:9px 11px;border-radius:var(--r-sm);background:var(--surface);
border:1px solid var(--border)}
.lich-mp__ngay{flex:0 0 auto;font-weight:800;font-size:14.5px;min-width:8.5em}
.lich-mp__kenh{flex:0 0 auto;font-size:14.5px}
.lich-mp__cd{flex:1 1 12em;min-width:0;font-size:14.5px;color:var(--text-soft);
overflow-wrap:anywhere}
.lich-mp__ghi{margin:var(--sp-4) 0 0;font-size:14px;color:var(--text-soft)}
/* ── CÒN THIẾU QUYỀN ĐĂNG BÀI trên trang tra cứu (Lượt 36) ─────────────────
Bước 2 của lời hứa: "mời email của chúng tôi làm Quản trị viên — 2 phút".
Khối này đứng TRÊN khối lịch vì chưa có quyền thì chưa có lịch. */
.thieu-q{margin-top:var(--sp-6);padding:var(--sp-5);border-radius:var(--r-md);
background:var(--ama-warning-100);border:1px solid #F3E0A8;text-align:left}
.thieu-q__h{margin:0 0 6px;font:800 18px/1.35 var(--ama-font-head);color:var(--text)}
.thieu-q__d,.thieu-q__mail{margin:0 0 var(--sp-3);font-size:15px;color:var(--text)}
.thieu-q__addr{font-family:var(--ama-font-mono);font-size:17px;word-break:break-all}
.thieu-q__ds{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.thieu-q__ds li{padding:8px 11px;border-radius:var(--r-sm);background:var(--surface);
border:1px solid var(--border);font-size:14.5px;overflow-wrap:anywhere}
.thieu-q__tt{display:inline-block;margin-left:4px;font-size:13px;color:var(--text-soft)}
.thieu-q__tt--do{color:var(--ama-danger-700);font-weight:600}
.thieu-q__ghi{margin:var(--sp-4) 0 0;font-size:14px;color:var(--text)}
/* ═══════════════════════════════════════════════════════════════════════════
LƯỢT 45 — NGÓN TAY VÀ CON MẮT.
★★★ ĐO ĐƯỢC TRÊN MÁY CHẠY THỬ, TRƯỚC LƯỢT NÀY (đo bằng trình duyệt thật,
ở tám bề rộng từ 320px tới 1600px):
trượt ngang ..................... 0px ở MỌI trang, MỌI bề rộng ✔
nút/liên kết nhỏ hơn 32px ....... 30 chỗ ở trang chủ (390px)
chữ nhỏ hơn 12px ................ 12 chỗ ở trang chủ
Phần khung đã tốt: không trang nào trượt ngang. Phần hỏng nằm ở hai thứ mà
máy quét trợ năng KHÔNG bắt được vì chúng không vi phạm luật nào cả —
chúng chỉ làm người dùng trượt tay và nheo mắt.
★★ HAI CHUẨN, VIẾT RA ĐỂ SAU NÀY CÒN CÃI ĐƯỢC:
· Apple HIG: vùng chạm tối thiểu 44 × 44 pt
· Google Material: 48 × 48 dp
· WCAG 2.2 (2.5.8): tối thiểu 24 × 24 CSS px — mức SÀN, không phải mức tốt
Ta lấy 44px cho MÀN HÌNH CẢM ỨNG, và 12px là cỡ chữ nhỏ nhất được phép.
★ CHỈ ÁP CHO `pointer: coarse` — tức là ngón tay. Trên máy tính có chuột,
một liên kết trong câu văn mà bị nống cao 44px sẽ phá vỡ dòng chữ. Đây là
chỗ dễ sai nhất khi “sửa cho đúng chuẩn”: áp chuẩn của ngón tay lên con
trỏ chuột thì trang xấu đi mà chẳng ai dễ bấm hơn.
═══════════════════════════════════════════════════════════════════════════ */
/* ── ① CỠ CHỮ SÀN: 12px. Dưới mức ấy thì trên điện thoại là nheo mắt. ─────── */
.ama-logo__sub{font-size:12px}
.penta__en{font-size:12px}
.chan__star{font-size:12px}
.price__flag{font-size:12px}
.map-attr{font-size:12px}
/* ── ② VÙNG CHẠM 44px CHO NGÓN TAY ───────────────────────────────────────── */
@media (pointer: coarse){
/* Liên kết đứng riêng một dòng (thực đơn, chân trang, danh sách) — nống cao
bằng đệm dọc, KHÔNG bằng chiều cao cứng: chữ dài xuống hai dòng vẫn đúng. */
.ama-nav a,
.ama-footer a,
.chan a,
.ama-menu a{
display:inline-flex; align-items:center;
min-height:44px; padding-block:4px;
}
/* Nút đổi ngôn ngữ đo được 36×26 và 40×26 — nhỏ nhất trang, mà lại là thứ
người Việt lớn tuổi bấm nhiều nhất. */
.lang-switch a, .ama-lang a, a.is-active{
min-width:44px; min-height:44px;
display:inline-flex; align-items:center; justify-content:center;
}
/* ★★★ Ô TICK: ĐÃ VIẾT MỘT LUẬT NỚI RỘNG Ở ĐÂY RỒI GỠ ĐI — GHI LẠI VÌ SAO.
*
* Vòng đầu tôi viết `input[type=checkbox]{width:22px;height:22px}` cho dễ
* bấm. Rồi đo lại và thấy 20 “ô tick 22×22” mọc lên ở trang đăng ký.
* Xem kỹ dòng 429 phía trên:
*
* .checkbox-card input{position:absolute;opacity:0;width:0;height:0}
*
* Ô tick ở đây được CỐ Ý giấu đi, và `.checkbox-card > span` đã cao 52px
* từ lâu — cả tấm thẻ mới là vùng bấm. Luật “cho dễ bấm” của tôi lôi
* những ô đã giấu ra lại, tức là phá đúng cái đang làm việc tốt.
*
* Bài học, viết ra để lượt sau khỏi làm lại: **đo trước, rồi mới sửa.**
* Một luật CSS chung chung áp lên cả trang bao giờ cũng trúng vài chỗ đã
* được nghĩ kỹ hơn nó. */
}
/* ── ③ NHỮNG CHỖ CÒN LẠI, TÌM RA BẰNG ĐO LẠI SAU KHI SỬA VÒNG MỘT ────────── */
/* ★★ VÀ MỘT ĐIỀU ĐÃ ĐO RỒI MỚI DÁM KHÔNG SỬA:
*
* Vòng đo thứ hai chỉ ra 20 “ô tick 22×22” trên trang đăng ký và mấy liên
* kết 16–18px cao nằm GIỮA CÂU VĂN. Cả hai đều KHÔNG phải lỗi:
*
* · ô tick nằm trong `label.checkbox-card` — cả tấm thẻ mới là vùng bấm,
* và tấm thẻ ấy cao hơn 44px từ lâu rồi;
* · WCAG 2.5.8 miễn trừ đúng chữ: một liên kết nằm trong một câu văn thì
* không bị đòi 24×24, vì nống nó lên là phá vỡ dòng chữ.
*
* Nống chúng lên cho “bảng điểm đẹp” là sửa cái không hỏng và làm hỏng cái
* đang tốt. Nên: sửa ĐÚNG ba chỗ dưới đây, và sửa luôn cái thước đo cho nó
* thôi đếm nhầm. */
@media (pointer: coarse){
/* Ô nhập chữ đo được cao 21px — ngón tay bấm trượt là chuyện thường ngày. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
input[type="date"], select, textarea{
min-height:44px;
}
/* Liên kết đứng riêng mà hẹp ngang (mũi tên, dấu ×, số trang). */
.ama-nav a, .ama-footer a, .chan a, .ama-menu a,
.pager a, .close, .btn-icon{ min-width:44px; justify-content:center }
}
/* Hai chỗ chữ dưới 12px còn sót, tìm bằng đo lại chứ không bằng trí nhớ. */
.hero__post-meta span{font-size:12px}
.chat__ten small{font-size:12px}
/* ═══════════════════════════════════════════════════════════════════════════
MÃ XÁC NHẬN BẰNG ẢNH (CAPTCHA)
★ Cố ý KHÔNG màu mè: không nền màu, không viền màu, không hiệu ứng. Ảnh do
máy chủ vẽ đã là xám–đen trung tính; phần khung ở đây chỉ giữ cho nó ngay
ngắn chứ không tô thêm gì.
★ Ảnh giữ nguyên nền xám nhạt ở CẢ giao diện sáng lẫn tối. Đảo màu ảnh theo
giao diện tối nghe thì hay, nhưng filter:invert làm chữ số nhoè viền và
khó đọc hẳn — mà dễ đọc mới là yêu cầu đặt ra.
★ Cỡ chữ ô nhập 20px và vùng chạm 44px: trên ngưỡng 12px và 32px mà bộ quét
trợ năng của dự án bắt lỗi, và đủ to để người lớn tuổi gõ 5 chữ số không
phải nheo mắt.
═══════════════════════════════════════════════════════════════════════════ */
.ama-captcha__row{
display:flex; align-items:center; gap:var(--sp-3);
flex-wrap:wrap; margin-bottom:var(--sp-3);
}
.ama-captcha__img{
display:block; border-radius:8px; max-width:100%; height:auto;
box-shadow:inset 0 0 0 1px var(--border);
}
.ama-captcha__new{
min-height:44px; padding:0 var(--sp-4); font-size:15px;
}
.ama-captcha__input{
max-width:11rem; text-align:center;
font-size:20px; letter-spacing:.4em; text-indent:.4em;
font-variant-numeric:tabular-nums;
}
/* Người dùng bàn phím phải thấy rõ mình đang ở đâu. */
.ama-captcha__input:focus-visible{ outline:3px solid var(--ama-blue-600); outline-offset:2px; }
@media (max-width:420px){
/* Màn hình hẹp: ảnh xuống một hàng riêng, nút không bị bóp méo. */
.ama-captcha__row{ gap:var(--sp-2); }
.ama-captcha__new{ width:100%; }
}
/* ═══════════════════════════════════════════════════════════════════════════
LƯỢT 49 — GIÁ GỐC GẠCH NGANG TRÊN THẺ GIÁ ($700 → $300)
★ Dùng thẻ `` trong HTML, không dùng `text-decoration` suông: máy đọc màn
hình phải đọc ra được rằng đây là giá CŨ, không phải giá đang bán. CSS ở
đây chỉ lo phần nhìn.
★★ Bài học Lượt 47 · 48: mọi lớp dùng ở màn hình đều khai thật, và phép thử
của Lượt 49 đếm ngược lại.
═══════════════════════════════════════════════════════════════════════════ */
.price__goc{font:600 17px/1.2 var(--ama-font-head);color:var(--text-soft);margin-bottom:2px}
.price__goc s{color:var(--ama-danger-700);text-decoration-thickness:2px}
/* ═══════════════════════════════════════════════════════════════════════════
LƯỢT 49 — HÌNH MINH HOẠ TRANG HƯỚNG DẪN CẤP QUYỀN
★ Ô CHỖ TRỐNG phải TRÔNG NHƯ một chỗ trống, không trông như một hình đã hỏng:
nền gạch chéo nhạt + một cái nhãn bằng chữ. Một khung xám trơn sẽ bị đọc
thành “ảnh không tải được”, và người ta sẽ đi tìm lỗi mạng.
★★ `max-width:100%` và `height:auto` — sale trình bày cho khách bằng điện
thoại, và một tấm ảnh chụp màn hình máy tính tràn ra ngoài ở 390px là đúng
cái lỗi Lượt 47 trả giá.
═══════════════════════════════════════════════════════════════════════════ */
.gd-anh{margin:var(--sp-4) 0 0}
.gd-anh img{display:block;max-width:100%;height:auto;border-radius:var(--r-md);
border:1px solid var(--border)}
.gd-anh__trong{display:flex;align-items:center;justify-content:center;min-height:150px;
border:2px dashed var(--ama-blue-300);border-radius:var(--r-md);
background:repeating-linear-gradient(45deg,var(--ama-blue-050),var(--ama-blue-050) 10px,
transparent 10px,transparent 20px)}
.gd-anh__nhan{font:700 13px/1.4 var(--ama-font-head);color:var(--ama-blue-700);
letter-spacing:.04em;text-transform:uppercase}
.gd-anh__ta{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-soft)}
/* ═══════════════════════════════════════════════════════════════════════════
LƯỢT 49 — TRANG HƯỚNG DẪN CẤP QUYỀN: CHẾ ĐỘ TỐI VÀ BỀ RỘNG 390px
★★★ HAI LỖI CÓ SẴN, CHƯA AI ĐO. `/guide/access` chưa từng nằm trong bộ quét
trợ năng nào; bộ lái Lượt 49 là thứ đầu tiên mở nó ở chế độ tối và ở 390px.
① Khối đường dẫn gõ cứng `--ama-blue-050` làm nền và `--ama-blue-700` làm
chữ TRONG THUỘC TÍNH `style`. Ở chế độ tối cả hai đều là xanh đậm →
tương phản **1,75 : 1** (chuẩn đòi 4,5 : 1), chữ gần như biến mất.
Một màu gõ trong `style` thì chế độ tối không với tới được.
② Địa chỉ thư mời dài, phông monospace 17px, không xuống dòng được → đẩy
cái nút Chép ra ngoài màn hình **35px** ở bề rộng 390px.
★ `--alt` và `--text` là hai biến ĐÃ KHAI CẢ HAI CHẾ ĐỘ (xem `:root` và khối
`prefers-color-scheme:dark`). Dùng chúng thì không phải nhớ gì thêm.
═══════════════════════════════════════════════════════════════════════════ */
.gd-duong{background:var(--alt);color:var(--text);border-radius:var(--r-md);
padding:12px 15px;font:600 14px/1.7 var(--ama-font-mono);
overflow-x:auto;overflow-wrap:anywhere}
.gd-moi__mail{font:600 17px/1.5 var(--ama-font-mono);overflow-wrap:anywhere;word-break:break-all}
/* ═══════════════════════════════════════════════════════════════════════════
LƯỢT 55 · TRANG KHÁCH: CÂN GIỮA, GỌN LẠI, VÀ CHỦ DỰ ÁN CHỈNH ĐƯỢC
★★★ ĐO ĐƯỢC TRƯỚC LƯỢT NÀY, bằng trình duyệt thật:
máy tính 1440 ..... 11.001px = 12,2 MÀN HÌNH mới xem hết
điện thoại 390 .... 17.283px = 20,5 MÀN HÌNH
thanh menu ........ 5 DÒNG, chồng lên đầu trang
lưới bảng giá ..... lề trái 175px / lề phải 948px — lệch 773px
═══════════════════════════════════════════════════════════════════════════ */
/* ── ① THANH MENU: MENU CON CHƯA HỀ CÓ CSS ──────────────────────────────────
Đầu trang in ra `.ama-nav__grp` + `.ama-nav__sub` (nhóm “Dịch vụ ▾” với ba
mục con), nhưng KHÔNG dòng CSS nào khai hai lớp ấy — nên menu con đổ thẳng
xuống thành ba dòng rời, chồng lên logo và nút Đăng ký.
Một mẩu giao diện được in ra mà chưa ai mặc áo cho nó: cùng họ với “một cái
núm vặn được mà không nối vào đâu”. */
.ama-nav__grp{position:relative;display:inline-flex;align-items:center}
.ama-nav__grp>a{display:inline-flex;align-items:center;gap:4px}
/* ★ 12px là sàn của dự án — bộ kiểm thử canh đúng chỗ này, vì chủ tiệm 60 tuổi
nhìn điện thoại giữa tiệm sáng đèn vàng không đọc nổi chữ 11px. Mũi tên
nhỏ thì dùng `scale`, ĐỪNG hạ cỡ chữ xuống dưới sàn. */
.ama-nav__grp>a i{font-style:normal;font-size:12px;line-height:1;opacity:.7;
display:inline-block;transform:scale(.85)}
.ama-nav__sub{
position:absolute;top:100%;left:0;z-index:60;min-width:190px;
display:flex;flex-direction:column;gap:2px;padding:6px;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);box-shadow:0 10px 28px rgba(0,0,0,.14);
opacity:0;visibility:hidden;transform:translateY(-4px);
transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
visibility 0s linear var(--dur)}
/* ★ Mở bằng CHUỘT **và** bằng BÀN PHÍM. Chỉ `:hover` thì người đi bằng phím
Tab không bao giờ tới được ba mục con — và ba lượt quét trợ năng sẽ đỏ. */
.ama-nav__grp:hover>.ama-nav__sub,
.ama-nav__grp:focus-within>.ama-nav__sub{
opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.ama-nav__sub a{white-space:nowrap;font-size:14.5px;padding:8px 12px}
/* ── ② BẢNG GIÁ PHẢI NẰM GIỮA ───────────────────────────────────────────────
Lưới khai `--3` (ba cột) từ hồi còn ba gói. Lượt 49 bỏ xuống còn hai gói, và
hai thẻ nằm lại ở cột 1–2, chừa trống nguyên cột 3 bên phải: lề trái 175px,
lề phải 948px.
★ `--can` co số cột theo số thẻ THẬT rồi đẩy cả cụm vào giữa — thêm hay bớt
gói lần sau cũng không phải sửa CSS nữa. */
/* ★ `auto-fit` co số cột theo số thẻ THẬT: hai gói thì hai cột, ba gói thì ba,
và `justify-content:center` đẩy cả cụm vào giữa. Cột trống tự co về 0 nên
không bao giờ còn khoảng chừa lệch một bên nữa.
★ Phải đặt SAU và ĐÈ lên `--2`/`--3` ở cùng ngưỡng màn hình, nếu không
`repeat(2,minmax(0,1fr))` vẫn kéo hai thẻ ra full chiều ngang. */
@media (min-width:640px){
.ama-grid--can{grid-template-columns:repeat(auto-fit,minmax(260px,400px));
justify-content:center}
}
/* ── ③ NĂM NÚM CHỦ DỰ ÁN CHỈNH ĐƯỢC (Hậu đài → Giao diện) ──────────────────
Mọi con số dưới đây đọc từ biến do `Theme::css()` sinh ra từ CSDL. Gõ cứng
một con số ở đây là lấy mất cái núm vừa dựng. */
/* ★ Câu này là TIÊU ĐỀ LỚN của trang — chính câu chủ dự án muốn thu nhỏ:
“Doanh nghiệp của quý vị có mặt mỗi ngày trên Google, Facebook,
Instagram, TikTok — mà quý vị không phải làm gì.”
Nó đang 52px và chiếm ba dòng rưỡi trên màn 1440. Nay mặc định 44px, và
chỉnh được ở Hậu đài (22–72px) mà không cần lập trình lại. */
@media (min-width:960px){
.hero h1{font-size:var(--ama-hero-title,44px)}
}
.hero__lead{font-size:var(--ama-hero-sub,17px)!important}
/* Khoảng trắng dọc giữa các khối — trang dài 12 màn hình thì mỗi 8px thừa
nhân lên mười một lần. */
.ama-section{padding-top:var(--ama-khoang,64px);padding-bottom:var(--ama-khoang,64px)}
/* ── ④ “XEM TIẾP…” — kẹp N dòng rồi mở ra ──────────────────────────────────
★ Kẹp bằng CSS, mở bằng một nút THẬT (`