/* ============================================================
   YANA BEAUTY — web công ty
   Thang đo khoá cứng: 2 phông · 5 cỡ chữ · 3 độ đậm · 3 bo góc · 2 bóng
   Màu lấy từ skill nhan-dien-yana, không chế thêm.
   ============================================================ */

:root{
  /* ---- MÀU (bộ nhận diện Yana) ---- */
  --gold:        #C6A23D;
  --gold-nhat:   #E7C489;
  --gold-dam:    #B98A4B;
  --nau:         #33291F;
  --nau-den:     #1A1614;
  --kem:         #F3EAE0;
  --kem-dam:     #E9DDCD;
  --trang:       #FFFFFF;
  --nen:         #FBF6F1;   /* nền trang: trắng ngà ấm, KHÔNG trắng tinh */
  --chu-phu:     #7A6A5A;   /* chữ phụ xám ấm */
  --vien:        #EADFD3;

  /* ---- KHOẢNG CÁCH: chỉ bội của 4 ---- */
  --k1:4px; --k2:8px; --k3:12px; --k4:16px; --k5:24px; --k6:32px; --k7:48px; --k8:64px; --k9:96px;

  /* ---- CỠ CHỮ: đúng 5 bậc + 1 hero ---- */
  --chu-nho:13px; --chu-thuong:16px; --chu-vua:20px; --chu-to:30px; --chu-tieu-de:44px; --chu-hero:56px;

  /* ---- ĐỘ ĐẬM: đúng 3 ---- */
  --dam-thuong:400; --dam-vua:500; --dam-manh:700;

  /* ---- BO GÓC: đúng 3 + tròn ---- */
  --bo-nho:6px; --bo-vua:12px; --bo-to:20px; --bo-tron:50%;

  /* ---- ĐỔ BÓNG: đúng 2 ---- */
  --bong-nhe:0 1px 2px rgba(51,41,31,.08), 0 2px 8px rgba(51,41,31,.06);
  --bong-noi:0 8px 28px rgba(51,41,31,.14);

  --khung:1200px;       /* bề rộng khung tối đa */
  --khung-hep:760px;    /* cột chữ dài — hẹp cho đỡ mỏi mắt */
  --nhanh:.25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nen); color:var(--nau);
  font-family:'Be Vietnam Pro',-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--chu-thuong); font-weight:var(--dam-thuong); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,'Hoefler Text',serif; font-weight:var(--dam-thuong); line-height:1.2; margin:0}
h1{font-size:var(--chu-tieu-de)} h2{font-size:var(--chu-to)} h3{font-size:var(--chu-vua)}
p{margin:0 0 var(--k4)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--bo-nho)}

.khung{max-width:var(--khung); margin:0 auto; padding:0 var(--k5)}
.khung-hep{max-width:var(--khung-hep); margin:0 auto; padding:0 var(--k5)}
.giua{text-align:center}
.chu-phu{color:var(--chu-phu)}
.nho{font-size:var(--chu-nho)}

/* nhãn nhỏ chữ thưa phía trên tiêu đề */
.nhan{
  font-size:var(--chu-nho); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-dam); font-weight:var(--dam-vua); margin-bottom:var(--k3); display:block;
}
.gach-gold{width:56px; height:2px; background:var(--gold); border:0; margin:var(--k4) 0}
.giua .gach-gold{margin-left:auto; margin-right:auto}

/* ============ NÚT ============ */
.nut{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--k2);
  padding:14px var(--k5); border-radius:var(--bo-nho); border:1px solid transparent;
  font-size:var(--chu-thuong); font-weight:var(--dam-vua); cursor:pointer;
  transition:transform var(--nhanh), box-shadow var(--nhanh), background var(--nhanh), color var(--nhanh);
  font-family:inherit; text-align:center;
}
.nut:hover{transform:translateY(-2px)}
.nut:active{transform:translateY(0)}
.nut-chinh{background:var(--gold); color:var(--nau-den); font-weight:var(--dam-manh); box-shadow:var(--bong-nhe)}
.nut-chinh:hover{background:var(--gold-dam); color:var(--trang); box-shadow:var(--bong-noi)}
.nut-vien{background:transparent; color:var(--nau); border-color:var(--gold)}
.nut-vien:hover{background:var(--gold); color:var(--nau-den)}
.nut-vien-sang{background:transparent; color:var(--trang); border-color:rgba(255,255,255,.75)}
.nut-vien-sang:hover{background:var(--trang); color:var(--nau-den)}
.nut[disabled],.nut.dang-gui{opacity:.6; pointer-events:none}

