/* ==========================================================================
   YANA — TRANG VIỆC LÀM (vieclam.yanabeauty.com.vn)
   Người xem: thợ nail/mi/phun xăm/da người Việt đang cân nhắc sang Dubai.
   Giọng nhìn: bình tĩnh, sáng, ít trang trí. Đáng tin > lộng lẫy.

   ⚠️ FILE NÀY TỰ CHỨA. Cấm bê biến từ CSS của app khác sang —
      thiếu một biến là nền thành trong suốt mà trình duyệt không báo gì.
      (bẫy đã dính 07/08/2026)

   Thang đo khoá cứng: 2 phông · 5 cỡ chữ · 3 độ đậm · 3 bo góc · 2 bóng
   ========================================================================== */

: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:       #FBF7F2;
  --chu-phu:   #6F6053;
  --vien:      #E7DCCF;
  --xanh:      #2E6B4F;   /* dùng đúng cho dấu "có / được" */
  --xanh-nen:  #EAF3EE;
  --do:        #A8402F;   /* dùng đúng cho dấu "không / cấm" */
  --do-nen:    #F8ECE9;

  /* ---- 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:14px; --chu-thuong:17px; --chu-vua:21px;
  --chu-to:28px;  --chu-tieu-de:38px; --chu-hero:46px;

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

  /* ---- BO GÓC: đúng 3 ---- */
  --bo-nho:8px; --bo-vua:14px; --bo-to:22px;

  /* ---- ĐỔ BÓNG: đúng 2 ---- */
  --bong-nhe:0 1px 2px rgba(51,41,31,.07), 0 2px 10px rgba(51,41,31,.05);
  --bong-noi:0 10px 30px rgba(51,41,31,.13);

  --khung:1140px;
  --khung-hep:720px;
  --nhanh:.25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

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.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:var(--dam-vua);
  line-height:1.22;
  margin:0;
}
h1{ font-size:var(--chu-tieu-de) }
h2{ font-size:var(--chu-to) }
h3{ font-size:var(--chu-vua); font-family:'Be Vietnam Pro',sans-serif; font-weight:var(--dam-manh) }
p{ margin:0 0 var(--k4) }
a{ color:inherit; text-decoration:none }
/* height:auto BẮT BUỘC PHẢI CÓ. Thẻ <img> có ghi width="…" height="…" để trình duyệt
   chừa sẵn chỗ; thiếu dòng này thì chiều cao đó bị dùng làm chiều cao thật →
   ảnh 1600×1200 bị bóp lại còn 522×1200, người trong ảnh gầy nhẳng ra.
   (đo thật 08/08/2026, ảnh đầu trang đã dính) */
img{ max-width:100%; display:block; height:auto }
:focus-visible{ outline:3px 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) }
.dam{ font-weight:var(--dam-manh) }

.nhan{
  display:block; font-size:var(--chu-nho); letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-dam);
  font-weight:var(--dam-vua); margin-bottom:var(--k3);
}
.gach{ width:52px; height:2px; background:var(--gold); border:0; margin:var(--k4) 0 var(--k5) }
.giua .gach{ margin-left:auto; margin-right:auto }

/* ===================== THANH ĐẦU TRANG ===================== */
.dau{
  position:sticky; top:0; z-index:60;
  background:var(--trang); border-bottom:1px solid var(--vien);
}
.dau .khung{ display:flex; align-items:center; gap:var(--k4); height:68px }
.dau-logo{ display:flex; align-items:center; gap:var(--k3); margin-right:auto }
.dau-logo img{ height:38px; width:auto }
.dau-logo b{ font-family:'Playfair Display',Georgia,serif; font-size:var(--chu-vua); font-weight:var(--dam-vua) }
.dau-logo span{ display:block; font-size:var(--chu-nho); color:var(--chu-phu); line-height:1.2 }

.menu{ display:flex; align-items:center; gap:var(--k5) }
.menu a{ font-size:var(--chu-nho); font-weight:var(--dam-vua); padding:var(--k2) 0; border-bottom:2px solid transparent }
.menu a:hover{ color:var(--gold-dam) }
.menu a.dang-o{ border-bottom-color:var(--gold) }
.menu .dong-menu{ display:none }

