/* 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. */

/* Be Vietnam Pro tự host (OFL, xem fonts/OFL.txt), chỉ hai bộ chữ latin và vietnamese. */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/be-vietnam-pro-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/be-vietnam-pro-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Font dự phòng chỉnh metric khớp Be Vietnam Pro để chữ không nhảy dòng khi font tải xong (lấy từ sacmauviet). */
@font-face { font-family: "Be Vietnam Pro Fallback"; font-weight: 400; src: local("Arial"), local("Liberation Sans"), local("Roboto");
  size-adjust: 110.36%; ascent-override: 90.61%; descent-override: 24.01%; line-gap-override: 0%; }
@font-face { font-family: "Be Vietnam Pro Fallback"; font-weight: 600; src: local("Arial Bold"), local("Liberation Sans Bold"), local("Roboto Bold");
  size-adjust: 105.21%; ascent-override: 95.05%; descent-override: 25.19%; line-gap-override: 0%; }

/* Bảng màu: màu chính lấy đúng xanh dương của logo Tuấn Tú (#176fc0), bố cục theo giao diện Sắc Màu Việt.
   Chỉ có giao diện sáng, giống sacmauviet. */
:root {
  --nen: #fbfcfe;
  --nen-dai: #f5f8fc;
  --the: #ffffff;
  --the-mo: #f2f6fb;
  --vien: #e1e8f0;
  --vien-dam: #d5e0ec;
  --chu: #14212b;
  --chu-nhat: #5c6670;
  --chu-mo: #7a848d;
  --chinh: #176fc0;
  --chinh-dam: #0f528f;
  --chinh-hover: #1462ab;
  --chinh-nhat: #e8f1fb;
  --mint: #4fa8ec;
  --xanh: #157a3c;
  --xanh-nhat: #ebfbf1;
  --do: #c81e1e;
  --do-nhat: #fdeded;
  --vang: #92650a;
  --vang-nhat: #fef3e2;
  --bong: 0 1px 2px rgba(12, 42, 82, .04), 0 8px 24px -16px rgba(12, 42, 82, .18);
  --bong-the: 0 18px 50px -24px rgba(12, 42, 82, .22);
  --bong-noi: 0 20px 50px -20px rgba(12, 42, 82, .35);
  --bong-nut: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 22px -12px rgba(12, 42, 82, .5);
  --vong-focus: 0 0 0 4px rgba(79, 163, 232, .3);
  --r: 16px;
  --r-lon: 24px;
  --r-nho: 12px;
  --rong-sidebar: 260px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: "Be Vietnam Pro", "Be Vietnam Pro Fallback", "Noto Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--chinh); text-decoration: none; }
::selection { background: rgba(23, 111, 192, .2); }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
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: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--vien);
}
.thanh-dinh .ten-app { font-weight: 600; font-size: 1rem; }

.nut-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--vien-dam); border-radius: 999px;
  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;
  box-shadow: var(--bong);
  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 {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.1rem 1rem 1rem; border-bottom: 1px solid var(--vien);
}
.sidebar-dau .ten { font-weight: 700; 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: .9rem .75rem .35rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chinh);
}
.dieu-huong a {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .5rem .75rem; margin-bottom: 2px;
  border-radius: 999px; color: var(--chu-nhat); font-size: .9rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.dieu-huong a:hover { background: var(--the-mo); color: var(--chinh); text-decoration: none; }
.dieu-huong a.dang-chon { background: var(--chinh-nhat); color: var(--chinh); 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); color: #fff;
  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; }

.ung-dung { background: radial-gradient(900px 500px at 100% -10%, var(--chinh-nhat), transparent 60%), var(--nen); }
.tieu-de-trang h1 { font-size: 1.6rem; }

@media (min-width: 1024px) {
  .thanh-dinh { display: none; }
  .sidebar { transform: none; }
  .lop-phu { display: none; }
  .ung-dung { padding-left: var(--rong-sidebar); }
  /* Khung co gian theo man, chi chan o 2400px de dong chu khong qua dai tren man sieu rong. */
  .noi-dung { padding: 1.75rem 2rem 4rem; max-width: 2400px; }
}

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

