/* Hệ thống tính giá in ấn - design system dùng chung.
   Mobile-first: mặc định là bố cục dọc cho điện thoại, mở rộng dần ở breakpoint lớn. */

:root {
  --nen: #f4f6f9;
  --the: #ffffff;
  --the-mo: #fbfcfd;
  --vien: #e2e6ec;
  --vien-dam: #cdd4de;
  --chu: #16191d;
  --chu-nhat: #5f6873;
  --chu-mo: #8a929c;
  --chinh: #2f57d8;
  --chinh-dam: #2244b8;
  --chinh-nhat: #eef2fe;
  --xanh: #0d7a52;
  --xanh-nhat: #e7f6ef;
  --do: #c62f36;
  --do-nhat: #fdeced;
  --vang: #9a6600;
  --vang-nhat: #fdf3e2;
  --bong: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --bong-noi: 0 4px 6px -1px rgba(16, 24, 40, .07), 0 12px 24px -8px rgba(16, 24, 40, .12);
  --r: 10px;
  --r-nho: 7px;
  --rong-sidebar: 250px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nen: #12151a;
    --the: #1a1e25;
    --the-mo: #1f242c;
    --vien: #2b313b;
    --vien-dam: #3a414d;
    --chu: #e8ebef;
    --chu-nhat: #a3acb8;
    --chu-mo: #7c8593;
    --chinh: #6a8cff;
    --chinh-dam: #85a1ff;
    --chinh-nhat: #1c2540;
    --xanh: #3fbb8a;
    --xanh-nhat: #142a22;
    --do: #f0787f;
    --do-nhat: #2c1a1d;
    --vang: #dda43c;
    --vang-nhat: #2a2116;
    --bong: 0 1px 2px rgba(0, 0, 0, .3);
    --bong-noi: 0 12px 28px -10px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--chinh); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
small { font-size: .8125rem; }

/* --- Khung ứng dụng --- */

.ung-dung { min-height: 100vh; }

.thanh-dinh {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem;
  background: var(--the); border-bottom: 1px solid var(--vien);
}
.thanh-dinh .ten-app { font-weight: 650; font-size: .975rem; }

.nut-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--vien); border-radius: var(--r-nho);
  background: var(--the); color: var(--chu); cursor: pointer;
}
.nut-menu span { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nut-menu span::before, .nut-menu span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nut-menu span::before { top: -6px; }
.nut-menu span::after { top: 6px; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--rong-sidebar); max-width: 84vw;
  background: var(--the); border-right: 1px solid var(--vien);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .18s ease;
  overflow-y: auto;
}
.sidebar.mo { transform: none; }