.nut-menu{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--vien); border-radius:var(--bo-nho); cursor:pointer;
}
.nut-menu span{ display:block; width:20px; height:2px; background:var(--nau); position:relative }
.nut-menu span::before,.nut-menu span::after{
  content:''; position:absolute; left:0; width:20px; height:2px; background:var(--nau);
}
.nut-menu span::before{ top:-6px } .nut-menu span::after{ top:6px }

.man-che{
  display:none; position:fixed; inset:0; z-index:55;
  background:rgba(26,22,20,.5);
}
.man-che.mo{ display:block }

/* ===================== NÚT ===================== */
.nut{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--k2);
  padding:15px var(--k5); border-radius:var(--bo-nho); border:1px solid transparent;
  font-family:inherit; font-size:var(--chu-thuong); font-weight:var(--dam-vua);
  cursor:pointer; text-align:center; min-height:52px;
  transition:transform var(--nhanh), box-shadow var(--nhanh), background var(--nhanh);
}
.nut:hover{ transform:translateY(-2px) }
.nut:active{ transform:translateY(0) }
.nut-chinh{ background:var(--nau); color:var(--kem) }
.nut-chinh:hover{ box-shadow:var(--bong-noi) }
.nut-vien{ background:transparent; color:var(--nau); border-color:var(--nau) }
.nut-vien:hover{ background:var(--nau); color:var(--kem) }
.nut-gold{ background:var(--gold); color:var(--nau-den); font-weight:var(--dam-manh) }
.hang-nut{ display:flex; flex-wrap:wrap; gap:var(--k3) }
.giua .hang-nut{ justify-content:center }

/* ===================== KHỐI ===================== */
.khoi{ padding:var(--k9) 0 }
.khoi-hep{ padding:var(--k8) 0 }
.khoi-kem{ background:var(--kem) }
.khoi-trang{ background:var(--trang) }
.dau-khoi{ max-width:640px; margin-bottom:var(--k7) }
.giua .dau-khoi,.dau-khoi.giua{ margin-left:auto; margin-right:auto; text-align:center }

/* ===================== TRANG ĐẦU ===================== */
.hero{ background:var(--trang); border-bottom:1px solid var(--vien); padding:var(--k8) 0 }
.hero-luoi{ display:grid; grid-template-columns:1fr 1fr; gap:var(--k7); align-items:center }
.hero h1{ font-size:var(--chu-hero) }
.hero-anh img{ border-radius:var(--bo-to); box-shadow:var(--bong-noi); width:100% }
.hero-chu-to{ font-size:var(--chu-vua); color:var(--chu-phu) }

/* ba điều kiểm chứng được */
.luoi-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--k5) }
.the-so{
  background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua);
  padding:var(--k5); box-shadow:var(--bong-nhe);
}
/* CHỈ con trực tiếp mới là con số to — <b> nằm trong phần chữ giải thích
   phải giữ nguyên cỡ, kẻo tên công ty nhảy thành tiêu đề (đã dính 08/08/2026) */
.the-so > b{ display:block; font-family:'Playfair Display',Georgia,serif; font-size:var(--chu-to); line-height:1.2 }
.the-so > span{ display:block; font-size:var(--chu-nho); color:var(--chu-phu); margin-top:var(--k2) }
.the-so span b{ font-weight:var(--dam-manh) }

/* khối nhấn: không thu tiền */
.khoi-nhan{ background:var(--nau); color:var(--kem) }
.khoi-nhan h2{ color:var(--trang) }
.khoi-nhan .nhan{ color:var(--gold-nhat) }
.khoi-nhan .chu-phu{ color:var(--kem-dam) }
.luoi-tick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--k4) }
.tick{ display:flex; gap:var(--k3); align-items:flex-start }
.tick i{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  background:var(--gold); color:var(--nau-den);
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-weight:var(--dam-manh); font-size:var(--chu-nho); margin-top:3px;
}

/* thẻ chung */
.luoi-the{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--k5) }
.the{
  background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua);
  padding:var(--k6); box-shadow:var(--bong-nhe);
}
.the h3{ margin-bottom:var(--k3) }
.the p:last-child{ margin-bottom:0 }
.the-nho{ padding:var(--k5) }