/* ============ ĐẦU TRANG ============ */
.thanh-bao{background:var(--nau-den); color:var(--kem); font-size:var(--chu-nho); text-align:center; padding:var(--k2) var(--k4)}
.thanh-bao b{color:var(--gold-nhat)}

.dau{position:sticky; top:0; z-index:60; background:rgba(251,246,241,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--vien)}
.dau-trong{display:flex; align-items:center; justify-content:space-between; gap:var(--k4); padding:var(--k3) var(--k5); max-width:var(--khung); margin:0 auto}
.logo{display:flex; align-items:center; gap:var(--k3); flex-shrink:0}
.logo img{height:38px; width:auto}
.logo-chu{font-family:'Playfair Display',serif; font-size:var(--chu-vua); letter-spacing:.06em; line-height:1.1}
.logo-chu small{display:block; font-family:'Be Vietnam Pro',sans-serif; font-size:10px; letter-spacing:.24em; color:var(--gold-dam); text-transform:uppercase}

.menu{display:flex; align-items:center; gap:var(--k5)}
.menu a{font-size:15px; padding:var(--k2) 0; position:relative; white-space:nowrap; color:var(--nau)}
.menu a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--gold); transition:right var(--nhanh)}
.menu a:hover::after,.menu a.dang-o::after{right:0}
.menu a.dang-o{color:var(--gold-dam)}

.dau-phai{display:flex; align-items:center; gap:var(--k3)}

/* chọn tiếng */
.chon-tieng{position:relative}
.chon-tieng>button{
  display:flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--vien);
  border-radius:var(--bo-nho); padding:8px var(--k3); cursor:pointer; font-family:inherit;
  font-size:var(--chu-nho); font-weight:var(--dam-vua); color:var(--nau);
}
.chon-tieng>button:hover{border-color:var(--gold)}
.tieng-list{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; background:var(--trang);
  border:1px solid var(--vien); border-radius:var(--bo-vua); box-shadow:var(--bong-noi);
  min-width:150px; padding:var(--k1); display:none; z-index:70;
}
.tieng-list.mo{display:block}
.tieng-list button{
  display:block; width:100%; text-align:start; background:transparent; border:0; cursor:pointer;
  padding:10px var(--k3); border-radius:var(--bo-nho); font-family:inherit; font-size:14px; color:var(--nau);
}
.tieng-list button:hover{background:var(--kem)}
.tieng-list button[aria-current="true"]{background:var(--kem-dam); font-weight:var(--dam-vua)}

.dong-menu{display:none}
.nut-menu{display:none; background:transparent; border:1px solid var(--vien); border-radius:var(--bo-nho); padding:8px 10px; cursor:pointer}
.nut-menu span{display:block; width:20px; height:2px; background:var(--nau); margin:4px 0; transition:var(--nhanh)}
.nut-menu.mo span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nut-menu.mo span:nth-child(2){opacity:0}
.nut-menu.mo span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============ ẢNH LỚN ĐẦU TRANG ============ */
.hero{position:relative; min-height:82vh; display:flex; align-items:center; overflow:hidden; background:var(--nau-den)}
.hero-nen{position:absolute; inset:0; background:
  radial-gradient(ellipse at 25% 30%, rgba(198,162,61,.30), transparent 58%),
  radial-gradient(ellipse at 78% 72%, rgba(185,138,75,.26), transparent 58%),
  linear-gradient(140deg,#1A1614 0%,#33291F 52%,#221B15 100%);}
.hero-hoavan{position:absolute; inset:0; opacity:.14; background-image:
  repeating-linear-gradient(45deg, transparent 0 22px, rgba(231,196,137,.5) 22px 23px),
  repeating-linear-gradient(-45deg, transparent 0 22px, rgba(231,196,137,.35) 22px 23px);
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 72%);}
.hero-trong{position:relative; z-index:2; color:var(--kem); max-width:760px; padding:var(--k9) var(--k5)}
.hero h1{font-size:var(--chu-hero); color:var(--trang); margin-bottom:var(--k4)}
.hero h1 em{font-style:normal; color:var(--gold-nhat)}
.hero p{font-size:var(--chu-vua); color:rgba(243,234,224,.9); margin-bottom:var(--k6); max-width:56ch}
.hero-nut{display:flex; gap:var(--k3); flex-wrap:wrap}
.hero-sao{display:flex; align-items:center; gap:var(--k3); margin-bottom:var(--k5); font-size:var(--chu-nho); color:var(--gold-nhat); letter-spacing:.1em}

/* ============ Ô SỐ ============ */
.hang-so{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--k5); padding:var(--k8) 0}
.o-so{text-align:center; padding:var(--k5) var(--k3); background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua); box-shadow:var(--bong-nhe)}
.o-so b{display:block; font-family:'Playfair Display',serif; font-size:var(--chu-to); color:var(--gold-dam); font-weight:var(--dam-thuong)}
.o-so span{font-size:var(--chu-nho); color:var(--chu-phu); letter-spacing:.08em; text-transform:uppercase}

