/* ------------------------------------------------------------------
   Bold Typography — bộ biến và style cho trang dầu chiên công nghiệp
   Nền gần đen, chữ ngà, một màu nhấn vermillion. Không bo góc.
   ------------------------------------------------------------------ */

:root {
  --bg:            #0A0A0A;
  --fg:            #FAFAFA;
  --muted:         #1A1A1A;
  /* Đặc tả gốc ghi #737373 và chú "5.3:1 AA", nhưng tính lại trên nền #0A0A0A
     màu đó chỉ đạt 4.18:1 — dưới ngưỡng 4.5:1 cho chữ thường.
     Nâng lên #7A7A7A để đạt 4.6:1, giữ nguyên sắc xám của phong cách. */
  --muted-fg:      #7A7A7A;
  --accent:        #FF3D00;
  --accent-fg:     #0A0A0A;
  --border:        #262626;
  --border-hover:  #3D3D3D;
  --card:          #0F0F0F;

  --sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Mono", monospace;

  --ease: cubic-bezier(0.25, 0, 0, 1);
  --t-fast: 150ms;
  --t-base: 200ms;

  --container: 1200px;
  --gutter: 24px;
}

@media (min-width: 768px)  { :root { --gutter: 48px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.6;
  letter-spacing: -0.01em;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) { body { font-size: 1.125rem; } }

/* Hạt nhiễu rất nhẹ phủ toàn trang, tạo chất cho nền tối */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

/* ---------- Bố cục ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

.sec {
  padding-block: 80px;
}
@media (min-width: 768px)  { .sec { padding-block: 112px; } }
@media (min-width: 1200px) { .sec { padding-block: 128px; } }

.sec--tall { padding-block: 96px; }
@media (min-width: 768px)  { .sec--tall { padding-block: 140px; } }
@media (min-width: 1200px) { .sec--tall { padding-block: 160px; } }

.sec--muted { background: var(--muted); }

/* ---------- Chữ ---------- */

h1, h2, h3 {
  font-weight: 800;
  margin: 0;
  /* Đủ chỗ cho dấu chồng của chữ hoa tiếng Việt: Ố Ề Ữ Ẩ */
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin: 0 0 24px;
  display: block;
}

.h2 {
  font-size: clamp(2rem, 6.5vw, 4.5rem);
  letter-spacing: -0.045em;
}

.lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--muted-fg);
  max-width: 60ch;
  margin: 0;
}
@media (min-width: 768px) { .lead { font-size: 1.25rem; } }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Nút ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:active { transform: translateY(1px); }

.btn[disabled] { pointer-events: none; opacity: 0.5; }

/* Nút chính: chỉ có chữ và một gạch chân chạy */
.btn--primary {
  position: relative;
  color: var(--accent);
  padding: 14px 0;
  min-height: 44px;
}
.btn--primary .underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.btn--primary:hover .underline { transform: scaleX(1.08); }

/* Nút phụ: viền mảnh, hover thì đảo màu hoàn toàn */
.btn--outline {
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 14px 24px;
  min-height: 48px;
}
.btn--outline:hover { background: var(--fg); color: var(--bg); }

.btn--lg { font-size: 0.9375rem; min-height: 52px; }

/* Liên kết chữ trong thân bài */
.link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease);
}
.link:hover { color: var(--accent); }
.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Chỗ dữ liệu còn thiếu ---------- */

.thieu {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px dashed var(--accent);
  padding: 4px 8px;
  display: inline-block;
  white-space: nowrap;
}

.ghi-chu-mau {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--muted-fg);
  border-left: 2px solid var(--accent);
  padding: 8px 0 8px 16px;
  margin: 0 0 40px;
  max-width: 60ch;
}

/* ---------- Thanh điều hướng ---------- */

.nav {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding-block: 12px;
}
.nav__brand {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* đủ rộng để bấm bằng ngón tay */
}
.nav__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.nav__right { display: flex; align-items: center; gap: 20px; }
.nav__tel {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__tel:hover { color: var(--accent); border-color: var(--accent); }
.nav__tel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 599px) { .nav__tel { display: none; } }

/* ---------- Poster mở đầu ---------- */

