/* =========================================================================
   Sellio — trang giới thiệu
   Ý tưởng: phần mềm này in ra giấy. Đơn, tem, phiếu thu, phiếu tổng kết ngày.
   Nên cả trang là mặt quầy màu tím, còn thứ gì do phần mềm sinh ra thì là giấy.
   ========================================================================= */

:root {
  /* màu */
  --muc:        #2A0E4A;   /* nền chính, tím sâu */
  --muc-sau:    #1F0A38;   /* nền các mảng xen kẽ và chân trang */
  --tim:        #431874;   /* tím thương hiệu */
  --tim-sang:   #6B2CAE;   /* viền, đường kẻ trên nền tối */
  --vang:       #FFC20F;   /* nhấn, chỉ dùng cho việc quan trọng */
  --giay:       #F1EFE8;   /* giấy in nhiệt */
  --giay-mo:    #DDD8CE;   /* giấy ngả bóng */
  --than:       #1C1424;   /* mực in trên giấy */
  --do:         #D8452F;   /* cảnh báo, dùng rất tiết kiệm */

  --chu-mo:     rgba(241, 239, 232, .68);
  --chu-rat-mo: rgba(241, 239, 232, .44);
  --vien:       rgba(241, 239, 232, .13);

  /* chữ */
  --dis:  'Archivo', system-ui, -apple-system, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* nhịp */
  --sec-y: clamp(72px, 9vw, 128px);
  --gutter: clamp(20px, 4vw, 48px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--muc);
  color: var(--giay);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--dis);
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--vang);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--vang);
  color: var(--than);
  font-weight: 600;
  border-radius: 4px;
  transition: top .18s;
}
.skip:focus { top: 12px; }

/* ── khung ───────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }

.sec { padding-block: var(--sec-y); }
.sec--alt { background: var(--muc-sau); }

.sec__head { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec__sub {
  margin-top: 18px;
  color: var(--chu-mo);
  font-size: 17px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vang);
  margin-bottom: 18px;
}

.h1 {
  font-size: clamp(38px, 6.2vw, 68px);
  font-variation-settings: 'wdth' 108;
  letter-spacing: -.035em;
}

.h2 {
  font-size: clamp(27px, 3.4vw, 40px);
  letter-spacing: -.025em;
}

.lede {
  margin-top: 24px;
  max-width: 46ch;
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--chu-mo);
}

/* ── nút và liên kết ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--vang);
  color: var(--than);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--vang);
  border-radius: 4px;
  cursor: pointer;
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease;
}
.btn:hover { background: #FFD24A; border-color: #FFD24A; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--giay);
  border-color: var(--vien);
}
.btn--ghost:hover { background: rgba(241, 239, 232, .06); border-color: var(--chu-rat-mo); }

.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--full { width: 100%; }

.lnk {
  color: var(--chu-mo);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .14s, border-color .14s;
}
.lnk:hover { color: var(--giay); border-bottom-color: var(--vang); }
.lnk--strong { color: var(--vang); border-bottom-color: rgba(255, 194, 15, .4); }
.lnk--strong:hover { color: var(--vang); }

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(42, 14, 74, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vien);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
}

.topbar__logo { flex: none; line-height: 0; }
.topbar__logo img { width: 118px; height: auto; }

.topbar__nav {
  display: flex;
  gap: 26px;
  margin-right: auto;
  font-size: 15px;
}
.topbar__nav a {
  color: var(--chu-mo);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color .14s, border-color .14s;
}
.topbar__nav a:hover { color: var(--giay); border-bottom-color: var(--vang); }

.topbar__act { display: flex; align-items: center; gap: 18px; flex: none; }

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

.hero {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(72px, 9vw, 120px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--chu-rat-mo);
}
.hero__notes li { position: relative; padding-left: 16px; }
.hero__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--vang);
}

/* ── chữ ký: máy in nhả phiếu ────────────────────────────────────────── */

.printer { position: relative; isolation: isolate; }

.printer::before {   /* bóng đổ xuống mặt quầy */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -28px;
  height: 60px;
  background: #14052A;
  filter: blur(28px);
  opacity: .8;
  z-index: -1;
}

.printer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--tim);
  border: 1px solid rgba(255, 194, 15, .22);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.printer__led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vang);
  box-shadow: 0 0 10px rgba(255, 194, 15, .9);
}

.printer__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(241, 239, 232, .75);
}