/* ============ KHỐI CHUNG ============ */
.khoi{padding:var(--k9) 0}
.khoi-kem{background:var(--kem)}
.khoi-toi{background:var(--nau-den); color:var(--kem)}
.khoi-toi h2{color:var(--trang)}
.khoi-toi .chu-phu{color:rgba(243,234,224,.75)}
.dau-khoi{max-width:640px; margin:0 auto var(--k7); text-align:center}

/* ============ THẺ ============ */
.luoi{display:grid; gap:var(--k5)}
.luoi-2{grid-template-columns:repeat(2,1fr)}
.luoi-3{grid-template-columns:repeat(3,1fr)}
.luoi-4{grid-template-columns:repeat(4,1fr)}

.the{
  background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua);
  overflow:hidden; box-shadow:var(--bong-nhe); transition:transform var(--nhanh), box-shadow var(--nhanh), border-color var(--nhanh);
  display:flex; flex-direction:column;
}
.the:hover{transform:translateY(-4px); box-shadow:var(--bong-noi); border-color:var(--gold-nhat)}
.the-anh{aspect-ratio:4/3; background:linear-gradient(135deg,var(--kem-dam),var(--kem)); display:flex; align-items:center; justify-content:center; position:relative}
.the-anh .bieu-tuong{font-size:44px; opacity:.85}
.the-trong{padding:var(--k5); flex:1; display:flex; flex-direction:column}
.the-trong h3{margin-bottom:var(--k2)}
.the-trong p{color:var(--chu-phu); font-size:15px; flex:1}
.the-gia{margin-top:var(--k3); padding-top:var(--k3); border-top:1px solid var(--vien); display:flex; align-items:baseline; justify-content:space-between; gap:var(--k2)}
.the-gia b{font-family:'Playfair Display',serif; font-size:var(--chu-vua); color:var(--gold-dam); font-weight:var(--dam-thuong)}
.the-gia .nho{color:var(--chu-phu)}

/* ============ BẢNG GIÁ ============ */
.loc{display:flex; gap:var(--k2); flex-wrap:wrap; justify-content:center; margin-bottom:var(--k6)}
.loc button{
  background:var(--trang); border:1px solid var(--vien); border-radius:999px; padding:10px var(--k5);
  cursor:pointer; font-family:inherit; font-size:14px; font-weight:var(--dam-vua); color:var(--nau); transition:var(--nhanh);
}
.loc button:hover{border-color:var(--gold)}
.loc button.dang-o{background:var(--gold); border-color:var(--gold); color:var(--nau-den)}

.bang-gia{background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua); overflow:hidden; box-shadow:var(--bong-nhe)}
.gia-nhom{padding:var(--k4) var(--k5); background:var(--kem); border-bottom:1px solid var(--vien); font-family:'Playfair Display',serif; font-size:var(--chu-vua)}
.gia-dong{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--k5); padding:var(--k4) var(--k5); border-bottom:1px solid var(--vien)}
.gia-dong:last-child{border-bottom:0}
.gia-dong:hover{background:var(--nen)}
.gia-ten{flex:1; min-width:0}
.gia-ten b{font-weight:var(--dam-vua); display:block}
.gia-ten span{font-size:var(--chu-nho); color:var(--chu-phu); display:block; margin-top:2px}
.gia-so{font-family:'Playfair Display',serif; font-size:var(--chu-vua); color:var(--gold-dam); white-space:nowrap; direction:ltr}
.tang-kem{display:inline-block; margin-top:var(--k2); font-size:var(--chu-nho); background:var(--kem); color:var(--gold-dam); border:1px solid var(--kem-dam); border-radius:999px; padding:2px var(--k3)}