.hero { padding-block: 72px 64px; }
@media (min-width: 768px)  { .hero { padding-block: 120px 96px; } }
@media (min-width: 1200px) { .hero { padding-block: 152px 120px; } }

.hero__h1 {
  font-size: clamp(3.25rem, 10.8vw, 8rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 0;
  /* Dấu của chữ hoa cần khoảng thở phía trên, không được cắt ngọn */
  padding-top: 0.06em;
  text-wrap: pretty;
}
.hero__h1 .l { display: block; }
.hero__h1 .em { color: var(--accent); }

/* Trên điện thoại cho riêng dòng tiêu đề tràn rộng hơn cột chữ một chút,
   đủ để "CHẢO ĐỎ LỬA." nằm trọn một dòng thay vì gãy giữa cụm.
   Phần chữ thân và nút vẫn thẳng hàng theo lề chung. */
@media (max-width: 639px) {
  .hero__h1 { margin-inline: -8px; }
}

.hero__lead {
  margin-top: 32px;
  max-width: 54ch;
}
@media (min-width: 1024px) { .hero__lead { margin-top: 40px; } }

.hero__cta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

/* ---------- Ba việc bếp hay gặp ---------- */

.vande { display: grid; gap: 0; }

.vande__item {
  display: grid;
  gap: 8px 32px;
  padding-block: 36px;
  border-top: 1px solid var(--border);
  transition: border-color var(--t-fast) var(--ease);
}
.vande__item:last-child { border-bottom: 1px solid var(--border); }
.vande__item:hover { border-top-color: var(--border-hover); }

@media (min-width: 900px) {
  .vande__item {
    grid-template-columns: 1fr 4fr 6fr;
    align-items: start;
    padding-block: 48px;
  }
}

.vande__so {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--border-hover);
  transition: color var(--t-fast) var(--ease);
  padding-top: 6px;
}
.vande__item:hover .vande__so { color: var(--accent); }

.vande__ten {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.vande__mo-ta {
  color: var(--muted-fg);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 52ch;
}
@media (min-width: 768px) { .vande__mo-ta { font-size: 1.0625rem; } }

/* ---------- Quy cách ---------- */

.sp { border-top: 1px solid var(--border); }

.sp__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 16px 20px;
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--t-fast) var(--ease);
}
.sp__item:hover { border-bottom-color: var(--border-hover); }
/* Trên điện thoại: giá và nút xuống hàng dưới, chiếm trọn bề ngang */
.sp__item > .sp__gia,
.sp__item > .btn { grid-column: 1 / -1; }
.sp__item > .btn { justify-self: start; }

@media (min-width: 860px) {
  .sp__item {
    grid-template-columns: 128px 6fr 3fr auto;
    gap: 32px;
    padding-block: 36px;
  }
  .sp__item > .sp__gia,
  .sp__item > .btn { grid-column: auto; }
  .sp__item > .btn { justify-self: end; }
}

/* ---------- Hình quy cách ---------- */

.sp__anh {
  aspect-ratio: 4 / 5;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease);
}
.sp__item:hover .sp__anh { border-color: var(--border-hover); }
.sp__anh img { width: 100%; height: 100%; object-fit: cover; }