.printer__slot {
  height: 10px;
  background: linear-gradient(#170729, #3B1268);
  border-inline: 1px solid rgba(255, 194, 15, .22);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .7);
}

.printer__mouth { overflow: hidden; }

/* Tờ giấy in nhiệt: nền sáng, mực than, mép dưới răng cưa như vừa xé khỏi cuộn.
   Dùng lại cho phiếu tổng kết, ba tờ báo giá và biên nhận đăng ký. */
.giay {
  --rang: 11px;
  background: var(--giay);
  color: var(--than);

  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--rang)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      bottom / var(--rang) var(--rang) repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--rang)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      bottom / var(--rang) var(--rang) repeat-x;
}

.receipt {
  padding: 26px 24px calc(20px + var(--rang));
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
  animation: nha-giay 1.9s cubic-bezier(.2, .8, .25, 1) both;
}

@keyframes nha-giay {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.rc-brand {
  font-family: var(--dis);
  font-weight: 800;
  font-variation-settings: 'wdth' 118;
  font-size: 21px;
  letter-spacing: .3em;
  text-align: center;
  text-indent: .3em;
}
.rc-kind {
  text-align: center;
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(28, 20, 36, .6);
  margin-bottom: 6px;
}

.rc-rule {
  height: 1px;
  margin-block: 12px;
  background-image: repeating-linear-gradient(
    to right, rgba(28, 20, 36, .5) 0 4px, transparent 4px 9px);
}
.rc-rule--dark { background-image: repeating-linear-gradient(
    to right, rgba(28, 20, 36, .35) 0 4px, transparent 4px 9px); }

.rc-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.rc-line span:last-child { font-variant-numeric: tabular-nums; }
.rc-line--warn span:last-child { color: var(--do); font-weight: 600; }
.rc-line--total {
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.rc-foot {
  text-align: center;
  font-size: 10.5px;
  color: rgba(28, 20, 36, .55);
}
.rc-barcode {
  width: 100%;
  height: 30px;
  margin-top: 12px;
  color: var(--than);
  opacity: .85;
}

/* ── dải "làm cho" ───────────────────────────────────────────────────── */

.strip {
  border-block: 1px solid var(--vien);
  background: var(--muc-sau);
}
.strip__inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-block: 22px;
}
.strip__label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chu-rat-mo);
}
.strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--chu-mo);
}

/* ── thẻ tính năng ───────────────────────────────────────────────────── */

/* Đúng hai cột: bốn khu vực xếp thành lưới 2×2, không để ô trống lẻ. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--vien);
  border: 1px solid var(--vien);
}

.card {
  padding: clamp(26px, 3vw, 38px);
  background: var(--muc);
}

.card__tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vang);
  margin-bottom: 12px;
}

.card__title {
  font-size: 22px;
  margin-bottom: 20px;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
  font-size: 15px;
  color: var(--chu-mo);
  line-height: 1.55;
}
.list li { position: relative; padding-left: 20px; }
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--tim-sang);
}

/* ── một ngày ────────────────────────────────────────────────────────── */

.day {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 780px;
}

.day__item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 28px;
  padding-bottom: 38px;
  position: relative;
}
.day__item:last-child { padding-bottom: 0; }

.day__item::before {   /* đường đục lỗ nối các mốc giờ */
  content: "";
  position: absolute;
  left: 5px;
  top: 26px;
  bottom: 0;
  width: 1px;
  background-image: repeating-linear-gradient(
    to bottom, var(--tim-sang) 0 4px, transparent 4px 10px);
}
.day__item:last-child::before { display: none; }

.day__time {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--vang);
  padding-left: 20px;
  position: relative;
  line-height: 1.9;
}
.day__time::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 11px;
  height: 11px;
  background: var(--vang);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--muc-sau);
}

.day__title {
  font-size: 19px;
  margin-bottom: 8px;
}
.day__body p { color: var(--chu-mo); font-size: 15.5px; }
.day__body em { color: var(--giay); font-style: normal; border-bottom: 1px dotted var(--tim-sang); }

/* ── ô nhỏ ───────────────────────────────────────────────────────────── */

.grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.mini { border-top: 2px solid var(--tim-sang); padding-top: 18px; }
.mini__title { font-size: 17px; margin-bottom: 8px; }
.mini p { color: var(--chu-mo); font-size: 15px; }