/* bốn thẻ thì xếp đủ 4 cột cho khỏi thừa một ô lẻ loi xuống hàng dưới */
.luoi-the.bon{ grid-template-columns:repeat(4,1fr) }
@media (max-width:900px){ .luoi-the.bon{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .luoi-the.bon{ grid-template-columns:1fr } }

/* lưới ảnh */
.luoi-anh{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--k4) }
.o-anh{ position:relative; border-radius:var(--bo-vua); overflow:hidden; background:var(--kem-dam) }
.o-anh img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3 }
.o-anh.cao img{ aspect-ratio:3/4 }
.o-anh figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:var(--k4) var(--k4) var(--k3);
  font-size:var(--chu-nho); color:#fff;
  background:linear-gradient(to top,rgba(26,22,20,.82),rgba(26,22,20,0));
}

/* danh sách điểm ngon */
.ds-ngon{ list-style:none; margin:0; padding:0; display:grid; gap:var(--k3) }
.ds-ngon li{
  background:var(--trang); border:1px solid var(--vien); border-left:3px solid var(--gold);
  border-radius:var(--bo-nho); padding:var(--k4) var(--k5);
}
.ds-ngon b{ font-weight:var(--dam-manh) }

/* bảng */
.bang-cuon{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table{ width:100%; border-collapse:collapse; min-width:520px; background:var(--trang) }
th,td{ padding:var(--k3) var(--k4); text-align:left; border-bottom:1px solid var(--vien); font-size:var(--chu-nho) }
th{ background:var(--kem); font-weight:var(--dam-manh); white-space:nowrap }

/* cấp bậc */
.bac{ display:grid; gap:var(--k3) }
.bac-o{
  display:flex; gap:var(--k4); align-items:flex-start;
  background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua); padding:var(--k5);
}
.bac-o em{
  flex:0 0 44px; width:44px; height:44px; border-radius:50%; background:var(--kem);
  color:var(--gold-dam); font-style:normal; font-weight:var(--dam-manh);
  display:flex; align-items:center; justify-content:center; font-size:var(--chu-nho);
}
.bac-o b{ display:block }

/* hỏi đáp */
.hd{ border:1px solid var(--vien); border-radius:var(--bo-vua); background:var(--trang); margin-bottom:var(--k3); overflow:hidden }
.hd summary{
  cursor:pointer; list-style:none; padding:var(--k5);
  font-weight:var(--dam-manh); display:flex; gap:var(--k3); align-items:flex-start;
  min-height:56px;
}
.hd summary::-webkit-details-marker{ display:none }
.hd summary::after{ content:'+'; margin-left:auto; color:var(--gold-dam); font-size:var(--chu-vua); line-height:1 }
.hd[open] summary::after{ content:'–' }
.hd-noi{ padding:0 var(--k5) var(--k5); color:var(--chu-phu) }
.hd-noi p:last-child{ margin-bottom:0 }

/* tin tiệm */
.tin{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--k5) }
.tin-o{ background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-vua); overflow:hidden; box-shadow:var(--bong-nhe) }
.tin-o img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.tin-noi{ padding:var(--k5) }
.tin-ngay{ font-size:var(--chu-nho); color:var(--gold-dam); font-weight:var(--dam-vua); letter-spacing:.08em }
.tin-o h3{ margin:var(--k2) 0 var(--k3) }

/* hộp lưu ý */
.hop{
  border-radius:var(--bo-vua); padding:var(--k5) var(--k6);
  border:1px solid var(--vien); background:var(--trang);
}
.hop-xanh{ background:var(--xanh-nen); border-color:#CBE0D4 }
.hop-do{ background:var(--do-nen); border-color:#EBD2CC }
.hop h3{ margin-bottom:var(--k2) }
.hop p:last-child{ margin-bottom:0 }

/* ===================== CHÂN TRANG ===================== */
.chan{ background:var(--nau-den); color:var(--kem-dam); padding:var(--k8) 0 var(--k6); margin-top:var(--k9) }
.chan a{ color:var(--kem-dam) }
.chan a:hover{ color:var(--gold-nhat) }
.chan-luoi{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--k7) }
.chan img{ height:44px; width:auto; margin-bottom:var(--k4) }
.chan h4{ font-size:var(--chu-nho); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-nhat); margin:0 0 var(--k3) }
.chan ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--k2) }
.chan-cuoi{
  border-top:1px solid rgba(243,234,224,.16); margin-top:var(--k7); padding-top:var(--k5);
  font-size:var(--chu-nho); color:#A79B8E; display:flex; flex-wrap:wrap; gap:var(--k4);
}