.the {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r-lon);
  box-shadow: var(--bong-the); margin-bottom: 1rem;
}
.the-dau {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--vien);
}
.the-dau h2, .the-dau h3 { margin-right: auto; }
.the-than { padding: 1.4rem; }
.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(--chinh); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.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 1.25rem;
  border: 1px solid var(--vien-dam); border-radius: 999px;
  background: rgba(255, 255, 255, .85); color: var(--chu);
  font-size: .875rem; font-weight: 600; font-family: inherit; white-space: nowrap;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.nut:hover { background: #fff; border-color: rgba(23, 111, 192, .4); color: var(--chinh); text-decoration: none; }
.nut:active { transform: scale(.97); }
.nut:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--chinh); }
.nut:disabled { opacity: .55; cursor: not-allowed; }
.nut.chinh { background: var(--chinh); border-color: var(--chinh); color: #fff; box-shadow: var(--bong-nut); }
.nut.chinh:hover { background: var(--chinh-hover); border-color: var(--chinh-hover); color: #fff; }
.nut.chinh:active { background: 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 .9rem; font-size: .8125rem; }
.nut.rong { width: 100%; }
.nut.phang { border-color: transparent; background: transparent; }
.nut.phang:hover { background: var(--chinh-nhat); color: var(--chinh); }

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

/* --- Form --- */

.truong { margin-bottom: .875rem; }
.truong > label, .nhan-truong {
  display: block; margin-bottom: .4rem; font-size: .875rem; font-weight: 600; color: var(--chu);
}
input:not([type]), input[type=text], input[type=search], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%; min-height: 48px; padding: .6rem 1rem;
  border: 1px solid var(--vien-dam); border-radius: var(--r);
  background: var(--the); color: var(--chu);
  font-family: inherit; font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:hover, select:hover, textarea:hover { border-color: rgba(23, 111, 192, .3); }
input[readonly] { background: var(--the-mo); color: var(--chu-nhat); }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--chinh); box-shadow: var(--vong-focus);
}
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-nhat); font-size: .8125rem; margin-top: .3rem; }

.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: .7rem .875rem; font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; 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 tbody tr:hover { background: var(--nen-dai); }
table.bang td.phai, table.bang th.phai { text-align: right; }
table.bang .nho { color: var(--chu-mo); font-size: .8rem; }

/* Duoi 1024px (cung moc an menu ben) bang chuyen thanh the */
@media (max-width: 1023px) {
  table.bang, table.bang tbody, table.bang tr, table.bang td { display: block; width: 100%; }
  table.bang tr { width: auto; }
  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: .2rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; 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); 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(900px 520px at 85% -10%, var(--chinh-nhat), transparent 60%),
    radial-gradient(700px 420px at 0% 110%, #eef4fc, transparent 60%),
    var(--nen);
}
.hop-dang-nhap { width: 100%; max-width: 480px; }
.hop-dang-nhap .thuong-hieu { text-align: center; padding: 2rem 1.4rem 0; }
.hop-dang-nhap .thuong-hieu .logo { width: 56px; height: 56px; margin: 0 auto 1rem; }
.hop-dang-nhap .thuong-hieu .ten { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; margin-top: .3rem; }
.hop-dang-nhap .thuong-hieu .phu { color: var(--chu-nhat); font-size: .95rem; margin-top: .3rem; }
.hop-dang-nhap .the-than { padding: 1.5rem 2rem 2rem; }
.hop-dang-nhap .chan { text-align: center; color: var(--chu-nhat); font-size: .8125rem; margin-top: 1.25rem; }

/* Chữ nhỏ viết hoa giãn chữ đặt trên tiêu đề, kiểu sacmauviet */
.dong-nho {
  display: block; color: var(--chinh); font-size: .75rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.huy-hieu {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .9rem;
  border: 1px solid var(--vien); border-radius: 999px; background: #fff;
  font-size: .8125rem; font-weight: 500; color: var(--chu);
}

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

.the-gia {
  border: 1px solid var(--vien-dam); border-radius: var(--r-lon);
  background: linear-gradient(160deg, var(--chinh-nhat), #fff 70%);
  padding: 1.25rem 1.4rem; margin-bottom: 1rem;
}
.the-gia .nhan-gia { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--chinh); }
.the-gia .gia { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin: .2rem 0; color: var(--chinh); font-variant-numeric: tabular-nums; }
.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;
  box-shadow: var(--bong);
}
.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-dam); border-radius: 999px;
  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; padding: .75rem .75rem 0;
}
.dau-trang-le .khung {
  display: flex; align-items: center; gap: 1rem; min-height: 64px; padding: 0 .6rem 0 1rem;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; box-shadow: var(--bong-the);
}
.thuong-hieu-le { display: flex; align-items: center; gap: .6rem; 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; line-height: 1.2; }
.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; }

.trang-le {
  background:
    radial-gradient(1000px 560px at 50% -12%, var(--chinh-nhat), transparent 62%),
    var(--nen);
}