/* ============ TRƯỚC / SAU ============ */
.truoc-sau{position:relative; border-radius:var(--bo-vua); overflow:hidden; border:1px solid var(--vien); box-shadow:var(--bong-nhe); aspect-ratio:4/3; background:var(--kem)}
.ts-nua{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; color:var(--chu-phu)}
.ts-sau{clip-path:inset(0 0 0 50%); background:linear-gradient(135deg,var(--kem-dam),var(--gold-nhat))}
.ts-nhan{position:absolute; top:var(--k3); font-size:11px; letter-spacing:.18em; background:rgba(26,22,20,.78); color:var(--gold-nhat); padding:4px var(--k3); border-radius:var(--bo-nho)}
.ts-nhan.t{inset-inline-start:var(--k3)} .ts-nhan.s{inset-inline-end:var(--k3)}
.ts-keo{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--gold)}
.ts-keo::after{content:'⇔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:var(--bo-tron); background:var(--gold); color:var(--nau-den); display:flex; align-items:center; justify-content:center; box-shadow:var(--bong-noi)}
.ts-range{position:absolute; inset:0; width:100%; opacity:0; cursor:ew-resize; margin:0}

/* ============ ĐÁNH GIÁ ============ */
.danh-gia{background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua); padding:var(--k5); box-shadow:var(--bong-nhe); display:flex; flex-direction:column; gap:var(--k3)}
.danh-gia .sao{color:var(--gold); letter-spacing:.16em}
.danh-gia p{font-style:italic; color:var(--nau); flex:1; margin:0}
.dg-ai{display:flex; align-items:center; gap:var(--k3); border-top:1px solid var(--vien); padding-top:var(--k3)}
.dg-anh{width:40px; height:40px; border-radius:var(--bo-tron); background:var(--kem-dam); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; color:var(--gold-dam); flex-shrink:0}
.dg-ai b{display:block; font-weight:var(--dam-vua); font-size:15px}
.dg-ai span{font-size:var(--chu-nho); color:var(--chu-phu)}

/* ============ TIN TỨC ============ */
.bai{display:flex; flex-direction:column; background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua); overflow:hidden; box-shadow:var(--bong-nhe); transition:var(--nhanh)}
.bai:hover{transform:translateY(-4px); box-shadow:var(--bong-noi); border-color:var(--gold-nhat)}
.bai-anh{aspect-ratio:16/10; background:linear-gradient(135deg,var(--nau),var(--gold-dam)); display:flex; align-items:center; justify-content:center; font-size:40px}
.bai-trong{padding:var(--k5); flex:1; display:flex; flex-direction:column; gap:var(--k2)}
.bai-nhan{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dam); font-weight:var(--dam-vua)}
.bai-trong h3{font-size:var(--chu-vua)}
.bai-trong p{color:var(--chu-phu); font-size:15px; flex:1; margin:0}
.bai-chan{display:flex; justify-content:space-between; align-items:center; font-size:var(--chu-nho); color:var(--chu-phu); border-top:1px solid var(--vien); padding-top:var(--k3)}

.o-tim{display:flex; gap:var(--k2); max-width:520px; margin:0 auto var(--k6)}
.o-tim input{flex:1; padding:13px var(--k4); border:1px solid var(--vien); border-radius:var(--bo-nho); font-family:inherit; font-size:15px; background:var(--trang); color:var(--nau)}
.o-tim input:focus{outline:none; border-color:var(--gold)}

/* bài viết đầy đủ */
.bai-viet{padding:var(--k8) 0}
.bai-viet h2{margin:var(--k7) 0 var(--k3)}
.bai-viet h3{margin:var(--k5) 0 var(--k2)}
.bai-viet ul,.bai-viet ol{padding-inline-start:var(--k5); margin:0 0 var(--k4)}
.bai-viet li{margin-bottom:var(--k2)}
.bai-viet blockquote{margin:var(--k5) 0; padding:var(--k4) var(--k5); border-inline-start:3px solid var(--gold); background:var(--kem); border-radius:0 var(--bo-vua) var(--bo-vua) 0; font-style:italic}