/* ===================== MÁY NHỎ ===================== */
@media (max-width:900px){
  :root{ --chu-hero:34px; --chu-tieu-de:29px; --chu-to:24px; --chu-vua:19px }
  .khoi{ padding:var(--k8) 0 }
  .hero-luoi{ grid-template-columns:1fr; gap:var(--k6) }
  .luoi-3{ grid-template-columns:1fr }
  .luoi-anh{ grid-template-columns:repeat(2,1fr) }
  .chan-luoi{ grid-template-columns:1fr; gap:var(--k6) }

  .nut-menu{ display:flex }
  /* Menu: ĐÓNG thì display:none — KHÔNG đẩy ra ngoài bằng transform,
     kẻo trang rộng thêm 350px trên điện thoại (bẫy đã dính ở web khách). */
  .menu{
    display:none;
    position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:65;
    background:var(--trang); border-left:1px solid var(--vien);
    flex-direction:column; align-items:stretch; gap:0;
    padding:var(--k5); overflow-y:auto;
    box-shadow:var(--bong-noi);
  }
  .menu.mo{ display:flex; animation:truot .25s ease }
  @keyframes truot{ from{ transform:translateX(24px); opacity:.4 } to{ transform:none; opacity:1 } }
  .menu a{
    font-size:var(--chu-thuong); padding:var(--k4) var(--k2);
    border-bottom:1px solid var(--vien);
  }
  .menu a.dang-o{ color:var(--gold-dam) }
  /* Phải có nút × trong menu: menu phủ kín thì nút 3 gạch bị che,
     bấm ra ngoài không đủ vì dải trống quá hẹp. */
  .menu .dong-menu{
    display:flex; align-self:flex-end; width:44px; height:44px;
    align-items:center; justify-content:center; margin-bottom:var(--k3);
    background:none; border:1px solid var(--vien); border-radius:var(--bo-nho);
    font-size:var(--chu-vua); cursor:pointer; color:var(--nau); font-family:inherit;
  }
}

@media (max-width:560px){
  .khung,.khung-hep{ padding:0 var(--k4) }
  .luoi-anh{ grid-template-columns:1fr }
  .the{ padding:var(--k5) }
  .hop{ padding:var(--k5) var(--k4) }
  .hang-nut .nut{ width:100% }
}

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

/* ==========================================================================
   KHUNG CHAT — con bot tuyển dụng gắn thẳng vào trang (assets/chat.js)
   ========================================================================== */

.chat-nut{
  position:fixed; right:var(--k5); bottom:var(--k5); z-index:70;
  display:flex; align-items:center; gap:var(--k2);
  padding:14px var(--k5); min-height:52px;
  background:var(--gold); color:var(--nau-den);
  border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:var(--chu-thuong); font-weight:var(--dam-manh);
  box-shadow:var(--bong-noi);
  transition:transform var(--nhanh);
}
.chat-nut:hover{ transform:translateY(-2px) }
.chat-nut-cham{
  width:9px; height:9px; border-radius:50%; background:#2E6B4F;
  box-shadow:0 0 0 3px rgba(46,107,79,.22);
}

.chat-bang{
  position:fixed; right:var(--k5); bottom:var(--k5); z-index:71;
  width:min(390px, calc(100vw - 32px)); max-height:min(620px, calc(100vh - 32px));
  display:none; flex-direction:column; overflow:hidden;
  background:var(--trang); border:1px solid var(--vien); border-radius:var(--bo-to);
  box-shadow:var(--bong-noi);
}
.chat-bang.mo{ display:flex }