.hero-le { padding: 3.5rem 0 2.5rem; text-align: center; }
.hero-le .huy-hieu { margin-bottom: 1.1rem; }
.hero-le h1 { font-size: 2.2rem; line-height: 1.1; letter-spacing: -.03em; max-width: 18ch; margin: 0 auto; }
.hero-le h1 .nhan-mau {
  background: linear-gradient(90deg, var(--chinh), var(--mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-le p { color: var(--chu-nhat); max-width: 56ch; margin: 1rem auto 0; font-size: 1.05rem; }
@media (min-width: 768px) { .hero-le h1 { font-size: 3.4rem; } .hero-le p { font-size: 1.125rem; } }

.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.25rem; border: 1px solid var(--vien); border-radius: var(--r-lon);
  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-lon); background: var(--the);
}
.buoc-le .so {
  flex: none; width: 30px; height: 30px; border-radius: 999px;
  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(--nen-dai);
  padding: 2.5rem 0; margin-top: 3rem;
}
.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-lon);
  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 { box-shadow: var(--bong-noi); }
.o-tinh-gia .the-dau h2 { color: var(--chinh); }

/* 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; }

/* Logo Tuấn Tú (lấy từ repo qc_print) */
.logo { width: 40px; height: 40px; flex: none; display: block; }
.sidebar-dau .logo { width: 38px; height: 38px; }
.thanh-dinh .logo { width: 32px; height: 32px; }

