/* ============================================================================
   GIAO DIỆN CHUNG — giao-dien.css (dùng cho MỌI trang)
   Thương hiệu POM Spa — lấy từ biển hiệu, poster khai trương và menu in 21/10/2026:
   nền giấy kem, mực nâu cà phê, xanh rêu cho nút và liên kết, vàng kim chỉ làm đường viền,
   đỏ rượu chỉ dành cho ưu đãi. Phông: Cormorant Garamond (giống menu in) cho tên spa, tiêu đề,
   giá; Be Vietnam Pro cho chữ thường và ô nhập.
   Đổi thương hiệu = đổi các biến trong :root, ĐỪNG gõ màu/cỡ chữ lẻ trong từng trang.
   MOBILE-FIRST: chữ thường 16px, vùng bấm ≥ 44px, không cuộn ngang ở 375px.
   ⚠️ @import phải đứng ĐẦU file — đặt sau bất kỳ luật nào là trình duyệt bỏ qua.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root{
  /* Màu thương hiệu — đo từ poster, biển hiệu và menu in */
  --giay:#faf3e7;      /* nền trang: giấy kem */
  --giay-2:#f2e5cf;    /* giấy da: dải bảng giá */
  --muc:#3b2a20;       /* mực nâu cà phê: chữ, tên spa */
  --muc-mo:#6e5a4b;    /* chữ phụ — tương phản 6:1 trên nền giấy */
  --reu:#2a4535;       /* xanh rêu: nút, liên kết, khung đặc biệt */
  --reu-dam:#193426;
  --kim:#c9a96e;       /* vàng kim: đường viền, hoa văn — KHÔNG dùng làm chữ trên nền giấy (quá nhạt) */
  --ruou:#8a2e24;      /* đỏ rượu: chỉ cho ưu đãi */
  --kem-sang:#f7efe0;  /* chữ sáng trên nền xanh rêu */

  /* Tên biến của khung mẫu — trang quản trị/đăng nhập vẫn dùng, giữ để khỏi sửa từng trang */
  --nen:var(--giay); --nen-2:var(--giay-2); --mat:#fffbf4;
  --vien:#e6d6bc; --vien-dam:#cdb48e;
  --chu:var(--muc); --chu-mo:var(--muc-mo); --chu-mo-2:#8a7563;
  --chinh:var(--reu); --chinh-dam:var(--reu-dam); --nhan:var(--kim);
  --xanh:#3f6b4a; --do:#a03a2e; --vang:#a8740f;

  --bo:14px; --bo-nho:10px; --bo-to:22px;
  --bong:0 12px 32px rgba(59,42,32,.07);
  --tap:44px;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-md:1rem; --fs-lg:1.1875rem;
  --fs-xl:1.5rem; --fs-2xl:2rem; --fs-3xl:2.75rem;
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:80px;
  --chu-tieu-de:'Cormorant Garamond', 'Times New Roman', serif;
  --chu-than:'Be Vietnam Pro', system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
/* ⚠️ BẮT BUỘC: lớp nào đặt display (vd .man{display:flex}) sẽ ĐÈ thuộc tính `hidden`
   của HTML ⇒ hộp thoại bật sẵn ngay khi mở trang. Dòng này giữ `hidden` luôn thắng. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* lining-nums: số của Cormorant mặc định cao thấp không đều — giá, giờ, số điện thoại phải thẳng hàng cho dễ đọc. */
body{margin:0; min-height:100dvh; background:var(--giay); color:var(--muc);
  font-family:var(--chu-than); font-size:var(--fs-md); line-height:1.6; font-variant-numeric:lining-nums}
h1,h2,h3,h4{font-family:var(--chu-tieu-de); font-weight:600; line-height:1.12; margin:0 0 var(--sp-2); color:var(--muc)}
a{color:var(--reu); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--reu-dam)}
img{max-width:100%; height:auto}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--kim); outline-offset:2px; border-radius:8px}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} }

/* Tên spa viết như biển hiệu: chữ thường, có chân. */
.chu-hieu{font-family:var(--chu-tieu-de); font-weight:600; letter-spacing:-.01em; line-height:1; color:var(--muc); text-decoration:none}