/* ============ HỎI ĐÁP ============ */
.hoi{background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua); margin-bottom:var(--k3); overflow:hidden; box-shadow:var(--bong-nhe)}
.hoi>button{width:100%; text-align:start; background:transparent; border:0; padding:var(--k4) var(--k5); cursor:pointer; font-family:inherit; font-size:var(--chu-thuong); font-weight:var(--dam-vua); color:var(--nau); display:flex; justify-content:space-between; align-items:center; gap:var(--k4)}
.hoi>button:hover{background:var(--nen)}
.hoi>button .dau-cong{color:var(--gold-dam); font-size:var(--chu-vua); transition:transform var(--nhanh); flex-shrink:0}
.hoi.mo>button .dau-cong{transform:rotate(45deg)}
.hoi-dap{max-height:0; overflow:hidden; transition:max-height var(--nhanh)}
.hoi.mo .hoi-dap{max-height:600px}
.hoi-dap div{padding:0 var(--k5) var(--k5); color:var(--chu-phu)}

/* ============ LIÊN HỆ ============ */
.o-lien-he{display:flex; gap:var(--k4); align-items:flex-start; padding:var(--k5); background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua); box-shadow:var(--bong-nhe)}
.o-lien-he .bieu-tuong{width:44px; height:44px; border-radius:var(--bo-tron); background:var(--kem); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0}
.o-lien-he b{display:block; margin-bottom:2px}
.o-lien-he a,.o-lien-he span{color:var(--chu-phu); font-size:15px}
.o-lien-he a:hover{color:var(--gold-dam)}
.so-dt{direction:ltr; unicode-bidi:isolate}

.gio-bang{width:100%; border-collapse:collapse; background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua); overflow:hidden}
.gio-bang td{padding:var(--k3) var(--k4); border-bottom:1px solid var(--vien); font-size:15px}
.gio-bang tr:last-child td{border-bottom:0}
.gio-bang td:last-child{text-align:end; color:var(--chu-phu); direction:ltr; unicode-bidi:isolate}
.gio-bang tr.hom-nay{background:var(--kem)}
.gio-bang tr.hom-nay td{font-weight:var(--dam-vua); color:var(--gold-dam)}

/* ============ CHÂN TRANG ============ */
.chan{background:var(--nau-den); color:rgba(243,234,224,.72); padding:var(--k9) 0 var(--k5); margin-top:var(--k9)}
.chan-luoi{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--k7)}
.chan h4{color:var(--trang); font-size:var(--chu-thuong); margin-bottom:var(--k4); font-family:'Be Vietnam Pro',sans-serif; font-weight:var(--dam-vua); letter-spacing:.1em; text-transform:uppercase}
.chan a{display:block; padding:5px 0; color:rgba(243,234,224,.72); font-size:15px; transition:var(--nhanh)}
.chan a:hover{color:var(--gold-nhat)}
.chan-logo img{height:44px; margin-bottom:var(--k4)}
.chan-day{border-top:1px solid rgba(243,234,224,.14); margin-top:var(--k7); padding-top:var(--k5); display:flex; justify-content:space-between; gap:var(--k4); flex-wrap:wrap; font-size:var(--chu-nho)}
.mang-xh{display:flex; gap:var(--k3); margin-top:var(--k4)}
.mang-xh a{width:38px; height:38px; border-radius:var(--bo-tron); border:1px solid rgba(243,234,224,.22); display:flex; align-items:center; justify-content:center; padding:0}
.mang-xh a:hover{background:var(--gold); border-color:var(--gold); color:var(--nau-den)}

/* ============ NÚT NỔI ============ */
/* thanh đặt lịch dính đáy: CHỈ dùng trên điện thoại — máy tính đã có nút ở đầu trang.
   ⚠️ Khai báo `display:none` phải nằm TRƯỚC media query, không thì nó đè ngược lại. */