/* ── bảng giá ────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 30px 28px calc(28px + var(--rang));
}

.plan--pick { padding-top: 0; }

.plan__badge {
  margin: 0 -28px 24px;
  padding: 10px 28px;
  background: var(--vang);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--than);
}

.plan__name {
  font-family: var(--dis);
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  font-size: 24px;
  letter-spacing: -.02em;
}
.plan__for {
  font-size: 14px;
  color: rgba(28, 20, 36, .6);
  margin-bottom: 20px;
}

.plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__num {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tim);
}
.plan__num--word { font-size: 26px; letter-spacing: 0; }
.plan__unit { font-size: 14px; color: rgba(28, 20, 36, .6); }

.plan .list { color: rgba(28, 20, 36, .78); margin-bottom: 28px; }
.plan .list li::before { border-color: rgba(67, 24, 116, .45); }
.list--plan { font-size: 14.5px; }

.plan .btn { margin-top: auto; }
.plan .btn--ghost { color: var(--tim); border-color: rgba(67, 24, 116, .3); }
.plan .btn--ghost:hover { background: rgba(67, 24, 116, .07); border-color: rgba(67, 24, 116, .55); }

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

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

.qa { border-bottom: 1px solid var(--vien); }

.qa summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--dis);
  font-weight: 600;
  font-variation-settings: 'wdth' 110;
  font-size: 18px;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
  transition: color .14s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before {
  content: "+";
  font-family: var(--mono);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--vang);
  flex: none;
}
.qa[open] summary::before { content: "–"; }
.qa summary:hover { color: var(--vang); }

.qa p {
  padding: 0 0 24px 32px;
  max-width: 62ch;
  color: var(--chu-mo);
  font-size: 15.5px;
}

/* ── đăng ký ─────────────────────────────────────────────────────────── */

.cta {
  padding-block: var(--sec-y);
  background: var(--muc-sau);
  border-top: 1px solid var(--vien);
  overflow-x: clip;   /* quầng sáng sau máy toả rộng hơn khung, cắt đi kẻo tràn ngang */
}
.cta__inner { text-align: center; }
.cta__title { max-width: 20ch; margin-inline: auto; }
.cta__sub {
  margin: 20px auto 0;
  max-width: 52ch;
  color: var(--chu-mo);
}

/* máy nhận phiếu — cùng một cỗ máy với chỗ nhả phiếu ở đầu trang */

.may {
  position: relative;
  isolation: isolate;   /* để quầng sáng z-index:-1 không tụt xuống dưới nền mảng */
  max-width: 460px;
  margin: 44px auto 0;
  text-align: left;
}

.may::before {   /* quầng sáng hắt ra sau máy */
  content: "";
  position: absolute;
  inset: -10% -18% -14%;
  background: radial-gradient(ellipse at 50% 40%, rgba(107, 44, 174, .5), transparent 70%);
  filter: blur(30px);
  z-index: -1;
}

.may .printer__led { animation: den-tho 3.2s ease-in-out infinite; }
.may.dang-chay .printer__led { animation: den-gap .5s steps(2, end) infinite; }

@keyframes den-tho {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes den-gap {
  0%   { opacity: 1; }
  50%  { opacity: .15; }
  100% { opacity: 1; }
}

.khay {
  overflow: hidden;
  transition: height .52s cubic-bezier(.2, .8, .2, 1);
}

/* tờ phiếu đăng ký: là một tờ giấy rời nên mép cắt thẳng, không răng cưa */
.phieu {
  padding: 26px 26px 22px;
  background: var(--giay);
  color: var(--than);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
}

.phieu.dang-nuot {
  animation: nuot-giay .66s cubic-bezier(.55, 0, .78, .3) forwards;
  transform-origin: top center;
}

@keyframes nuot-giay {   /* tờ phiếu bị máy kéo tụt lên trên rồi khuất hẳn */
  0%   { transform: translateY(0) scaleY(1); opacity: 1; }
  55%  { transform: translateY(-42%) scaleY(.94); opacity: 1; }
  100% { transform: translateY(-104%) scaleY(.82); opacity: .25; }
}

.phieu .rc-brand { font-size: 19px; }
.phieu .rc-line { color: rgba(28, 20, 36, .7); }

/* một dòng để điền, kẻ chấm như dòng kẻ trên phiếu in sẵn */
.o { display: block; margin-top: 20px; }

.o__nhan {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(28, 20, 36, .5);
  transition: color .2s;
}

.o__khung {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px dashed rgba(28, 20, 36, .32);
}

.o__khung::after {   /* nét mực đậm chạy từ trái sang khi con trỏ vào dòng */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--tim);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
}
.o:focus-within .o__khung::after { transform: scaleX(1); }
.o:focus-within .o__nhan { color: var(--tim); }