.mh { width: 100%; height: 100%; display: block; }
.mh__net {
  fill: none;
  stroke: var(--fg);
  stroke-width: 7;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
@media (min-width: 860px) { .mh__net { stroke-width: 5; } }
.mh__nap {
  fill: var(--accent);
  stroke: var(--fg);
  stroke-width: 7;
  vector-effect: non-scaling-stroke;
}
@media (min-width: 860px) { .mh__nap { stroke-width: 5; } }
.mh__nhan { fill: var(--accent); }
.mh__so {
  font-family: var(--sans);
  font-weight: 900;
  font-size: 62px;
  letter-spacing: -0.04em;
  fill: var(--accent-fg);
}
.mh__so--nho { font-size: 40px; }
.mh__don-vi {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.22em;
  fill: var(--accent-fg);
}
.mh__don-vi--nho { font-size: 14px; }

/* ---------- Tính nhanh lượng cần lấy ---------- */

.tinh {
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  padding: 28px 24px;
  margin-bottom: 48px;
}
@media (min-width: 768px) { .tinh { padding: 36px 32px; } }
.tinh .label { margin-bottom: 14px; }
.tinh__td {
  font-size: clamp(1.375rem, 3.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.tinh__dan { color: var(--muted-fg); font-size: 0.9375rem; line-height: 1.7; margin: 0 0 28px; max-width: 54ch; }
.tinh__hang { display: grid; gap: 20px; }
@media (min-width: 620px) { .tinh__hang { grid-template-columns: 1fr 1fr; gap: 24px; } }
.tinh__hang .truong { margin-bottom: 4px; }

.tinh__o { display: flex; align-items: stretch; }
.tinh__o input {
  width: 100%;
  min-width: 0;
  background: var(--muted);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 0;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 1rem;
  padding: 0 16px;
  height: 48px;
  -moz-appearance: textfield;
  transition: border-color var(--t-fast) var(--ease);
}
.tinh__o input::-webkit-outer-spin-button,
.tinh__o input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tinh__o input:focus { outline: 0; border-color: var(--accent); }
.tinh__hau {
  display: flex; align-items: center;
  padding: 0 14px;
  height: 48px;
  background: var(--muted);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
  white-space: nowrap;
}
/* Ô nhập số lít phải cao bằng ô chọn chu kỳ bên cạnh */
@media (min-width: 768px) {
  .tinh__o input, .tinh__hau { height: 56px; }
}
.tinh .btn { margin-top: 20px; }

.tinh__kq {
  margin: 24px 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg);
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: none;
}
.tinh__kq.hien { display: block; }
.tinh__kq b { color: var(--accent); font-weight: 700; }
.tinh__kq .phu { display: block; color: var(--muted-fg); font-size: 0.875rem; margin-top: 8px; }

/* ---------- Ô chọn ---------- */

select {
  width: 100%;
  height: 48px;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0 40px 0 16px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23737373' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
@media (min-width: 768px) { .truong select { height: 56px; } }
select:focus { outline: 0; border-color: var(--accent); }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Tổng đơn ---------- */

.tom-tat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 20px 0 0;
  margin-top: 4px;
}
.tom-tat__nhan {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.tom-tat__so {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--muted-fg);
}
.tom-tat__so b { color: var(--accent); font-size: 1.375rem; font-weight: 500; }

/* ---------- Nhớ thông tin người đặt ---------- */

.nho { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; }
.nho input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative;
  width: 22px; height: 22px;
  flex: 0 0 22px;
  margin: 2px 0 0;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.nho input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%230A0A0A' stroke-width='2.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Ô vuông vẽ 22px cho gọn mắt, nhưng vùng bấm nới ra đủ 44px */
.nho input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset: -11px;
}
.nho input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nho label {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-fg);
  cursor: pointer;
  margin: 0;
  font-family: var(--sans);
  letter-spacing: normal;
  text-transform: none;
}
.nho__xoa {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  padding: 12px 0;
  min-height: 44px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.nho__xoa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sp__ten {
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 6px;
}
.sp__quy-cach { color: var(--accent); }
.sp__mo-ta {
  color: var(--muted-fg);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}
.sp__gia {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

/* ---------- Cách đặt hàng ---------- */

.buoc { display: grid; gap: 0; }
.buoc__item {
  display: grid;
  gap: 10px 32px;
  padding-block: 36px;
  border-bottom: 1px solid var(--border);
}
.buoc__item:first-child { border-top: 1px solid var(--border); }
@media (min-width: 900px) {
  .buoc__item { grid-template-columns: 1fr 4fr 6fr; align-items: start; padding-block: 44px; }
}
.buoc__so {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--border-hover);
  padding-top: 5px;
}
.buoc__ten {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.buoc__mo-ta { color: var(--muted-fg); font-size: 1rem; line-height: 1.7; max-width: 52ch; }

/* So sánh hai cách đặt */
.ss { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--border); }
.ss__tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 32px; }
.ss__tab {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
  background: none;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 20px;
  min-height: 48px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ss__tab + .ss__tab { border-left: 0; }
.ss__tab:hover { color: var(--fg); }
.ss__tab[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  position: relative;
  z-index: 1;
}
.ss__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 2; }