.lop-phu {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(9, 12, 18, .45); backdrop-filter: blur(1px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.lop-phu.hien { opacity: 1; pointer-events: auto; }

.sidebar-dau {
  padding: 1.05rem 1rem .85rem; border-bottom: 1px solid var(--vien);
}
.sidebar-dau .ten { font-weight: 680; font-size: 1rem; letter-spacing: -.015em; }
.sidebar-dau .phu { color: var(--chu-mo); font-size: .78rem; margin-top: .1rem; }

.dieu-huong { padding: .625rem; flex: 1; }
.dieu-huong .nhom-nhan {
  padding: .8rem .625rem .35rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--chu-mo);
}
.dieu-huong a {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .5rem .625rem; margin-bottom: 1px;
  border-radius: var(--r-nho); color: var(--chu-nhat); font-size: .9rem; font-weight: 500;
}
.dieu-huong a:hover { background: var(--the-mo); color: var(--chu); text-decoration: none; }
.dieu-huong a.dang-chon { background: var(--chinh-nhat); color: var(--chinh-dam); font-weight: 600; }
.dieu-huong .cham {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: none;
}
.dieu-huong a.dang-chon .cham { opacity: 1; }
.dieu-huong .so-hieu {
  margin-left: auto; background: var(--do); color: #fff; border-radius: 999px;
  font-size: .7rem; font-weight: 700; padding: .05rem .4rem; min-width: 20px; text-align: center;
}

.sidebar-chan { padding: .75rem; border-top: 1px solid var(--vien); }
.the-nguoi-dung { display: flex; align-items: center; gap: .6rem; padding: .35rem .25rem .6rem; }
.chu-cai {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--chinh-nhat); color: var(--chinh-dam);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.the-nguoi-dung .ten { font-size: .85rem; font-weight: 600; }
.the-nguoi-dung .vai { font-size: .75rem; color: var(--chu-mo); }

.noi-dung { padding: 1rem .875rem 3rem; }
.tieu-de-trang {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem;
  margin-bottom: 1rem;
}
.tieu-de-trang .mo-ta { color: var(--chu-nhat); font-size: .875rem; margin-top: .15rem; }
.tieu-de-trang .hanh-dong { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }

@media (min-width: 1024px) {
  .thanh-dinh { display: none; }
  .sidebar { transform: none; }
  .lop-phu { display: none; }
  .ung-dung { padding-left: var(--rong-sidebar); }
  .noi-dung { padding: 1.75rem 2rem 4rem; max-width: 1280px; }
}

/* --- Thẻ --- */

.the {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r);
  box-shadow: var(--bong); margin-bottom: 1rem;
}
.the-dau {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .875rem 1rem; border-bottom: 1px solid var(--vien);
}
.the-dau h2, .the-dau h3 { margin-right: auto; }
.the-than { padding: 1rem; }
.the-than.khong-dem { padding: 0; }

.luoi { display: grid; gap: 1rem; }
@media (min-width: 640px) { .luoi.cot-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .luoi.cot-3 { grid-template-columns: repeat(3, 1fr); }
  .luoi.cot-4 { grid-template-columns: repeat(4, 1fr); }
}