.o__nhap {
  flex: 1;
  min-width: 0;
  padding: 7px 0 9px;
  border: 0;
  background: transparent;
  color: var(--than);
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: -.01em;
}
.o__nhap:focus { outline: none; }
.o__nhap::placeholder { color: rgba(28, 20, 36, .28); }

.o__dau {   /* dấu tích đóng vào khi dòng đã điền đúng */
  flex: none;
  font-size: 15px;
  color: var(--tim);
  opacity: 0;
  transform: scale(.5) rotate(-18deg);
  transition: opacity .22s, transform .34s cubic-bezier(.3, 1.6, .5, 1);
}
.o--xong .o__dau { opacity: 1; transform: scale(1) rotate(0); }

/* Dòng sai thì cả nét mực lẫn nhãn đổi sang đỏ, kể cả khi con trỏ đang ở đó. */
.o--loi .o__khung { border-bottom-color: var(--do); }
.o--loi .o__nhan,
.o--loi:focus-within .o__nhan { color: var(--do); }
.o--loi:focus-within .o__khung::after { background: var(--do); }
.o--loi { animation: rung .3s ease; }

@keyframes rung {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

.nut { margin-top: 30px; gap: 10px; }
.nut__mui { transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.nut:hover .nut__mui { transform: translateX(5px); }
.nut:disabled { cursor: progress; opacity: .75; }
.nut:disabled:hover { transform: none; background: var(--vang); }

.phieu__note {
  margin-top: 14px;
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(28, 20, 36, .52);
  text-align: center;
}
.phieu__note[data-tone="loi"] { color: var(--do); }

/* biên nhận máy in trả lại */
.bienlai__giay {
  padding: 26px 24px calc(20px + var(--rang));
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
}
.bienlai.dang-in .bienlai__giay {
  animation: nha-giay 1.15s cubic-bezier(.2, .8, .25, 1) both;
}
.bienlai__loi {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(28, 20, 36, .7);
}
.bienlai .rc-line span:last-child { font-weight: 600; }

.cta__alt { margin-top: 32px; font-size: 15px; color: var(--chu-rat-mo); }

[hidden] { display: none !important; }

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

.foot {
  padding-top: clamp(48px, 6vw, 72px);
  background: var(--muc);
  border-top: 1px solid var(--vien);
}

/* HAI cột chữ, không phải ba: cột "Đăng nhập" đã bỏ đi cùng lúc với liên kết
   vào trang quản trị. Để nguyên repeat(3) thì chân trang chừa một khoảng trống
   bằng cả một cột ở mép phải mà không có gì trong đó. */
.foot__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(2, minmax(140px, 1fr));
  gap: 40px;
  padding-bottom: 48px;
}

.foot__brand img { width: 112px; height: auto; margin-bottom: 16px; }
.foot__brand p { max-width: 30ch; font-size: 14.5px; color: var(--chu-rat-mo); }

.foot__col { display: flex; flex-direction: column; gap: 10px; }
.foot__head {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vang);
  margin-bottom: 4px;
}
.foot__col a {
  font-size: 14.5px;
  color: var(--chu-mo);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
}
.foot__col a:hover { color: var(--giay); border-bottom-color: var(--vang); }

.foot__end {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 22px;
  border-top: 1px solid var(--vien);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--chu-rat-mo);
}

/* ── màn hình nhỏ ────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .printer { max-width: 400px; }
  .topbar__nav { display: none; }
  .topbar__logo { margin-right: auto; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 76px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .day__item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .day__item::before { display: none; }
  .day__time { padding-left: 20px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* `.topbar__act .lnk { display: none }` từng ở đây để giấu liên kết "Đăng
     nhập" trên màn hình hẹp. Liên kết đó đã bỏ hẳn khỏi trang, nên luật này
     không còn gì để giấu. */
}

/* ── ai tắt hiệu ứng thì tắt hẳn ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .receipt { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Ô BẪY chống máy tự điền form.
   Ẩn khỏi mắt người NHƯNG vẫn nằm trong luồng tài liệu và vẫn có thể focus theo
   cách thông thường — nhiều bot bỏ qua `display:none` và `type=hidden`, nên cách
   ẩn này bắt được nhiều hơn. Người thật không bao giờ chạm tới nó (aria-hidden +
   tabindex=-1 ở HTML), và điền vào là máy chủ từ chối. */
.o--bay {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}