/* ═══════════ GIAO DIỆN "MÉP SÓNG" — lớp hình khối phủ toàn app ═══════════
 * Nạp SAU khối <style> chính trong index.html. Chỉ đổi HÌNH KHỐI và CHỮ
 * TIÊU ĐỀ, không đổi bảng màu: màu nhận vẫn là đỏ MAYO, mọi màu đi qua biến
 * --ten đã khai trong index.html. Gỡ thẻ <link> của tệp này là app về như cũ.
 *
 * Ngôn ngữ hình khối (lấy từ ảnh mẫu chủ tiệm chọn):
 *   1. MÉP SÓNG — thanh tiêu đề, thanh tab và tấm trượt có mép răng cưa tròn
 *      như mép bánh quy, thay cho đường kẻ thẳng.
 *   2. NHÃN DÁN — thẻ và nút có bóng đổ đặc lệch xuống (không nhoè), như một
 *      miếng sticker dán lên giấy.
 *   3. KHUNG VÒM — ảnh sản phẩm nằm trong khung vòm, ảnh đại diện bé trong
 *      khung giọt méo, không còn là ô vuông cắt thẳng.
 *   4. CHỮ TIÊU ĐỀ TRÒN MẬP — Baloo 2 cho tiêu đề mục; Pacifico (chữ uốn)
 *      chỉ cho tên màn trên thanh tiêu đề. Cả hai có đủ dấu tiếng Việt. Chữ
 *      nội dung vẫn là Be Vietnam Pro — chữ uốn đọc chậm, chỉ dùng ở nơi
 *      đọc một lần.
 *
 * Kích thước sóng nằm ở một chỗ (--song) để tiệm khác chỉnh nhanh.
 */
:root{
  --song:9px;                                     /* bán kính mỗi vỏ sò của mép sóng */
  --chu-to:'Baloo 2','Be Vietnam Pro',sans-serif;
  --chu-uon:'Pacifico','Baloo 2',cursive;
  --dan:0 3px 0 var(--vien);                      /* bóng nhãn dán */
}

/* ---------- 1. Mép sóng ----------
   Vẽ bằng radial-gradient lặp ngang: mỗi ô rộng 2×--song chứa nửa hình tròn
   cùng màu nền của khối. Không dùng ảnh, không dùng mask (mask trên iOS cũ
   còn lỗi), co giãn theo mọi bề ngang. */
/* Thanh tiêu đề thành một dải màu (đỏ rất nhạt) để mép sóng hiện ra — trên
   nền trùng màu trang thì sóng vô hình. Chữ xám trên nền này đo 5.2:1. */
header{border-bottom:0;overflow:visible;background:var(--do-nhat);backdrop-filter:none}
header::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--song) * -1 + 1px);height:var(--song);
  pointer-events:none;
  background:radial-gradient(circle at var(--song) 0,var(--do-nhat) calc(var(--song) - .5px),transparent var(--song)) 0 0/calc(var(--song) * 2) var(--song) repeat-x}
nav{border-top:0;overflow:visible}
nav::before{content:"";position:absolute;left:0;right:0;top:calc(var(--song) * -1 + 1px);height:var(--song);
  pointer-events:none;
  background:radial-gradient(circle at var(--song) 100%,var(--nen-mo) calc(var(--song) - .5px),transparent var(--song)) 0 0/calc(var(--song) * 2) var(--song) repeat-x}
/* Tấm trượt: mép trên sóng thay cho góc bo */
.noi{border-radius:0;overflow:visible}
.noi::before{content:"";position:absolute;left:0;right:0;top:calc(var(--song) * -1 + 1px);height:var(--song);
  pointer-events:none;
  background:radial-gradient(circle at var(--song) 100%,var(--kem) calc(var(--song) - .5px),transparent var(--song)) 0 0/calc(var(--song) * 2) var(--song) repeat-x}

/* ---------- 2. Chữ tiêu đề ---------- */
.hd h1{font-family:var(--chu-uon);font-weight:400;font-size:24px;letter-spacing:0;line-height:1.3;color:var(--do)}
.noi-hd h2{font-family:var(--chu-to);font-weight:800;font-size:19px;letter-spacing:0}
.muc{font-family:var(--chu-to);font-size:16.5px;font-weight:700;color:var(--muc);letter-spacing:0;margin:24px 2px 8px}
.muc::before{width:17px;height:17px}
.trong b{font-family:var(--chu-to);font-size:18px}
.g-kq .tt,.b1-mo .b1-tt,.b1-hom-dau b,.b1-o b,.b3-sk-dau b,.bg-n b{font-family:var(--chu-to);letter-spacing:0}