.ss__noi-dung {
  font-size: clamp(1.25rem, 3.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  max-width: 44ch;
  min-height: 5.8em;
  margin: 0;
}
@media (min-width: 768px) { .ss__noi-dung { min-height: 4.4em; } }

/* ---------- Biểu mẫu đặt hàng ---------- */

.form__nhom { margin-bottom: 40px; }

.form__dong-sp {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--border);
}
.form__dong-sp:first-of-type { border-top: 1px solid var(--border); }
.form__sp-ten { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.form__sp-qc { color: var(--muted-fg); font-size: 0.9375rem; font-weight: 400; }

.so-luong { display: flex; align-items: center; gap: 0; }
.so-luong__btn {
  width: 44px; height: 48px;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.so-luong__btn:hover { border-color: var(--accent); color: var(--accent); }
.so-luong__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1; }

.so-luong input {
  width: 64px; height: 48px;
  text-align: center;
  background: var(--muted);
  border: 1px solid var(--border);
  border-inline: 0;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 1rem;
  border-radius: 0;
  -moz-appearance: textfield;
}
.so-luong input::-webkit-outer-spin-button,
.so-luong input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.so-luong input:focus { outline: 0; border-color: var(--accent); border-inline: 1px solid var(--accent); }

.truong { margin-bottom: 24px; }
.truong label {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-bottom: 10px;
}
.truong .bat-buoc { color: var(--accent); }

.truong input[type="text"],
.truong input[type="tel"],
.truong textarea {
  width: 100%;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;               /* 16px: iOS không tự phóng to */
  padding: 0 16px;
  height: 48px;
  transition: border-color var(--t-fast) var(--ease);
}
@media (min-width: 768px) {
  .truong input[type="text"],
  .truong input[type="tel"] { height: 56px; }
}
.truong textarea { height: auto; min-height: 112px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.truong input::placeholder, .truong textarea::placeholder { color: var(--muted-fg); }
.truong input:focus, .truong textarea:focus { outline: 0; border-color: var(--accent); }
.truong input[aria-invalid="true"], .truong textarea[aria-invalid="true"] { border-color: var(--accent); }

.loi {
  display: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-top: 8px;
}
.loi.hien { display: block; }

.form__dap-an { margin-top: 32px; }

.thong-bao {
  border: 1px solid var(--border);
  padding: 24px;
  margin-bottom: 32px;
}
.thong-bao--loi { border-color: var(--accent); }
.thong-bao--xong { border: 2px solid var(--accent); }
.thong-bao__tieu-de {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.thong-bao__ma {
  font-family: var(--mono);
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: inline-block;
  margin-top: 8px;
}
.thong-bao p { color: var(--muted-fg); font-size: 0.9375rem; line-height: 1.7; }

/* ---------- Chân trang ---------- */

.footer { border-top: 1px solid var(--border); padding-block: 56px 40px; }
.footer__luoi { display: grid; gap: 32px; }
@media (min-width: 768px) { .footer__luoi { grid-template-columns: 2fr 1fr 1fr; gap: 48px; } }
.footer__ten { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 12px; }
.footer__mo-ta { color: var(--muted-fg); font-size: 0.9375rem; max-width: 40ch; margin: 0; }
.footer h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin: 0 0 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer li { line-height: 1.5; }
/* Vùng bấm của liên kết chân trang phải đủ 44px cho ngón tay */
.footer a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9375rem;
  display: inline-block;
  padding-block: 11px;
  transition: color var(--t-fast) var(--ease);
}
.footer a:hover { color: var(--accent); }
.footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.footer__cuoi {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--muted-fg);
  text-transform: uppercase;
}

/* ---------- Thanh nhảy tới đơn (dính đáy, chỉ trên mobile) ---------- */

.thanh-don {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 12px var(--gutter);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.thanh-don.hien { display: flex; }
.thanh-don__dem { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--muted-fg); }
.thanh-don__dem b { color: var(--fg); font-weight: 500; }
@media (min-width: 900px) { .thanh-don { display: none !important; } }

/* ---------- Hiện dần khi cuộn ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js .reveal.hien { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Chỉ đọc bằng trình đọc màn hình */
.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Nhảy nhanh tới nội dung */
.bo-qua {
  position: absolute; left: 8px; top: -60px;
  background: var(--accent); color: var(--accent-fg);
  padding: 12px 20px; z-index: 300;
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.bo-qua:focus { top: 8px; }