.chi-so { padding: 1rem; }
.chi-so .nhan { color: var(--chu-nhat); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.chi-so .so { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin-top: .2rem; }
.chi-so .phu { color: var(--chu-mo); font-size: .8rem; }

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

.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1rem;
  border: 1px solid var(--vien-dam); border-radius: var(--r-nho);
  background: var(--the); color: var(--chu);
  font-size: .875rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.nut:hover { background: var(--the-mo); text-decoration: none; }
.nut:active { transform: translateY(1px); }
.nut:disabled { opacity: .55; cursor: not-allowed; }
.nut.chinh { background: var(--chinh); border-color: var(--chinh); color: #fff; }
.nut.chinh:hover { background: var(--chinh-dam); border-color: var(--chinh-dam); }
.nut.nguy-hiem { color: var(--do); border-color: var(--vien-dam); }
.nut.nguy-hiem:hover { background: var(--do-nhat); border-color: var(--do); }
.nut.thanh-cong { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.nut.nho { min-height: 36px; padding: .3rem .625rem; font-size: .8125rem; }
.nut.rong { width: 100%; }
.nut.phang { border-color: transparent; background: transparent; }
.nut.phang:hover { background: var(--the-mo); }

.hang-nut { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- Form --- */

.truong { margin-bottom: .875rem; }
.truong > label, .nhan-truong {
  display: block; margin-bottom: .3rem; font-size: .825rem; font-weight: 600; color: var(--chu-nhat);
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .7rem;
  border: 1px solid var(--vien-dam); border-radius: var(--r-nho);
  background: var(--the); color: var(--chu);
  font-family: inherit; font-size: .9375rem;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--chinh); box-shadow: 0 0 0 3px var(--chinh-nhat);
}
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--chinh); }
.hop-chon { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.hop-chon label { font-size: .9rem; font-weight: 500; color: var(--chu); margin: 0; }
.goi-y { color: var(--chu-mo); font-size: .78rem; margin-top: .25rem; }

.luoi-truong { display: grid; gap: .875rem; }
@media (min-width: 640px) {
  .luoi-truong.cot-2 { grid-template-columns: repeat(2, 1fr); }
  .luoi-truong.cot-3 { grid-template-columns: repeat(3, 1fr); }
  .luoi-truong.cot-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Bảng: desktop là bảng, mobile chuyển thành danh sách thẻ --- */

.bang-bao { width: 100%; overflow-x: auto; }
table.bang { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.bang th {
  text-align: left; padding: .625rem .875rem; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--chu-nhat);
  background: var(--the-mo); border-bottom: 1px solid var(--vien); white-space: nowrap;
}
table.bang td { padding: .75rem .875rem; border-bottom: 1px solid var(--vien); vertical-align: middle; }
table.bang tr:last-child td { border-bottom: none; }
table.bang td.phai, table.bang th.phai { text-align: right; }
table.bang .nho { color: var(--chu-mo); font-size: .8rem; }

@media (max-width: 767px) {
  table.bang, table.bang tbody, table.bang tr, table.bang td { display: block; width: 100%; }
  table.bang thead { display: none; }
  table.bang tr {
    border: 1px solid var(--vien); border-radius: var(--r);
    margin: .75rem; padding: .35rem .25rem; background: var(--the);
  }
  table.bang td {
    display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
    padding: .5rem .75rem; border-bottom: 1px dashed var(--vien); text-align: right;
  }
  table.bang td::before {
    content: attr(data-nhan); flex: none; text-align: left;
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--chu-mo);
  }
  table.bang td:last-child { border-bottom: none; }
  table.bang td.hanh-dong-o { justify-content: flex-end; }
}

/* --- Nhãn trạng thái --- */

.nhan {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 650; white-space: nowrap;
  background: var(--the-mo); color: var(--chu-nhat); border: 1px solid var(--vien);
}
.nhan.cho { background: var(--vang-nhat); color: var(--vang); border-color: transparent; }
.nhan.duyet { background: var(--xanh-nhat); color: var(--xanh); border-color: transparent; }
.nhan.tu-choi { background: var(--do-nhat); color: var(--do); border-color: transparent; }
.nhan.tat { background: var(--do-nhat); color: var(--do); border-color: transparent; }
.nhan.bat { background: var(--xanh-nhat); color: var(--xanh); border-color: transparent; }
.nhan.mo-nhat { background: var(--chinh-nhat); color: var(--chinh-dam); border-color: transparent; }

/* --- Thông báo --- */

.thong-bao {
  display: flex; gap: .625rem; align-items: flex-start;
  padding: .75rem .875rem; border-radius: var(--r);
  border: 1px solid var(--vien); background: var(--the);
  font-size: .875rem; margin-bottom: 1rem;
}
.thong-bao .thanh { width: 3px; align-self: stretch; border-radius: 3px; background: var(--chu-mo); flex: none; }
.thong-bao.thanh_cong { background: var(--xanh-nhat); border-color: transparent; color: var(--xanh); }
.thong-bao.thanh_cong .thanh { background: var(--xanh); }
.thong-bao.loi { background: var(--do-nhat); border-color: transparent; color: var(--do); }
.thong-bao.loi .thanh { background: var(--do); }
.thong-bao.canh_bao { background: var(--vang-nhat); border-color: transparent; color: var(--vang); }
.thong-bao.canh_bao .thanh { background: var(--vang); }

.trong {
  padding: 2.5rem 1rem; text-align: center; color: var(--chu-mo);
}
.trong .tieu-de { font-weight: 650; color: var(--chu-nhat); margin-bottom: .25rem; }

/* --- Đăng nhập --- */

.trang-dang-nhap {
  min-height: 100vh; display: grid; place-items: center; padding: 1.25rem;
  background:
    radial-gradient(1100px 520px at 15% -10%, var(--chinh-nhat), transparent 60%),
    var(--nen);
}
.hop-dang-nhap { width: 100%; max-width: 400px; }
.hop-dang-nhap .thuong-hieu { text-align: center; margin-bottom: 1.25rem; }
.hop-dang-nhap .thuong-hieu .ten { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.hop-dang-nhap .thuong-hieu .phu { color: var(--chu-nhat); font-size: .875rem; }

/* --- Kết quả tính giá --- */

.the-gia {
  border: 1px solid var(--chinh); border-radius: var(--r);
  background: linear-gradient(180deg, var(--chinh-nhat), var(--the));
  padding: 1.1rem; margin-bottom: 1rem;
}
.the-gia .nhan-gia { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--chinh-dam); }
.the-gia .gia { font-size: 2rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; margin: .15rem 0; }
.the-gia .phu { color: var(--chu-nhat); font-size: .875rem; }
@media (min-width: 640px) { .the-gia .gia { font-size: 2.4rem; } }

.buoc-tinh { border: 1px solid var(--vien); border-radius: var(--r); overflow: hidden; }
.buoc-tinh .dong-buoc {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  padding: .625rem .875rem; border-bottom: 1px solid var(--vien); font-size: .875rem;
}
.buoc-tinh .dong-buoc:last-child { border-bottom: none; }
.buoc-tinh .stt {
  flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--the-mo);
  color: var(--chu-nhat); font-size: .75rem; font-weight: 700; display: grid; place-items: center;
}
.buoc-tinh .ten-buoc { font-weight: 600; }
.buoc-tinh .mo-ta { color: var(--chu-nhat); font-size: .825rem; flex: 1 1 100%; padding-left: 2rem; }
.buoc-tinh .gia-tri { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.buoc-tinh .con { background: var(--the-mo); padding-left: 1.75rem; }

/* --- Trình dựng công thức --- */

.builder { display: grid; gap: 1rem; }
@media (min-width: 1100px) { .builder { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 1100px) { .builder .cot-phai { position: sticky; top: 1rem; } }

.khoi {
  border: 1px solid var(--vien); border-radius: var(--r); background: var(--the); margin-bottom: .625rem;
}
.khoi-dau {
  display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem;
}
.khoi-dau .so-thu-tu {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: var(--chinh-nhat); color: var(--chinh-dam);
  font-size: .78rem; font-weight: 700; display: grid; place-items: center;
}
.khoi-dau .ten { font-weight: 620; font-size: .9rem; }
.khoi-dau .nhom-nut { margin-left: auto; display: flex; gap: .25rem; }
.khoi-than { padding: 0 .75rem .75rem; }
.khoi.dieu-kien { border-color: var(--chinh); }
.khoi.co-dinh { background: var(--the-mo); }

.nhanh {
  border: 1px dashed var(--vien-dam); border-radius: var(--r-nho);
  padding: .625rem; margin-top: .625rem; background: var(--the-mo);
}
.nhanh > .tieu-de {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--chu-nhat); margin-bottom: .5rem;
}
.nhanh.dung { border-color: var(--xanh); }
.nhanh.sai { border-color: var(--vien-dam); }

.nut-icon {
  width: 36px; height: 36px; border: 1px solid var(--vien); border-radius: var(--r-nho);
  background: var(--the); color: var(--chu-nhat); cursor: pointer;
  font-size: .95rem; line-height: 1; display: grid; place-items: center;
}
.nut-icon:hover { background: var(--the-mo); color: var(--chu); }
.nut-icon.xoa:hover { background: var(--do-nhat); color: var(--do); border-color: var(--do); }

.danh-sach-khoi-them { display: grid; gap: .35rem; }
@media (min-width: 640px) { .danh-sach-khoi-them { grid-template-columns: 1fr 1fr; } }
.khoi-them {
  text-align: left; padding: .55rem .7rem; border: 1px solid var(--vien);
  border-radius: var(--r-nho); background: var(--the); cursor: pointer;
  font-family: inherit; font-size: .8125rem; font-weight: 600; color: var(--chu);
}
.khoi-them:hover { border-color: var(--chinh); background: var(--chinh-nhat); color: var(--chinh-dam); }
.khoi-them .mo-ta { display: block; font-weight: 400; font-size: .75rem; color: var(--chu-mo); margin-top: .1rem; }
.khoi-them:hover .mo-ta { color: var(--chinh-dam); }

/* --- Chi tiết / mô tả --- */

.danh-sach-mo-ta { display: grid; gap: .1rem; }
.danh-sach-mo-ta .dong {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between;
  padding: .5rem 0; border-bottom: 1px solid var(--vien);
}
.danh-sach-mo-ta .dong:last-child { border-bottom: none; }
.danh-sach-mo-ta .nhan-mo-ta { color: var(--chu-nhat); font-size: .85rem; }
.danh-sach-mo-ta .gia-tri-mo-ta { font-weight: 600; font-size: .9rem; text-align: right; }

.hop-chi-tiet { border: 1px solid var(--vien); border-radius: var(--r); overflow: hidden; margin-bottom: .625rem; }
.hop-chi-tiet > summary {
  padding: .75rem .875rem; cursor: pointer; font-weight: 620; font-size: .9rem;
  background: var(--the-mo); list-style: none;
}
.hop-chi-tiet > summary::-webkit-details-marker { display: none; }
.hop-chi-tiet > summary::before { content: "+ "; color: var(--chu-mo); font-weight: 700; }
.hop-chi-tiet[open] > summary::before { content: "− "; }
.hop-chi-tiet > div { padding: .875rem; border-top: 1px solid var(--vien); }

.muc-luc { display: grid; gap: .2rem; }
.muc-luc a { font-size: .85rem; color: var(--chu-nhat); padding: .2rem 0; }
.muc-luc a.chuong { font-weight: 650; color: var(--chu); margin-top: .5rem; }

.van-ban p { color: var(--chu-nhat); }
.van-ban ul { margin: 0 0 .875rem; padding-left: 1.15rem; color: var(--chu-nhat); }
.van-ban li { margin-bottom: .3rem; }
.van-ban h3 { margin: 1.25rem 0 .5rem; }
.van-ban h2 { margin: 1.75rem 0 .625rem; padding-bottom: .4rem; border-bottom: 1px solid var(--vien); }

.ma {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; background: var(--the-mo); border: 1px solid var(--vien);
  border-radius: 5px; padding: .05rem .3rem;
}

.nut-noi {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 30; box-shadow: var(--bong-noi);
}
@media (min-width: 1024px) { .nut-noi { display: none; } }

.an { display: none !important; }
.chi-mobile { display: block; }
@media (min-width: 768px) { .chi-mobile { display: none; } }

.htmx-request .khi-dang-tai { opacity: .55; pointer-events: none; }

/* ===================================================================
   TRANG CÔNG KHAI CHO KHÁCH LẺ
   =================================================================== */

.khung { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1rem; }

.dau-trang-le {
  position: sticky; top: 0; z-index: 40;
  background: var(--the); border-bottom: 1px solid var(--vien);
}
.dau-trang-le .khung {
  display: flex; align-items: center; gap: 1rem; min-height: 64px;
}
.thuong-hieu-le { display: block; color: inherit; }
.thuong-hieu-le:hover { text-decoration: none; }
.thuong-hieu-le .ten { display: block; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.thuong-hieu-le .phu { display: block; font-size: .75rem; color: var(--chu-mo); }
.dieu-huong-le { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
@media (max-width: 560px) {
  .dieu-huong-le .nut { padding: .45rem .6rem; font-size: .8125rem; }
  .thuong-hieu-le .phu { display: none; }
}

.noi-dung-le { min-height: 60vh; padding-bottom: 3rem; }

.hero-le {
  background:
    radial-gradient(900px 420px at 12% -20%, var(--chinh-nhat), transparent 62%),
    var(--nen);
  border-bottom: 1px solid var(--vien);
  padding: 3rem 0 2.5rem; margin-bottom: 2rem;
}
.hero-le h1 { font-size: 1.9rem; letter-spacing: -.03em; max-width: 20ch; }
.hero-le p { color: var(--chu-nhat); max-width: 56ch; margin-top: .75rem; font-size: 1.02rem; }
@media (min-width: 768px) { .hero-le h1 { font-size: 2.6rem; } }

.nhom-sp { margin-bottom: 2.5rem; }
.nhom-sp h2 {
  font-size: 1.1rem; padding-bottom: .5rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--vien);
}

.luoi-sp { display: grid; gap: .875rem; }
@media (min-width: 620px) { .luoi-sp { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .luoi-sp { grid-template-columns: repeat(3, 1fr); } }

.the-sp {
  display: flex; flex-direction: column;
  padding: 1.1rem; border: 1px solid var(--vien); border-radius: var(--r);
  background: var(--the); color: inherit; box-shadow: var(--bong);
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.the-sp:hover {
  text-decoration: none; border-color: var(--chinh);
  transform: translateY(-2px); box-shadow: var(--bong-noi);
}
.the-sp h3 { font-size: 1.02rem; }
.the-sp p { color: var(--chu-nhat); font-size: .875rem; margin: .35rem 0 0; flex: 1; }
.chan-sp {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: 1rem;
}
.chan-sp .xem-gia { color: var(--chinh); font-weight: 650; font-size: .875rem; white-space: nowrap; }

.khoi-quy-trinh { margin: 3rem 0 1rem; }
.khoi-quy-trinh h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.buoc-le {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem; border: 1px solid var(--vien); border-radius: var(--r); background: var(--the);
}
.buoc-le .so {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--chinh-nhat); color: var(--chinh-dam);
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.buoc-le p { color: var(--chu-nhat); font-size: .85rem; margin: .2rem 0 0; }

.duong-dan {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  padding: 1.25rem 0 .5rem; font-size: .8125rem; color: var(--chu-mo);
}
.duong-dan span:last-child { color: var(--chu-nhat); font-weight: 600; }

.dau-sp { margin-bottom: 1.5rem; }
.dau-sp h1 { font-size: 1.65rem; letter-spacing: -.025em; }
.dau-sp p { color: var(--chu-nhat); margin-top: .35rem; max-width: 60ch; }

.luoi-bao-gia { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 900px) {
  .luoi-bao-gia { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .luoi-bao-gia .cot-gia { position: sticky; top: 84px; }
}

.chan-trang-le {
  border-top: 1px solid var(--vien); background: var(--the);
  padding: 2rem 0; margin-top: 2rem;
}
.chan-trang-le .khung { display: grid; gap: 1rem; }
@media (min-width: 768px) { .chan-trang-le .khung { grid-template-columns: 1fr 1fr; } }
.chan-trang-le .ten { font-weight: 650; }
.chan-trang-le .phu { color: var(--chu-mo); font-size: .85rem; }

/* --- Thông báo có bản mới --- */

.bang-cap-nhat {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: .625rem;
  width: calc(100% - 2rem); max-width: 460px;
  padding: .75rem .875rem; border-radius: var(--r);
  background: var(--the); border: 1px solid var(--vien-dam);
  box-shadow: var(--bong-noi); font-size: .875rem;
}
.bang-cap-nhat[hidden] { display: none; }
.bang-cap-nhat span { flex: 1; }

/* Mã bản dựng đang chạy, dùng để đối chiếu khi deploy */
.ma-ban-dung {
  margin-top: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .7rem;
  color: var(--chu-mo);
  letter-spacing: .02em;
}

/* Ô tính giá nổi bật trên trang chủ */
.o-tinh-gia {
  margin-top: -2rem;
  border-color: var(--chinh);
  box-shadow: var(--bong-noi);
}
.o-tinh-gia .the-dau { background: var(--chinh-nhat); border-bottom-color: var(--chinh); }
.o-tinh-gia .the-dau h2 { color: var(--chinh-dam); }

/* Bảng gợi ý bậc số lượng */
table.bang-goi-y tr.dang-xem { background: var(--chinh-nhat); }
table.bang-goi-y tr.dang-xem td { font-weight: 600; }