/* Trang chủ KIMLY — hành trình hạt mực (spec v3, 29/09/2026).
   Bộ màu + chữ lấy từ /personal-color: nền #FDF7F4 · nút #8A5D4E · chữ đề #4A2F27 · Playfair + Be Vietnam Pro.
   Phần dùng chung (kính, nút, thanh trên, Liên hệ, popup) nằm ở khung.css. Kính chỉ ở 5 chỗ: hoa 3D · thanh trên · nút Liên hệ · thẻ cơ sở · bảng liên hệ. Kính luôn có màu phía sau. */
:root{
  --nen:#FDF7F4;--kem:#F6EAE3;--nau:#8A5D4E;--nau-dam:#7A4F41;--nau-sang:#A67564;--de:#4A2F27;--chu:#382E29;--phu:#6F5F58;
  --serif:"Playfair Display","KL Serif",Georgia,serif;--sans:"Be Vietnam Pro","KL Sans",system-ui,-apple-system,sans-serif;
  --sau:0;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:var(--kem);color:var(--chu);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
[hidden]{display:none!important}
h1,h2{font-family:var(--serif);font-weight:500;color:var(--de);letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(25px,6.2vw,44px);line-height:1.14}
h2{font-size:clamp(25px,6.2vw,44px);line-height:1.14}


/* ---------- sân khấu 3D phía sau hành trình ---------- */
#san-khau{position:fixed;inset:0;width:100%;height:100%;height:100lvh;z-index:0;display:block;opacity:0;transition:opacity .6s;pointer-events:none}
.co-3d #san-khau{opacity:calc(1 - var(--sau))}
.co-3d .hoa-tinh{opacity:0}
.tinh #san-khau{display:none}

/* ---------- hành trình ---------- */
#hanh-trinh{position:relative;z-index:1}
/* nền dự phòng khi chưa/không có 3D: cùng bảng màu với sân khấu */
.chang{position:relative;height:230vh;height:230svh}
#chang-0{height:175vh;height:175svh}
#chang-4,#chang-5{height:220vh;height:220svh}
html:not(.co-3d) #chang-0,html:not(.co-3d) #chang-4,html:not(.co-3d) #chang-5{background:radial-gradient(60% 40% at 18% 20%,#E3B3A2aa,transparent 70%),radial-gradient(55% 45% at 90% 55%,#B9827066,transparent 70%),#F6EAE3}
html:not(.co-3d) #chang-1{background:radial-gradient(60% 40% at 18% 20%,#CFA088aa,transparent 70%),radial-gradient(55% 45% at 90% 55%,#9A6B5766,transparent 70%),#F3E4DA}
html:not(.co-3d) #chang-3{background:radial-gradient(60% 40% at 18% 20%,#B9A197aa,transparent 70%),radial-gradient(55% 45% at 90% 55%,#7E655C55,transparent 70%),#F0E6E1}
html:not(.co-3d) #chang-2{background:radial-gradient(60% 40% at 18% 20%,#EDA99Aaa,transparent 70%),radial-gradient(55% 45% at 90% 55%,#C86F7266,transparent 70%),#F9E9E4}

.dinh{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-rows:1fr auto;padding:calc(76px + env(safe-area-inset-top)) 24px calc(96px + env(safe-area-inset-bottom));gap:18px;max-width:1240px;margin:0 auto}
.hinh{position:relative;display:grid;place-items:center;min-height:0}
.hinh svg{width:100%;max-width:520px;max-height:100%;overflow:visible}
.hinh-mat svg{max-width:300px}
.chu-hinh{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:13.5px;font-weight:500;color:var(--nau);letter-spacing:.02em}
.hinh-hoa{pointer-events:none}
.hoa-tinh{width:min(62vw,340px);height:auto;transition:opacity .6s;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.chu{max-width:620px}
.o-bieu-tuong{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 18px;border-radius:999px;margin-bottom:16px}
.o-bieu-tuong img{height:30px;width:auto}
.co-3d .o-bieu-tuong{display:none} /* có 3D thì biểu tượng nổi khối trong cảnh thay cho viên nhỏ này */
.mo-ta{margin-top:14px;font-size:15.5px;line-height:1.62;color:var(--phu);max-width:520px;text-wrap:pretty}
.chu .nut{margin-top:22px}
.goi-cuon{margin-top:18px;font-size:14px;color:var(--phu);display:flex;align-items:center;gap:10px}
.goi-cuon span{width:1px;height:28px;background:linear-gradient(var(--nau),transparent);animation:goi 1.8s ease-in-out infinite}
@keyframes goi{0%,100%{transform:translateY(-4px);opacity:.4}50%{transform:translateY(4px);opacity:1}}

@media (min-width:900px){
  .dinh{grid-template-rows:none;grid-template-columns:1fr 1fr;align-items:center;padding:96px 48px 48px;gap:48px}
  .chu{order:-1}
  .hinh{height:70vh}
  .hoa-tinh{width:min(38vw,460px)}
}

/* vạch chặng: dọc ở mép phải, vừa là tiến trình vừa bấm nhảy chặng */
.vach{position:fixed;z-index:15;right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:999px;transition:opacity .4s;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.34));-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border:1px solid rgba(255,255,255,.75);box-shadow:0 8px 24px rgba(74,47,39,.12)}
.vach.an{opacity:0;pointer-events:none}
/* 6 chặng = 6 biểu tượng một màu (Sếp 29/09): hoa · mày · môi · mí · gương · địa cầu — bấm để tới chặng */
.vach button{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--nau);opacity:.62;transition:background .25s,color .25s,opacity .25s}
.vach button svg{display:block}
.vach button.on{background:var(--nau);color:#fff;opacity:1}
@media (hover:hover){.vach button:hover{opacity:1}
  .vach button::after{content:attr(data-ten);position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);white-space:nowrap;padding:5px 11px;border-radius:999px;background:rgba(59,38,32,.82);color:#fff;font-size:12.5px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
  .vach button:hover::after{opacity:1;transform:translate(0,-50%)}}
@media (max-width:600px){.vach{right:6px;padding:3px}.vach button{width:30px;height:30px}.vach button svg{width:18px;height:18px}}
.tinh .vach{display:none}

/* ---------- cơ sở ---------- */
.co-so,.loi-moi{position:relative;z-index:1;padding:88px 24px;max-width:1240px;margin:0 auto}
.co-so::before{content:"";position:absolute;inset:0 -50vw;z-index:-1;background:radial-gradient(40% 50% at 15% 30%,#E3B3A288,transparent 70%),radial-gradient(40% 50% at 85% 70%,#C86F7244,transparent 70%),var(--kem)}
.luoi-co-so{display:grid;grid-template-columns:1fr;gap:12px;margin-top:32px}
@media (min-width:700px){.luoi-co-so{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.luoi-co-so{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}} /* 3 cột cho tên đường nằm gọn một dòng */
.the-co-so{display:flex;flex-direction:column;gap:4px;padding:20px 20px 18px;border-radius:22px;color:var(--chu);font-size:14px;line-height:1.5}
.the-co-so b{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--de)}
.the-co-so .vung{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--nau);font-weight:600}
.the-co-so i{font-style:normal;margin-top:10px;font-weight:600;color:var(--nau);font-size:14px}
.the-co-so i::after{content:" ↗"}

/* ---------- lời mời cuối ---------- */
.loi-moi{text-align:center;padding-bottom:120px}
.loi-moi::before{content:"";position:absolute;inset:0 -50vw;z-index:-1;background:var(--kem)}
.loi-moi p{margin-top:14px;color:var(--phu);font-size:16px}
.loi-moi .hang-nut{justify-content:center}

/* ---------- chân trang ---------- */
.chan{position:relative;z-index:1;background:transparent;padding:40px 24px calc(100px + env(safe-area-inset-bottom));text-align:center;font-size:14px;color:var(--phu);display:flex;flex-direction:column;align-items:center;gap:10px}
.logo-chan{height:24px;width:auto;margin-bottom:6px}
.lien-ket{display:flex;gap:20px}
.chan a{color:var(--nau);font-weight:500}
.chan .nho{font-size:12.5px;opacity:.8}


/* ---------- bản tĩnh: không ghim, nét vẽ hiện đủ, cuộn như trang thường ---------- */
.tinh .chang,.tinh #chang-0,.tinh #chang-4,.tinh #chang-5{height:auto}
.tinh .dinh{position:relative;height:auto;min-height:86vh;min-height:86svh}
.tinh .hinh{min-height:36vh}
.tinh .goi-cuon span{animation:none}

/* ---------- chặng gương: chạm để soi ---------- */
.bam-guong{display:none;position:absolute;inset:0;width:100%;height:100%;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.co-3d .bam-guong{display:block}
.goi-soi{position:absolute;left:50%;bottom:4px;transform:translate(-50%,8px);white-space:nowrap;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--de);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none}
.hien-goi-soi .goi-soi{opacity:1;transform:translate(-50%,0)}
.dang-soi .goi-soi{opacity:0}
.chip-soi{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:max-content;max-width:100%;text-align:center;z-index:2}
.chip-soi .hang-nut{justify-content:center;margin-top:0;gap:8px;flex-wrap:nowrap}
.chip-soi .nut-kinh{padding:0 16px}
.chip-soi p{margin-top:6px;font-size:11.5px;color:var(--phu);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.ghi-nguon{display:none;position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;color:var(--phu);opacity:.75;text-decoration:none;z-index:1}
.co-3d.hien-guong .ghi-nguon{display:block}
@media (max-width:899px){
  /* điện thoại: gương to tràn xuống vùng chữ → dòng ghi nguồn hình nằm góc dưới-trái màn (ngang nút Liên hệ), khỏi đè chữ/đè môi cô gái */
  .ghi-nguon{position:fixed;left:24px;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 16px);transform:none}
  /* gương to phủ xuống vùng chữ → lớp kem mỏng sau chữ cho dễ đọc, gương vẫn giữ cỡ to (Sếp 29/09) */
  .co-3d #chang-4 .dinh{isolation:isolate}
  .co-3d #chang-4 .dinh::before{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:-1;pointer-events:none;
    background:linear-gradient(to bottom,rgba(251,240,234,0),rgba(251,240,234,.8) 26%,rgba(251,240,234,.9))}
}
.dang-soi .ghi-nguon{display:none!important}

/* ---------- chặng địa cầu: 5 chi nhánh chỉ ra từ bản đồ ---------- */
.ban-do{position:absolute;inset:0;pointer-events:none;visibility:hidden;opacity:0;z-index:2}
.duong-chi{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.duong-chi path{fill:none;stroke:#C4394A;stroke-width:1.2;stroke-linejoin:round;opacity:.8}
.nhom-cs{position:absolute;left:0;top:0;pointer-events:auto;border-radius:18px;padding:10px 12px 8px;display:flex;flex-direction:column;gap:2px;min-width:170px;max-width:220px}
.nhom-cs .vung{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--nau);margin-bottom:2px}
.nhom-cs a{display:flex;flex-direction:column;padding:5px 0;border-top:1px solid rgba(138,93,78,.14)}
.nhom-cs a:first-of-type{border-top:0}
.nhom-cs a b{font-family:var(--serif);font-weight:500;font-size:15px;color:var(--de);line-height:1.25}
.nhom-cs a span{font-size:11.5px;color:var(--phu)}
.nhom-cs a b::after{content:" ↗";font-family:var(--sans);font-size:11px;color:var(--nau)}
.tinh .ban-do{display:none}
.nhan-bd{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;font-size:11px;font-weight:600;color:#A3313D;text-shadow:0 1px 0 rgba(255,255,255,.85),0 0 6px rgba(255,255,255,.9)}
.nhan-bd.bien{font-family:var(--serif);font-style:italic;font-weight:500;font-size:13px;color:#7A8FA0;letter-spacing:.04em}

/* ---------- máy tính: lớp kem mờ sau cột chữ cho dễ đọc trên mây / bản đồ ---------- */
@media (min-width:900px){
  /* Sếp 30/09: trước đây lớp kem nằm trong từng .dinh → lúc chuyển chặng (khối chưa ghim) mép trên/dưới lớp kem chạy ngang màn thành một vệt.
     Nay một lớp kem cố định duy nhất sau cả hành trình, không phụ thuộc chặng nào đang hiện → không còn mép. */
  html.co-3d:not(.tinh) #hanh-trinh::before{content:"";position:fixed;top:0;bottom:0;left:0;width:calc(50vw + min(99.2px,8vw));z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,rgba(250,240,235,.82) 0%,rgba(250,240,235,.7) 70%,rgba(250,240,235,0) 100%)}
}

/* Sếp 29/09: bản đồ đã có tên chi nhánh bấm được → ẩn danh sách + nút chỉ đường trùng lặp khi có 3D
   (máy không có 3D / giảm chuyển động vẫn hiện danh sách để còn chỗ bấm chỉ đường) */
.co-3d #co-so{display:none}
.co-3d .chan{display:none} /* Sếp 29/09: trang dừng ở cảnh bản đồ 5 chi nhánh (bấm được), không cần chân trang; máy không 3D vẫn có danh sách cơ sở + chân trang */
.co-3d #chang-5 .chu .nut{display:none}
.co-3d #chang-5 .chu .nut.xem-nghe-nhan{display:inline-flex}   /* Sếp 30/09: chặng cuối có nút nhỏ dẫn sang Đội ngũ */
/* Sếp 29/09: bỏ khối lời mời cuối trang cho khỏi bị chia — chân trang trong suốt, bản đồ mờ dần liền xuống */
.co-3d #hanh-trinh + .co-so + .chan, .co-3d .chan{padding-top:12px}
/* nút "Xem chi tiết" dưới mỗi chặng mày · môi · mí → trang dịch vụ (Sếp 29/09) */
.chu .xem-ct{margin-top:22px;gap:8px}
.xem-ct span{transition:transform .25s}
@media (hover:hover){.xem-ct:hover span{transform:translateX(4px)}}

/* trang chủ điện thoại: chừa chỗ thanh tab dưới cho khối cuối (danh sách cơ sở) */
@media (max-width:899px){.co-nut-menu .co-so{padding-bottom:88px}}
/* điện thoại: dải biểu tượng chặng bên phải GIỮ (Sếp 30/09 "tôi thích thanh dọc ấy") — chỉ thanh tab dưới tự ẩn/hiện */