/* Tiêu đề nhóm trong form dài (trang tính giá nội bộ) */
.the-than form > h3 {
  margin: 1.75rem 0 .9rem; padding-top: 1.25rem; border-top: 1px solid var(--vien);
  color: var(--chinh); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.the-than form > h3:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* Thẻ chỉ chứa một ô số liệu (bảng điều khiển): bỏ khung lồng khung */
.the-than > .the-gia:only-child { margin: 0; padding: 0; border: 0; background: none; }

/* Sơ đồ file bình (trang tính giá nội bộ) */
.so-do-file { margin: 0 0 1rem; text-align: center; }
.so-do-file svg {
  display: block; margin: 0 auto; max-width: 100%; max-height: 420px; overflow: visible;
  background: var(--the-mo); border-radius: var(--r-nho);
}
.so-do-file .khung { fill: #fff; stroke: var(--vien-dam); stroke-width: 2; vector-effect: non-scaling-stroke; }
.so-do-file .tem { fill: var(--chinh-nhat); stroke: var(--chinh); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.so-do-file .nhip { fill: var(--vang-nhat); }
.so-do-file figcaption { color: var(--chu-nhat); font-size: .8125rem; margin-top: .4rem; }

/* Phiếu lệnh sản xuất A4 (in từ /erp-lsx/:id/in) */
.phieu { background: #fff; padding: 1rem; }
.phieu-a4 { max-width: 190mm; margin: 0 auto; color: #000; font-size: 12px; line-height: 1.35; }
.phieu-a4 h1 { font-size: 22px; margin: .1rem 0; }
.phieu-a4 h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: .9rem 0 .3rem; }
.phieu-dau { display: flex; align-items: center; gap: 1rem; border-bottom: 2px solid #000; padding-bottom: .5rem; }
.phieu-dau > div { flex: 1; }
.phieu-dau .logo { width: 56px; height: 56px; }
.phieu-cong-ty { font-weight: 700; font-size: 12px; }
.phieu-ma { font-weight: 600; }
.phieu-qr { width: 30mm; height: 30mm; image-rendering: pixelated; }
.phieu-bang, .phieu-ky { width: 100%; border-collapse: collapse; margin-top: .4rem; }
.phieu-bang th, .phieu-bang td, .phieu-ky th, .phieu-ky td { border: 1px solid #000; padding: 3px 5px; vertical-align: top; text-align: left; }
.phieu-bang th { background: #f0f0f0; font-weight: 600; white-space: nowrap; }
.phieu-cong-doan td:nth-child(6), .phieu-cong-doan td:nth-child(7) { min-width: 22mm; }
.phieu-duoi { display: flex; gap: 1rem; margin-top: .4rem; }
.phieu-duoi > div { flex: 1; }
.phieu-duoi p { margin: .15rem 0; }
.phieu-anh { max-width: 70mm; max-height: 50mm; object-fit: contain; border: 1px solid #ccc; }
.phieu-ky { margin-top: 1rem; }
.phieu-ky td { height: 22mm; }
@media print {
  @page { size: A4; margin: 10mm; }
  .khong-in, .bang-cap-nhat { display: none !important; }
  .phieu { padding: 0; }
}

/* Menu bên: nhóm thu gọn bằng <details>, chỉ nhóm đang xem mở sẵn */
.dieu-huong .nhom { margin-bottom: .25rem; }
.dieu-huong .nhom > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 40px; padding: .5rem .75rem; border-radius: 999px; cursor: pointer;
  list-style: none; user-select: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--chinh);
}
.dieu-huong .nhom > summary::-webkit-details-marker { display: none; }
.dieu-huong .nhom > summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; margin-right: .2rem;
}
.dieu-huong .nhom[open] > summary::after { transform: rotate(45deg); }
.dieu-huong .nhom > summary:hover { background: var(--the-mo); }
.dieu-huong .nhom > summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--chinh); }
.dieu-huong .nhom-con {
  padding: .6rem .75rem .2rem 1.6rem; font-size: .7rem; font-weight: 600; color: var(--chu-mo);
  letter-spacing: .08em; text-transform: uppercase;
}
.the-nguoi-dung .vai a { color: var(--chinh); }
.the-nguoi-dung .vai a.dang-chon { font-weight: 600; text-decoration: underline; }

/* Trang lệnh sản xuất: form bên trái, phiếu LSX xem trước bên phải */
@media (min-width: 1200px) {
  .bo-cuc-lsx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .bo-cuc-lsx .cot-form .luoi-truong.cot-3 { grid-template-columns: repeat(2, 1fr); }
  .cot-phieu { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
}
.cot-phieu { background: var(--the); border: 1px solid var(--vien); border-radius: var(--r-lon); box-shadow: var(--bong-the); padding: .9rem 1rem 1rem; margin-top: 1rem; }
.cot-phieu-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
/* Thu nho phieu A4 cho vua cot; ban in that van mo trang /erp-lsx/:id/in */
.xem-phieu { overflow-x: auto; }
.xem-phieu .phieu-a4 { zoom: .8; }
@media (min-width: 1200px) and (max-width: 1500px) { .xem-phieu .phieu-a4 { zoom: .68; } }
/* Trang lenh co phieu ben phai: dung them be ngang man rong */
@media (min-width: 1600px) { .xem-phieu .phieu-a4 { zoom: .9; } }

/* Danh sach danh muc: ma, ngay, so khong ngat dong; so canh phai */
table.bang td.khong-ngat, table.bang td.so { white-space: nowrap; }
table.bang td.so, table.bang th.so { text-align: right; font-variant-numeric: tabular-nums; }
/* O tim kiem va nut Tim cung hang tren moi man */
.thanh-tim { flex-wrap: nowrap; }
.thanh-tim input { flex: 1; min-width: 0; max-width: 28rem; }
/* Form danh muc tren man rong: 4 cot; trong trang lenh (form nua man) giu 2 cot */
@media (min-width: 1700px) {
  .form-erp .luoi-truong.cot-3 { grid-template-columns: repeat(4, 1fr); }
  .bo-cuc-lsx .form-erp .luoi-truong.cot-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  /* The danh sach tren dien thoai: chu dai (duong dan, ten hang) ngat o bat ky dau, khong day tran ngang */
  table.bang td { overflow-wrap: anywhere; }
  table.bang td.khong-ngat, table.bang td.so { white-space: normal; }
}
/* Tieu de cot duoc xuong dong: nhan dai ("So luong vat lieu can in") khong lam bang tran ngang */
table.bang th { white-space: normal; min-width: 4.5rem; vertical-align: bottom; }
@media (max-width: 1023px) {
  /* Nhan ben trai the co lai toi da 45%, o nhap trong the khong ep be ngang */
  table.bang td::before { flex: 0 1 auto; max-width: 45%; }
  table.bang td input, table.bang td select { min-width: 0; max-width: 100% !important; }
}
/* Laptop: bot dem o de bang nhieu cot vua khung */
@media (min-width: 1024px) and (max-width: 1499px) {
  table.bang th, table.bang td { padding-left: .55rem; padding-right: .55rem; }
}
/* Che do chia doi: phieu ben phai da co bang 7 cong doan, an bang trung ben trai */
@media (min-width: 1200px) { .bo-cuc-lsx .the-cong-doan { display: none; } }
/* Laptop hep: chi giu 1 dong cho cot ma dau tien, cot khac duoc xuong dong de bang vua khung */
@media (min-width: 1024px) and (max-width: 1499px) {
  table.bang td.khong-ngat:not(:first-child) { white-space: normal; }
}

/* Cai dat -> Thong tin cong ty: o logo co anh xem truoc va nut chon file ro rang */
.o-logo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.o-logo img { width: 80px; height: 80px; object-fit: contain; background: #fff; border: 1px solid var(--vien); border-radius: var(--r); padding: 6px; }
.an-tep { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.an-tep:focus-visible + .goi-y, label.nut:focus-within { outline: 2px solid var(--chinh); }