/* ========================================================= MeTravel — static/css/metravel.css Menu trái + ảnh bìa thành phố ========================================================= */ :root{ /* Bộ nhận diện mới (2026-09) */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Be Vietnam Pro', system-ui, sans-serif; --brand: var(--mt-primary); /* màu chủ đạo, nền menu/hero */ --brand-dark: var(--mt-primary-hover); /* hover */ --ink: var(--mt-text); /* tiêu đề, chữ chính */ --ink-soft: var(--mt-muted); /* chữ phụ */ --accent: var(--mt-primary); /* điểm nhấn (làm nền thì chữ --mt-on-primary; trên nền primary thì không dùng, xem tokens.css) */ --tint: var(--mt-surface); /* nền nhạt cho nhãn, khối phụ */ --bg: var(--mt-page); /* nền trang */ --line: var(--mt-border); /* viền */ --rail-w:264px; /* Biến riêng của form/kết quả lịch trình ở index.html — giữ nguyên TÊN, chỉ đổi giá trị cho khớp bảng màu mới (đừng đổi tên, index.html và metravel-edit.css đang phụ thuộc các tên này). */ --brand-hover: var(--mt-primary-hover); --brand-soft: var(--mt-on-primary-muted); --on-brand: var(--mt-on-primary); --on-brand-2: var(--mt-on-primary-muted); --heading: var(--ink); /* CHỈ dùng cho 4 tiêu đề nhóm trong form (Lộ trình, Ngân sách, Ngày khởi hành, Chuyến bay của bạn) */ --ink-text: var(--ink); /* dùng cho toàn bộ chữ/viền/nền phụ ở phần KẾT QUẢ lịch trình — cùng giá trị --heading nhưng KHÁC vai trò, đừng gộp lại */ --body: var(--ink); --field-line: var(--line); --muted-form: var(--ink-soft); /* chữ phụ trong form — KHÔNG dùng chung với --muted */ --line-form: var(--line); /* đường kẻ divider trong form — KHÔNG dùng chung với --line */ } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; } h1,h2,h3,.card-title{font-family:var(--font-heading);font-weight:500} @layer mt-base{ a{color:inherit;text-decoration:none} } /* ---------- Khung trang ---------- */ .shell{display:flex;min-height:100vh} .content{flex:1;min-width:0} /* ---------- Thanh menu trái ---------- */ .rail{ width:var(--rail-w); flex:0 0 var(--rail-w); background:var(--brand); color:var(--mt-on-primary); display:flex; flex-direction:column; padding:28px 0 20px; overflow-x:hidden; position:sticky; top:0; height:100vh; } .brand{display:block;padding:0 24px 26px} .brand span{display:block;margin-top:3px;font-size:12px;font-weight:300;color:var(--mt-on-primary-muted)} /* Logo chữ tạm thời — thay bằng SVG thật sau này chỉ cần sửa class này */ .logo-text{ display:inline-block; font-family:var(--font-heading); font-weight:500; font-size:23px; letter-spacing:-0.01em; color:var(--brand); text-decoration:none; } .rail .logo-text{color:var(--mt-on-primary)} /* .rail nền var(--brand) — nền đậm thì chữ trắng */ @media (max-width:600px){.logo-text{font-size:20px}} .rail-title{ margin:0 24px 12px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:1.2px; color:var(--brand-soft); } /* Đường ray nối 4 mục đầu — chúng là các chặng trong hành trình của khách */ .stops{list-style:none;margin:0 0 26px;padding:0;position:relative} .stops::before{ content:""; position:absolute; left:9.5px;top:20px;bottom:20px; width:1px; background:rgba(255,255,255,.18); } .stop{ display:flex;align-items:center;gap:9px; padding:10px 0; margin:0; border-radius:8px; font-size:15px;font-weight:400;color:var(--on-brand-2); position:relative; } .dot{ flex:0 0 auto; width:11px;height:11px;border-radius:50%; background:transparent; border:1.5px solid var(--mt-on-primary-muted); margin-left:4px; transition:background .15s ease,border-color .15s ease; } .stop:hover{color:#fff} .stop:hover .dot{border-color:var(--mt-on-primary)} .stop.is-active{ color:var(--on-brand); font-weight:600; background:var(--brand-hover); } .stop.is-active .dot{ /* Menu trái nền primary: chấm trắng (chấm primary sẽ chìm vào nền) */ background:var(--mt-on-primary); border-color:var(--mt-on-primary); box-shadow:0 0 0 4px rgba(255,255,255,.25); } /* Kho ảnh và Tài khoản không thuộc hành trình, để phẳng */ .plain{list-style:none;margin:0;padding:0} .plain a{display:flex;align-items:center;gap:14px;padding:10px 24px 10px 42px;font-size:15px;color:var(--mt-on-primary-muted)} .plain a:hover{color:#fff} .rail-foot{margin-top:auto;padding:18px 24px 0;border-top:1px solid rgba(255,255,255,.18)} .lang{display:inline-flex;border:1px solid rgba(255,255,255,.18);border-radius:999px;overflow:hidden} .lang a{font:inherit;font-size:12.5px;padding:5px 13px;border:0;background:transparent;color:var(--mt-on-primary-muted);cursor:pointer;text-decoration:none;display:inline-block} .lang a.is-active{background:#fff;color:var(--ink)} /* ---------- Ảnh bìa thành phố ---------- */ .cover{ position:relative; min-height:300px; display:flex;align-items:flex-end; padding:36px 40px 30px; background:var(--mt-primary); background-size:cover;background-position:center; color:#fff; overflow:hidden; } .cover.has-photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(8,18,28,.78),rgba(8,18,28,.12) 62%); } .cover-inner{position:relative;z-index:2;max-width:620px} .cover-route{font-size:13.5px;font-weight:400;color:rgba(255,255,255,.82);margin:0 0 8px} .cover-city{margin:0;font-size:clamp(38px,6vw,62px);font-weight:600;letter-spacing:-.02em;line-height:1.05} .cover-sub{margin:10px 0 0;font-size:15px;font-weight:300;color:rgba(255,255,255,.9)} .cover-credit{position:absolute;z-index:2;right:14px;bottom:10px;font-size:11px;color:rgba(255,255,255,.6)} .cover-credit a{text-decoration:underline} /* ---------- Vùng nội dung ---------- */ .body-pad{padding:34px 40px 60px} /* ---------- Nút mở menu trên điện thoại ---------- */ .burger{display:none} @media (max-width:900px){ .rail{ position:fixed;z-index:40;left:0;top:0; transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.3); } .rail.is-open{transform:translateX(0)} .burger{ display:inline-flex;align-items:center;gap:9px; position:sticky;top:0;z-index:30;width:100%; padding:13px 18px;border:0;border-bottom:1px solid var(--line); background:var(--bg);font:inherit;font-size:15px;font-weight:500;cursor:pointer; } .burger svg{flex:0 0 auto} .cover{padding:26px 20px 22px;min-height:230px} .body-pad{padding:26px 20px 50px} } @media (prefers-reduced-motion:reduce){ .rail{transition:none} } :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} .rail :focus-visible{outline-color:var(--mt-on-primary)} /* menu trái nền primary */ /* ---------- Nút quay lại của trang Hỏi đáp nhánh Việt Nam ---------- Dùng ở templates/vietnam_qa.html và vietnam_qa_guide.html (2 trang này nạp file này TRƯỚC khối