/* ---------------------------------------------------------------- KHUNG ---- */
.boc{width:100%; max-width:1120px; margin:0 auto; padding:0 var(--sp-3)}
@media (min-width:760px){ .boc{padding:0 var(--sp-4)} }
.dinh{position:sticky; top:0; z-index:40; background:rgba(250,243,231,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--vien)}
.dinh-trong{display:flex; align-items:center; gap:var(--sp-3); min-height:60px}
.hieu{display:flex; align-items:center; gap:var(--sp-2); text-decoration:none; color:var(--muc); min-width:0; flex:1}
.hieu .chu-hieu{font-size:1.9rem}
/* Ô chữ tắt tròn của khung mẫu: POM Spa dùng chính tên viết thường làm dấu hiệu nên ẩn ô này. */
.hieu-chu{display:none}
/* display:block là BẮT BUỘC: thẻ inline thì overflow/ellipsis không cắt được ⇒ tên dài đè lên nút bên cạnh. */
.hieu-ten{display:block; font:600 1.75rem/1.05 var(--chu-tieu-de); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hieu-phu{display:block; font-size:var(--fs-xs); color:var(--chu-mo); font-family:var(--chu-than); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.menu{display:none; gap:var(--sp-1)}
.menu a{padding:8px 14px; border-radius:999px; color:var(--muc); text-decoration:none; font-weight:500; font-size:var(--fs-sm)}
.menu a:hover{background:var(--giay-2)}
@media (min-width:760px){ .menu{display:flex} }

/* Dải báo chế độ xem thử — để không ai nhầm dữ liệu giả với dữ liệu thật. */
.dai-thu{background:#f6e7c4; color:#5c4300; border-bottom:1px solid #e8cf94; font-size:var(--fs-sm); padding:8px 0}
.dai-thu.dai-may{background:#dcebe0; color:#1f4a2e; border-bottom-color:#a9cdb4}     /* thử trên máy (máy chủ giả lập) */
.dai-thu.dai-that{background:#f8d9d4; color:#7a1d10; border-bottom-color:#e6a69b}    /* bản chạy trên máy nối dữ liệu thật */

/* --------------------------------------------------------------- NÚT ------- */
.nut{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap);
  padding:0 22px; border-radius:999px; border:1px solid var(--vien-dam); background:transparent; color:var(--muc);
  font:inherit; font-size:var(--fs-sm); font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease}
.nut:hover{background:var(--giay-2); color:var(--muc)}
.nut:active{transform:scale(.98)}
.nut:disabled{opacity:.5; cursor:not-allowed; transform:none}
.nut-chinh{background:var(--reu); border-color:var(--reu); color:var(--kem-sang)}
.nut-chinh:hover{background:var(--reu-dam); border-color:var(--reu-dam); color:var(--kem-sang)}
.nut-xanh{background:var(--xanh); border-color:var(--xanh); color:#fff}
.nut-xanh:hover{background:#355c3f; color:#fff}
.nut-do{color:var(--do); border-color:rgba(160,58,46,.4)}
.nut-nho{min-height:40px; padding:0 16px; font-size:var(--fs-xs)}
.hang-nut{display:flex; flex-wrap:wrap; gap:var(--sp-2)}

/* --------------------------------------------------------------- THẺ ------- */
.the{background:var(--mat); border:1px solid var(--vien); border-radius:var(--bo); box-shadow:var(--bong);
  padding:var(--sp-4) var(--sp-3); margin-bottom:var(--sp-3)}
@media (min-width:760px){ .the{padding:var(--sp-4) var(--sp-5)} }
.mo{color:var(--chu-mo)}
.trong-rong{color:var(--chu-mo); text-align:center; padding:var(--sp-5) var(--sp-3)}

/* --------------------------------------------------------------- Ô NHẬP ---- */
/* ⚠️ Nhãn (label) là block và nằm TRÊN ô nhập. Chỉ dùng placeholder làm nhãn thì gõ xong
   là không còn biết ô đó là ô gì. Ô tích/chọn phải có min-height:0 kẻo bị kéo cao 44px. */
.o-nhap label{display:block; font-weight:600; font-size:var(--fs-sm); margin:var(--sp-3) 0 6px; color:var(--muc)}
.o-nhap input:not([type=checkbox]):not([type=radio]), .o-nhap select, .o-nhap textarea{
  width:100%; min-height:var(--tap); padding:10px 14px; font:inherit; color:var(--muc);
  background:#fffdf9; border:1px solid var(--vien-dam); border-radius:var(--bo-nho)}
.o-nhap textarea{min-height:96px; resize:vertical}
.o-nhap input:focus, .o-nhap select:focus, .o-nhap textarea:focus{border-color:var(--reu); outline:none; box-shadow:0 0 0 3px rgba(42,69,53,.16)}
.o-nhap .tich{display:flex; align-items:center; gap:10px; font-weight:600; margin:var(--sp-3) 0 0; cursor:pointer}
.o-nhap .tich input{width:20px; height:20px; min-height:0; accent-color:var(--reu)}
.o-nhap .goi-y{font-size:var(--fs-xs); color:var(--chu-mo); margin:6px 0 0}
.hai-cot{display:grid; gap:0 var(--sp-3)}
@media (min-width:560px){ .hai-cot{grid-template-columns:1fr 1fr} }
.hop-loi{background:#f9e6e1; border:1px solid #ebbfb6; color:#7d2a21; border-radius:var(--bo-nho);
  padding:10px 14px; font-size:var(--fs-sm); margin:var(--sp-3) 0 0}
.hop-ok{background:#e6efe5; border:1px solid #b9d0bb; color:#24452c; border-radius:var(--bo-nho);
  padding:12px 14px; font-size:var(--fs-sm); margin:var(--sp-3) 0 0}
.hop-nhac{background:#f6e7c4; border:1px solid #e8cf94; color:#5c4300; border-radius:var(--bo-nho);
  padding:12px 14px; font-size:var(--fs-sm)}

/* --------------------------------------------------------- CHIP / TAB ------ */
.chip-hang{display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:var(--sp-2); scrollbar-width:none}
.chip-hang::-webkit-scrollbar{display:none}
.chip{flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px;
  border:1px solid var(--vien-dam); background:transparent; color:var(--muc-mo); font:inherit; font-size:var(--fs-sm);
  font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none}
.chip:hover{background:var(--giay-2); color:var(--muc)}
.chip.chon{background:var(--muc); border-color:var(--muc); color:var(--kem-sang)}
.chip .so{display:inline-block; min-width:20px; margin-left:6px; padding:0 6px; border-radius:999px;
  background:rgba(59,42,32,.08); font-size:.75rem; text-align:center}
.chip.chon .so{background:rgba(255,255,255,.2)}

/* -------------------------------------------------------- NHÃN TRẠNG THÁI -- */
.nhan{display:inline-block; padding:2px 10px; border-radius:999px; font-size:var(--fs-xs); font-weight:600; white-space:nowrap}
.nhan-vang{background:#f6e7c4; color:#5c4300}
.nhan-xanh{background:#e1ece2; color:#24452c}
.nhan-xam{background:#ebe3d8; color:#56483d}
.nhan-do{background:#f6e0db; color:#7d2a21}

/* ------------------------------------------------------------ HỘP BÁO NỔI -- */
/* Hộp "Chắc chắn?" của hàm xacNhan() trong js/tien-ich.js (thay confirm() của trình duyệt). */
.hop-xac-nhan{width:min(92vw,440px); border:1px solid var(--vien-dam); border-radius:var(--bo); padding:var(--sp-4);
  background:var(--giay); color:var(--muc); box-shadow:0 18px 48px rgba(59,42,32,.25)}
.hop-xac-nhan::backdrop{background:rgba(25,20,15,.45)}
.hxn-cau{margin:0; font-weight:600; line-height:1.5}
.hop-xac-nhan .hang-nut{justify-content:flex-end; margin:var(--sp-4) 0 0}
.hxn-nhan{display:block; margin:var(--sp-3) 0 0; font-size:var(--fs-sm); color:var(--muc-mo)}
.hxn-nhan textarea{display:block; width:100%; margin-top:4px; font:inherit; font-size:1rem; color:var(--muc);
  padding:10px 12px; border:1px solid var(--vien-dam); border-radius:var(--bo-nho); background:#fff; resize:vertical}
/* Giao dịch đã huỷ (không xoá): mờ + gạch, vẫn đọc được để tra lại. */
.da-huy{opacity:.6}
.da-huy .gach{text-decoration:line-through}
.nhan-huy{display:inline-block; font-size:var(--fs-xs); font-weight:700; color:#fff; background:var(--do); border-radius:6px; padding:1px 6px}
/* Lớp .bao / .bao-ok / .bao-loi là của hàm bao() trong js/tien-ich.js — đừng đặt trùng tên. */
.khay-bao{position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:90; display:flex;
  flex-direction:column; gap:var(--sp-2); align-items:center; width:min(94vw,460px); pointer-events:none}
.bao{width:100%; pointer-events:auto; background:var(--muc); color:var(--kem-sang); border-radius:var(--bo-nho);
  padding:12px 16px; font-weight:600; font-size:var(--fs-sm); box-shadow:0 10px 30px rgba(0,0,0,.22);
  animation:baoLen .25s ease both}
.bao-loi{background:var(--do)}
.bao-ok{background:var(--reu)}
.bao.tat{animation:baoXuong .3s ease both}
@keyframes baoLen{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes baoXuong{to{opacity:0; transform:translateY(10px)}}