/* ---------- 3. Nhãn dán: thẻ và nút ---------- */
.the{border:1.5px solid var(--vien);border-radius:22px;box-shadow:var(--dan)}
.the[onclick]:active{transform:translateY(2px);box-shadow:0 1px 0 var(--vien)}
.nut{border-radius:999px;box-shadow:0 3px 0 var(--do-dam);font-weight:700}
.nut:active{transform:translateY(2px) scale(.98);box-shadow:0 1px 0 var(--do-dam)}
.nut.phu{border:1.5px solid var(--vien);box-shadow:var(--dan)}
.nut.phu:active{box-shadow:0 1px 0 var(--vien)}
.nut.nhe{box-shadow:0 3px 0 var(--vien)}
.nut.be{border-radius:999px}
.nut[disabled]{box-shadow:none}
.chon{border-radius:18px;box-shadow:var(--dan)}
html .b1-hom,html .b1-tem,html .bg-hanh,html .b3-sk,html .b1-ve,html .b1-bxh-n,html .bg-meo{box-shadow:var(--dan);border-width:1.5px}
html .b1-o{box-shadow:0 3px 0 var(--vien);border-radius:24px}

/* ---------- 4. Khung ảnh ---------- */
/* Ảnh sản phẩm: khung vòm như cửa sổ tiệm bánh, thụt vào một chút cho lộ viền thẻ.
   Tiền tố html: cuahang.js tự chèn CSS của nó SAU tệp này lúc chạy, cùng độ
   ưu tiên thì nó thắng — thêm một bậc để khung vòm không bị đè mất. */
html .ch-o{border-radius:22px;border-width:1.5px;box-shadow:var(--dan)}
html .ch-anh{width:calc(100% - 14px);margin:7px 7px 0;border-radius:50% 50% 14px 14px / 38% 38% 14px 14px}
/* Ảnh đại diện bé: giọt méo — mỗi góc bo một độ khác nhau */
.av{border-radius:44% 56% 52% 48% / 52% 44% 56% 48%}
.av img{border-radius:inherit}

/* ---------- 5. Mây trang trí ----------
   Hai đám mây trắng trên dải tiêu đề đỏ nhạt, như mây trên dải trời của ảnh mẫu. Nằm sau chữ, không
   bắt chạm. Trên màn hẹp chỉ còn một đám để không đè tên màn. */
.hd{position:relative;isolation:isolate}
.hd::before,.hd::after{content:"";position:absolute;pointer-events:none;z-index:-1;height:18px;border-radius:99px;
  background:var(--the)}
.hd::before{width:46px;left:46%;top:12px;
  box-shadow:10px -8px 0 -2px var(--the),24px -4px 0 -4px var(--the)}
.hd::after{width:34px;left:70%;top:30px;opacity:.8;
  box-shadow:8px -7px 0 -3px var(--the)}
@media (max-width:420px){.hd::after{display:none}}

/* ---------- 6. Trang chủ (bố cục riêng ở giaodien.js) ---------- */
/* Vé nhắc lịch: hai khấc tròn hai bên — lịch hẹn là một "tấm vé" đã giữ chỗ */
html .hm-nhac{position:relative;border:1.5px dashed var(--do);border-radius:18px;background:var(--the);box-shadow:none}
html .hm-nhac::before,html .hm-nhac::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;
  border-radius:50%;background:var(--kem);border:1.5px dashed var(--do)}
html .hm-nhac::before{left:-10px;clip-path:inset(0 0 0 50%)}
html .hm-nhac::after{right:-10px;clip-path:inset(0 50% 0 0)}
/* Album: mỗi ảnh một khung méo khác nhau, như bức ảnh dán tay lên sổ */
html .nd-ab{gap:8px}
html .nd-ab img{border-radius:44% 56% 50% 50% / 52% 48% 52% 48%}
html .nd-ab img:nth-child(3n+2){border-radius:28px 28px 50% 50% / 28px 28px 42% 42%}
html .nd-ab img:nth-child(3n){border-radius:56% 44% 46% 54% / 46% 54% 46% 54%}
/* Video: khung vòm như cửa sổ, cùng họ với ảnh sản phẩm */
html .nd-vid img,html .nd-vid .trong{border-radius:66px 66px 14px 14px}
/* Banner: bo to hơn, bóng nhãn dán */
html .nd-bn-o{border-radius:24px;box-shadow:var(--dan)}

/* ---------- 7. Máy tính: thanh tab thành cột dọc bên trái ----------
   Mép sóng chỉ hợp khi thanh tab nằm ngang dưới đáy; ở cột dọc nó thành một
   dải răng cưa lơ lửng trên đầu cột. */
@media (min-width:1100px){nav::before{display:none}}