.thanh-day{display:none}
.nut-noi{position:fixed; inset-block-end:var(--k5); inset-inline-end:var(--k5); z-index:80; display:flex; flex-direction:column; gap:var(--k3); align-items:flex-end}
.tron-noi{width:56px; height:56px; border-radius:var(--bo-tron); display:flex; align-items:center; justify-content:center; box-shadow:var(--bong-noi); font-size:24px; border:0; cursor:pointer; transition:transform var(--nhanh)}
.tron-noi:hover{transform:scale(1.08)}
.tron-wa{background:#25D366; color:#fff}
.tron-lich{background:var(--gold); color:var(--nau-den); font-size:22px}
.chao-wa{
  position:absolute; inset-inline-end:70px; inset-block-end:4px; width:246px; background:var(--trang);
  border:1px solid var(--vien); border-radius:var(--bo-vua); padding:var(--k4); box-shadow:var(--bong-noi);
  font-size:14px; line-height:1.5; opacity:0; transform:translateY(6px); pointer-events:none; transition:var(--nhanh);
}
.chao-wa.hien{opacity:1; transform:translateY(0); pointer-events:auto}
.chao-wa b{display:block; margin-bottom:var(--k1)}
.chao-wa .dong{position:absolute; top:6px; inset-inline-end:8px; background:transparent; border:0; cursor:pointer; color:var(--chu-phu); font-size:16px; line-height:1}

/* ============ ĐIỂM GÃY: đúng 3 mốc ============ */
@media (max-width:1200px){
  .chan-luoi{grid-template-columns:1fr 1fr}
  .menu{gap:var(--k4)}
  .menu a{font-size:14px}
}
@media (max-width:900px){
  :root{--chu-hero:38px; --chu-tieu-de:32px; --chu-to:25px; --chu-vua:18px}
  .nut-menu{display:block}
  /* ĐÓNG thì display:none — không phải đẩy ra ngoài màn hình.
     Đẩy ra ngoài bằng transform làm trang bị kéo rộng ra 742px trên máy 390px
     (đã dính lỗi này 07/08/2026, ảnh chụp thấy menu đè lên logo). */
  .menu{
    display:none;
    position:fixed; inset-block-start:0; inset-inline-end:0; inset-block-end:0; width:min(84vw,320px);
    background:var(--nen); border-inline-start:1px solid var(--vien); flex-direction:column;
    align-items:stretch; gap:0; padding:var(--k8) var(--k5) var(--k5);
    overflow-y:auto; z-index:65; box-shadow:var(--bong-noi);
  }
  .dong-menu{
    display:block; align-self:flex-end; background:transparent; border:1px solid var(--vien);
    border-radius:var(--bo-nho); width:46px; height:46px; font-size:26px; line-height:1;
    cursor:pointer; color:var(--nau); margin-bottom:var(--k4); flex-shrink:0;
  }
  .dong-menu:hover{border-color:var(--gold); background:var(--kem)}
  .menu.mo{display:flex; animation:menu-truot-vao var(--nhanh) both}
  @keyframes menu-truot-vao{from{transform:translateX(100%)} to{transform:translateX(0)}}
  html[dir="rtl"] .menu.mo{animation-name:menu-truot-vao-rtl}
  @keyframes menu-truot-vao-rtl{from{transform:translateX(-100%)} to{transform:translateX(0)}}
  .menu a{padding:var(--k4) 0; border-bottom:1px solid var(--vien); font-size:var(--chu-thuong)}
  .menu a::after{display:none}
  .menu .nut{margin-top:var(--k5)}
  /* 🔴 z-index PHẢI THẤP HƠN `.dau` (60).
     `.dau` là sticky + z-index nên nó tạo TẦNG RIÊNG; `.menu` nằm bên trong nó,
     z-index:65 của menu chỉ so bì trong tầng đó. Để lớp phủ ở 64 thì nó nằm trên
     CẢ thanh đầu trang lẫn menu → khách mở menu ra bấm mục nào cũng không ăn.
     Đo thật 07/08/2026: cả 10 mục đều bị chặn. */
  .man-che{position:fixed; inset:0; background:rgba(26,22,20,.45); z-index:55; opacity:0; pointer-events:none; transition:var(--nhanh)}
  .man-che.hien{opacity:1; pointer-events:auto}
  .luoi-3,.luoi-4{grid-template-columns:repeat(2,1fr)}
  .hang-so{grid-template-columns:repeat(2,1fr); gap:var(--k3); padding:var(--k7) 0}
  .khoi{padding:var(--k8) 0}
  .hero{min-height:auto}
  .hero-trong{padding:var(--k8) var(--k5)}
  .chan{padding-top:var(--k8)}
}
/* ── ĐIỆN THOẠI: nút phải vừa ĐẦU NGÓN TAY, chữ phải ĐỌC ĐƯỢC ──
   Chuẩn bấm bằng ngón là 44×44px. Đo thật 07/08/2026 thấy nút đóng lời chào
   chỉ 21×18px, nút menu 42×40px, nhãn bài viết 11px — đều dưới ngưỡng. */
@media (max-width:900px){
  /* 🔴 BỎ backdrop-filter trên điện thoại.
     `backdrop-filter` tạo khung neo mới cho phần tử `position:fixed` bên trong nó
     → thanh menu bị neo vào đầu trang, chỉ cao 88px thay vì kín màn hình.
     Đo thật 07/08/2026: menu ra x=70 y=60 h=88 thay vì phủ kín 390×844. */
  .dau{backdrop-filter:none; background:var(--nen)}

  .nut-menu{min-width:46px; min-height:46px; display:flex; flex-direction:column;
            align-items:center; justify-content:center}
  .chon-tieng>button{min-height:46px; padding:10px var(--k4)}
  .tieng-list button{min-height:46px}
  .chao-wa .dong{min-width:44px; min-height:44px; display:flex; align-items:center;
                 justify-content:center; font-size:22px; top:0; inset-inline-end:0}
  .chao-wa{padding-top:var(--k5)}
  .loc button{min-height:46px}
  .hoi>button{min-height:52px}
  .menu a{min-height:48px; display:flex; align-items:center}
  .mang-xh a{width:46px; height:46px}
  /* không để chữ nào dưới 13px trên điện thoại */
  .bai-nhan, .ts-nhan, .o-so span, .logo-chu small{font-size:13px}

  /* ── ĐIỆN THOẠI: THANH ĐẶT LỊCH DÍNH ĐÁY, thay cho 2 nút tròn ──
     Nút tròn nổi giữa màn che mất chữ trong bảng giá (thấy trên ảnh chụp thật).
     Thanh đáy vừa không che (đã chừa chỗ bằng padding), vừa dễ với ngón cái. */
  /* Điện thoại: BỎ HẲN mấy nút tròn nổi + bong bóng lời chào.
     Thanh đáy đã có đủ 2 nút rồi; để thêm nút tròn thì nó đè lên chính thanh đáy,
     còn bong bóng lời chào che mất nút "Book via WhatsApp" (thấy trên ảnh chụp thật). */
  .nut-noi{display:none}
  body{padding-bottom:64px}

  .thanh-day{
    display:flex; position:fixed; inset-inline:0; inset-block-end:0; z-index:70;
    background:var(--nen); border-top:1px solid var(--vien);
    padding:var(--k2) var(--k3); gap:var(--k2);
    box-shadow:0 -4px 16px rgba(51,41,31,.10);
  }
  .thanh-day .nut{flex:1; min-height:48px; padding:12px var(--k3); font-size:15px}
}

@media (max-width:600px){
  :root{--chu-hero:30px; --chu-tieu-de:26px; --chu-to:22px}
  .khung,.khung-hep{padding:0 var(--k4)}
  .luoi-2,.luoi-3,.luoi-4{grid-template-columns:1fr}
  .chan-luoi{grid-template-columns:1fr; gap:var(--k5)}
  .gia-dong{flex-direction:column; gap:var(--k2)}
  .hero-nut{flex-direction:column; align-items:stretch}
  .hero-nut .nut{width:100%}
  .o-tim{flex-direction:column}
  .nut-noi{inset-block-end:var(--k4); inset-inline-end:var(--k4)}
  .tron-noi{width:52px; height:52px}
  .chao-wa{width:214px}
  .dau-trong{padding:var(--k3) var(--k4)}
  .logo img{height:32px}
  .chan-day{flex-direction:column; gap:var(--k2)}
}

/* ============ PHẢI-SANG-TRÁI (tiếng Ả Rập) ============ */
html[dir="rtl"] body{font-family:'Noto Kufi Arabic','Be Vietnam Pro',sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{font-family:'Noto Kufi Arabic','Playfair Display',serif}
html[dir="rtl"] .nhan{letter-spacing:normal}
html[dir="rtl"] .ts-sau{clip-path:inset(0 50% 0 0)}
html[dir="rtl"] .menu a::after{left:auto; right:0; transition:left var(--nhanh)}
html[dir="rtl"] .menu a:hover::after,html[dir="rtl"] .menu a.dang-o::after{left:0; right:0}
/* số điện thoại, giá tiền, giờ — luôn giữ trái-sang-phải */
.ltr{direction:ltr; unicode-bidi:isolate; display:inline-block}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* hiện dần khi cuộn tới */
.hien-dan{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.hien-dan.roi{opacity:1; transform:none}