.chat-dau{
  display:flex; align-items:center; gap:var(--k3);
  padding:var(--k4) var(--k5); background:var(--nau); color:var(--kem);
}
.chat-dau b{ display:block; font-size:var(--chu-thuong) }
.chat-dau .nho{ color:var(--kem-dam) }
.chat-dong{
  margin-left:auto; width:36px; height:36px; flex:0 0 36px;
  background:rgba(243,234,224,.12); color:var(--kem);
  border:0; border-radius:var(--bo-nho); cursor:pointer;
  font-size:var(--chu-vua); line-height:1; font-family:inherit;
}

.chat-dai{
  padding:var(--k2) var(--k5); font-size:var(--chu-nho);
  background:var(--xanh-nen); color:var(--xanh); border-bottom:1px solid #CBE0D4;
}

.chat-loi{
  flex:1 1 auto; overflow-y:auto; padding:var(--k5);
  display:flex; flex-direction:column; gap:var(--k3);
  background:var(--nen); min-height:220px;
}
.chat-tin{
  max-width:84%; padding:10px var(--k4); border-radius:var(--bo-vua);
  font-size:var(--chu-nho); line-height:1.65; white-space:pre-wrap; word-break:break-word;
}
.chat-tin.bot{ background:var(--kem); border:1px solid var(--vien); align-self:flex-start }
.chat-tin.toi{ background:var(--nau); color:var(--kem); align-self:flex-end }
.chat-tin.nguoi{ background:var(--xanh-nen); border:1px solid #CBE0D4; align-self:flex-start }
.chat-ten{ display:block; font-size:11px; font-weight:var(--dam-manh); color:var(--xanh); margin-bottom:2px }
.chat-tin img{ max-width:150px; border-radius:var(--bo-nho); margin-top:var(--k2) }
.chat-danggo{ color:var(--chu-phu); font-style:italic }

.chat-goiy{ display:flex; flex-wrap:wrap; gap:var(--k2); padding:0 var(--k5) var(--k3); background:var(--nen) }
.chat-goiy[hidden]{ display:none }
.chat-goiy button{
  background:var(--trang); border:1px solid var(--vien); border-radius:999px;
  padding:8px var(--k4); font-family:inherit; font-size:var(--chu-nho);
  color:var(--nau); cursor:pointer;
}
.chat-goiy button:hover{ border-color:var(--gold); color:var(--gold-dam) }

.chat-chon{ padding:0 var(--k5); font-size:var(--chu-nho); color:var(--gold-dam); background:var(--nen) }
.chat-chon:empty{ display:none }

.chat-go{
  display:flex; align-items:center; gap:var(--k2);
  padding:var(--k3) var(--k4); border-top:1px solid var(--vien); background:var(--trang);
}
.chat-anh{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 44px;
  border:1px solid var(--vien); border-radius:var(--bo-nho); cursor:pointer; font-size:var(--chu-vua);
}
.chat-anh:hover{ border-color:var(--gold) }
.chat-anh .an-di{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
#chatO{
  flex:1 1 auto; min-width:0; height:44px; padding:0 var(--k3);
  border:1px solid var(--vien); border-radius:var(--bo-nho);
  font-family:inherit; font-size:var(--chu-thuong); color:var(--nau); background:var(--trang);
}
#chatO:focus{ outline:2px solid var(--gold); outline-offset:1px }
.chat-gui{
  height:44px; padding:0 var(--k4); flex:0 0 auto;
  background:var(--nau); color:var(--kem); border:0; border-radius:var(--bo-nho);
  font-family:inherit; font-size:var(--chu-thuong); font-weight:var(--dam-vua); cursor:pointer;
}
.chat-gui:disabled{ opacity:.5; cursor:default }

/* điện thoại: khung chat phủ kín cho dễ gõ */
@media (max-width:560px){
  .chat-nut{ right:var(--k4); bottom:var(--k4); font-size:var(--chu-nho) }
  .chat-bang{
    right:0; bottom:0; width:100vw; max-height:100dvh; height:100dvh;
    border-radius:0; border:0;
  }
  .chat-loi{ min-height:0 }
}