/* Trang chủ MeTravel (templates/chon.html). Màu lấy từ tokens.css (2026-10-18): xanh primary, đỏ chỉ cho
   nút "Lập lịch trình" ở hero, dải gold 5px ở đáy các khối lớn nền primary; không gradient. Không emoji,
   biểu tượng là nét SVG; nút bo tròn hoàn toàn, cao tối thiểu 44px. */
:root{
  --tc-nen:var(--mt-page);
  --tc-xanh:var(--mt-primary);
  --tc-xanh-dam:var(--mt-primary-hover);
  --tc-lime:var(--mt-primary);       /* tên biến cũ, nay là màu thương hiệu (tokens.css) */
  --tc-tren-lime:var(--mt-on-primary);
  --tc-chu:var(--mt-text);
  --tc-chu-phu:var(--mt-muted);
  --tc-nhat:var(--mt-surface);          /* nền màu nhạt khi chưa có ảnh */
  --tc-vien:var(--mt-border);
  --tc-trang:#FFFFFF;
  --tc-font-tieu-de:'Playfair Display', Georgia, serif;
  --tc-font:'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tc-nen);color:var(--tc-chu);font-family:var(--tc-font);
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--tc-lime);outline-offset:2px}
/* Trên panel nền var(--mt-primary): vòng focus trắng (xanh trên xanh không thấy) */
.tc-lap :focus-visible,.tc-nhan-panel :focus-visible,.tc-hoi :focus-visible{outline-color:#FFFFFF}

.tc-khung{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.tc-khung{padding:0 32px}}

/* Header (logo, menu, công tắc ngôn ngữ): static/css/dau-trang.css — dùng chung
   với trang lịch trình. */

/* ---------- Hero: 2 panel ---------- */
.tc-hero{display:grid;gap:16px;margin-top:4px}
.tc-panel{border-radius:24px;overflow:hidden}
.tc-eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.tc-tieu-de{font-family:var(--tc-font-tieu-de);font-weight:700;font-size:30px;line-height:1.15;margin-top:6px}
.tc-mo-ta{margin-top:10px;font-size:15px;max-width:40ch}
@media (min-width:1024px){
  .tc-hero{grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
  .tc-hero .tc-vn{grid-column:1;grid-row:1}
  .tc-hero .tc-lap{grid-column:2;grid-row:1}
  .tc-tieu-de{font-size:46px;margin-top:8px}
  .tc-mo-ta{font-size:16px;margin-top:12px}
}

/* Ô ảnh (macro o_anh): ảnh tab hinh_anh, ảnh dự phòng, hoặc nền màu nhạt */
.tc-anh{position:relative;display:block;overflow:hidden;background:var(--tc-nhat);width:100%}
.tc-anh img{width:100%;height:100%;object-fit:cover}
.tc-anh--trong{display:flex;align-items:center;justify-content:center;color:var(--tc-xanh)}
.tc-anh-nguon{position:absolute;right:6px;bottom:6px;max-width:calc(100% - 12px);padding:2px 7px;border-radius:6px;
  background:rgba(15,42,37,.72);color:#fff;font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Panel Visiting Vietnam */
.tc-vn{background:var(--tc-trang);border:1px solid var(--tc-vien);display:flex;flex-direction:column}
.tc-vn-anh{aspect-ratio:16/9}
.tc-vn-chu{padding:20px 20px 24px}
.tc-vn .tc-eyebrow{color:var(--tc-xanh)}
.tc-vn .tc-mo-ta{color:var(--tc-chu-phu)}
.tc-chip{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tc-chip a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--tc-vien);background:var(--tc-nen);text-decoration:none;font-size:14px;font-weight:500}
.tc-chip a:hover{border-color:var(--tc-xanh)}
.tc-vn-plan{margin-top:16px;font-size:14px;color:var(--tc-chu-phu)}
.tc-vn-plan a{color:var(--tc-xanh);font-weight:600}
@media (min-width:1024px){.tc-vn-chu{padding:28px 32px 32px}}

/* Panel lập lịch trình */
.tc-lap{background:var(--tc-xanh);color:var(--mt-on-primary);padding:20px 20px 24px;box-shadow:var(--mt-gold-bar)}
.tc-lap .tc-eyebrow{color:var(--mt-on-primary)}
.tc-lap .tc-mo-ta{color:rgba(255,255,255,.86)}
@media (min-width:1024px){.tc-lap{padding:40px}}
.tc-form{margin-top:16px}
.tc-form label{display:block;font-weight:600;margin-bottom:8px}
.tc-form-hang{display:flex;flex-direction:column;gap:10px}
.tc-form input{width:100%;min-height:52px;padding:0 16px;border-radius:999px;border:0;background:#fff;
  color:var(--tc-chu);font:inherit;font-size:16px}
@media (min-width:560px){
  .tc-form-hang{flex-direction:row}
  .tc-form input{flex:1}
}
.tc-mau-dan{margin-top:18px;font-size:14px;color:rgba(255,255,255,.86)}
.tc-mau{display:grid;gap:8px;margin-top:8px}
.tc-mau a{display:flex;align-items:center;gap:12px;min-height:64px;padding:6px 14px 6px 6px;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none}
.tc-mau a:hover{background:rgba(255,255,255,.14)}
.tc-mau-hinh{width:52px;height:52px;border-radius:12px;flex:none}
.tc-mau-chu{flex:1;display:flex;flex-direction:column;min-width:0}
.tc-mau-chu strong{font-weight:600}
.tc-mau-chu span{font-size:14px;color:rgba(255,255,255,.8)}

/* ---------- Nút ---------- */
.tc-nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;
  border-radius:999px;border:0;font:inherit;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;
  white-space:nowrap}
.tc-nut svg{transition:transform .2s ease}
.tc-nut:hover svg{transform:translateX(3px)}
/* Nút trên panel nền primary ("Bạn sẽ nhận được", Hỏi MeTravel): nền trắng + chữ primary — nền primary
   sẽ chìm vào panel cùng màu. Giữ tên class cũ. */
.tc-nut--lime{background:#FFFFFF;color:var(--mt-primary)}
/* Nút hành động chính DUY NHẤT của trang chủ: "Lập lịch trình" ở hero — đỏ (tokens.css) */
.tc-form .tc-nut--lime{background:var(--mt-red);color:var(--mt-on-primary)}
.tc-form .tc-nut--lime:hover{background:var(--mt-red-hover)}
.tc-nut--xanh{background:var(--tc-xanh);color:#fff}
.tc-nut--nhat{background:var(--tc-nhat);color:var(--tc-xanh);margin-top:20px}

/* ---------- Khối dưới ---------- */
.tc-h2{font-family:var(--tc-font-tieu-de);font-weight:700;font-size:28px;line-height:1.2}
@media (min-width:1024px){.tc-h2{font-size:36px}}
main > section, main > .tc-khung{margin-top:56px}
@media (min-width:1024px){main > section, main > .tc-khung{margin-top:88px}}
main > .tc-khung.tc-hero{margin-top:8px}

/* Sắp diễn ra / Coming up — 3 thẻ sự kiện (trang_chu.su_kien_sap_toi()). Ô ngày
   (macro o_ngay, _su_kien_the.html) nền màu thương hiệu, chip loại nền nhạt
   --mt-accent-soft — cùng màu với thẻ ở /su-kien (su-kien.css). */
.tc-sk-dau{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.tc-sk-tat-ca{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--mt-primary);
  font-weight:600;font-size:15px;text-decoration:none}
.tc-sk-tat-ca:hover{text-decoration:underline}
.tc-sk-ds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.tc-sk-ds > li{display:flex}
.tc-sk-the{flex:1;display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:20px;background:#fff;
  border:1px solid var(--tc-vien);text-decoration:none}
.tc-sk-the:hover{border-color:var(--mt-primary)}
.tc-sk-chu{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tc-sk-chu strong{font-weight:600;line-height:1.35}
.tc-sk-noi,.tc-sk-den{font-size:14px;color:var(--tc-chu-phu)}
.tc-sk-loai{align-self:flex-start;margin-top:8px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:var(--mt-primary-soft);color:var(--mt-primary)}
@media (max-width:860px){.tc-sk-ds{grid-template-columns:minmax(0,1fr);gap:12px}}
/* Ô ngày dùng chung (giống .sk-lich ở su-kien.css) */
.sk-lich{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;min-height:60px;
  padding:6px 4px;border-radius:14px;background:var(--mt-primary);color:var(--mt-on-primary);line-height:1.1}
.sk-lich-so{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.sk-lich-thang{margin-top:2px;font-size:12px;font-weight:600;letter-spacing:.02em}

/* 1. Bạn sẽ nhận được — nền phẳng primary (như thẻ hero), chữ trắng, dải gold 5px ở đáy,
   thẻ mờ trắng, biểu tượng --mt-primary-soft, nút trắng chữ primary. */
.tc-nhan-panel{position:relative;overflow:hidden;border-radius:24px;padding:36px 20px 28px;
  background:var(--mt-primary);
  color:var(--mt-on-primary);
  box-shadow:var(--mt-gold-bar);
  display:grid;gap:24px;grid-template-areas:"dau" "ds" "dt" "nut"}
.tc-nhan-dau{grid-area:dau}
.tc-nhan-khau-hieu{font-family:var(--tc-font-tieu-de);font-weight:700;font-style:italic;font-size:17px;
  color:var(--mt-on-primary);margin-bottom:6px}   /* chữ trắng đặc, không mờ */
.tc-nhan-ds{grid-area:ds;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.tc-nhan-ds > li{display:flex}
.tc-nhan-the{flex:1;display:flex;align-items:center;gap:14px;min-height:72px;padding:16px;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:var(--mt-on-primary);text-decoration:none}
.tc-nhan-the strong{flex:1;min-width:0;font-weight:600;line-height:1.35}
.tc-nhan-icon{flex:none;display:flex;color:var(--mt-primary-soft)}
.tc-nhan-the--link > svg{flex:none;color:var(--mt-primary-soft);transition:transform .2s ease}
.tc-nhan-the--link:hover{background:rgba(255,255,255,.14)}
.tc-nhan-the--link:hover > svg{transform:translateX(3px)}
.tc-nhan-nut{grid-area:nut;justify-self:start}
.tc-nhan-panel .tc-nut--lime{color:var(--mt-primary)}
.tc-nhan .tc-dt{grid-area:dt;border:1px solid rgba(255,255,255,.18)}
@media (min-width:861px){
  .tc-nhan-panel{padding:48px 40px 40px;column-gap:48px;align-items:start;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:auto auto 1fr;
    grid-template-areas:"dau dt" "ds dt" "nut dt"}
  .tc-nhan-ds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc-nhan .tc-dt{align-self:center}
}

/* Khung điện thoại (HTML tĩnh, chỉ minh hoạ) */
.tc-dt{justify-self:center;width:100%;max-width:330px;padding:12px;border-radius:40px;background:var(--tc-chu)}
.tc-dt-man{border-radius:30px;overflow:hidden;background:var(--tc-nen);padding-bottom:12px}
.tc-the-dau{background:var(--tc-lime);color:var(--tc-tren-lime);padding:28px 18px 16px}
.tc-the-dau strong{display:block;font-family:var(--tc-font-tieu-de);font-size:22px}
.tc-the-dau span{font-size:14px}
.tc-the-ngay{margin:12px 12px 0;padding:12px;border-radius:16px;background:#fff;border:1px solid var(--tc-vien)}
.tc-the-so{font-weight:600;font-size:13px;color:var(--tc-xanh);margin-bottom:6px}
.tc-the-dong{display:flex;align-items:baseline;gap:8px;font-size:13px;padding:5px 0;border-top:1px solid var(--tc-vien)}
.tc-the-so + .tc-the-dong{border-top:0}
.tc-the-buoi{flex:none;width:62px;color:var(--tc-chu-phu)}
.tc-the-ten{flex:1;min-width:0;font-weight:500}
.tc-the-map{flex:none;display:inline-flex;align-items:center;gap:3px;color:var(--tc-xanh);font-weight:600;font-size:12px}
.tc-the-dong--het{color:var(--tc-chu-phu)}

/* 2. Điểm đến */
.tc-diem-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
@media (min-width:768px){.tc-diem-luoi{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.tc-diem-luoi a{display:flex;flex-direction:column;height:100%;text-decoration:none;background:#fff;border-radius:20px;
  overflow:hidden;border:1px solid var(--tc-vien);padding-bottom:14px}
.tc-diem-luoi a:hover{border-color:var(--tc-xanh)}
.tc-diem-hinh{aspect-ratio:4/3}
.tc-diem-luoi strong{display:block;padding:12px 14px 0;font-weight:600}
.tc-diem-luoi a > span:last-child{padding:2px 14px 0;font-size:14px;color:var(--tc-chu-phu)}

/* 4. Ba bước */
.tc-buoc-ds{display:grid;gap:12px;margin-top:24px}
@media (min-width:768px){.tc-buoc-ds{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.tc-buoc-ds li{background:#fff;border-radius:20px;padding:22px;border:1px solid var(--tc-vien)}
.tc-buoc-so{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
  background:var(--tc-lime);color:var(--tc-tren-lime);font-weight:600;margin-bottom:14px}
.tc-buoc-ds strong{display:block;font-weight:600}
.tc-buoc-ds li > span:last-child{display:block;margin-top:4px;color:var(--tc-chu-phu);font-size:15px}

/* 5. Hỏi MeTravel (nền xanh) */
.tc-hoi{background:var(--tc-xanh);color:var(--mt-on-primary);padding:48px 0;box-shadow:var(--mt-gold-bar)}
@media (min-width:1024px){.tc-hoi{padding:72px 0}}
.tc-hoi-dan{margin-top:8px;color:rgba(255,255,255,.86)}
.tc-hoi-ds{display:grid;gap:10px;margin:24px 0}
@media (min-width:900px){.tc-hoi-ds{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tc-hoi-ds a{display:flex;align-items:center;gap:12px;min-height:64px;height:100%;padding:12px 16px;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);text-decoration:none;color:#fff}
.tc-hoi-ds a:hover{background:rgba(255,255,255,.14)}
.tc-hoi-ds a span{flex:1}
.tc-hoi-ds svg{flex:none}
.tc-hoi .tc-nut{margin-top:8px}

/* Thẻ Visiting Vietnam thu gọn — chỉ bản vi, chỉ điện thoại */
.tc-vn-nho{display:flex;align-items:center;gap:14px;padding:10px;border-radius:20px;background:#fff;
  border:1px solid var(--tc-vien);text-decoration:none}
.tc-vn-nho-anh{width:72px;height:72px;border-radius:14px;flex:none}
.tc-vn-nho small{display:block;font-size:12px;color:var(--tc-xanh);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tc-vn-nho strong{display:block;font-family:var(--tc-font-tieu-de);font-size:20px}
.tc-vn-nho span span{color:var(--tc-xanh);font-weight:600;font-size:14px}
@media (max-width:1023px){
  .tc-hero--vi .tc-vn{display:none}
}
@media (min-width:1024px){
  .tc-vn-nho-vo{display:none}
}

/* Footer: static/css/chan-trang.css (dùng chung với base.html) */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tc-nut svg{transition:none}
}

/* Hiệu ứng trượt lên khi cuộn tới (chạy 1 lần) — tiêu đề "What you get" */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Chuyển động nhẹ (2026-10) ----------
   Mọi hiệu ứng nằm trong prefers-reduced-motion: no-preference; chỉ đổi
   transform + opacity. Hiện dần khi cuộn: static/css/hien-dan.css. */

/* Dải tên thành phố ngay dưới hero (trang_chu.diem_den_chay()). Mặc định — kể
   cả khi khách chọn giảm chuyển động — là một hàng tĩnh, xuống dòng được, bản
   lặp (aria-hidden) ẩn hẳn. */
main > .tc-khung.tc-chay-vo{margin-top:16px}
.tc-chay{background:var(--mt-primary);color:var(--mt-on-primary);border-radius:16px;padding:2px 8px}
.tc-chay-ds{display:flex;flex-wrap:wrap;justify-content:center;gap:0 8px}
.tc-chay-ds a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--mt-on-primary);
  text-decoration:none;font-weight:500;font-size:15px;white-space:nowrap}
.tc-chay-ds a:hover{text-decoration:underline}
.tc-chay :focus-visible{outline-color:#FFFFFF;outline-offset:-4px}
.tc-chay-ds[aria-hidden="true"]{display:none}

@media (prefers-reduced-motion:no-preference){
  /* Dải chạy vô tận: hai bản giống hệt nhau nối đuôi, trượt đúng nửa chiều dài
     (một bản) mỗi vòng 30 giây. Dừng khi rê chuột, khi đang focus bàn phím, và
     khi đang chạm (class tc-chay--dung do hien-dan.js gắn). Hai mép mờ dần. */
  .tc-chay{overflow:hidden;padding:2px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .tc-chay-ray{display:flex;width:max-content;animation:tc-chay 30s linear infinite}
  .tc-chay-ds{flex-wrap:nowrap;justify-content:flex-start;padding-right:8px}   /* = gap: mối nối đều */
  .tc-chay-ds[aria-hidden="true"]{display:flex}
  .tc-chay:hover .tc-chay-ray,.tc-chay:focus-within .tc-chay-ray,.tc-chay--dung .tc-chay-ray{animation-play-state:paused}
  @keyframes tc-chay{to{transform:translateX(-50%)}}

  /* Ảnh panel Visiting Vietnam phóng rất chậm (khung .tc-anh đã overflow:hidden) */
  .tc-vn .tc-vn-anh img{animation:tc-phong 20s ease-in-out infinite alternate}
  @keyframes tc-phong{from{transform:scale(1)}to{transform:scale(1.06)}}
}

/* Nhấc thẻ bấm được khi rê chuột: lên 4px + bóng màu thương hiệu nhạt. Bóng nằm
   ở ::after và chỉ đổi opacity (không animate box-shadow). Chỉ thiết bị có chuột
   (hover:hover) để điện thoại không bị kẹt trạng thái nhấc. Thẻ không bấm được
   (3 thẻ đầu "Bạn sẽ nhận được", Ba bước) không nhấc. */
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .tc-mau a,.tc-sk-the,.tc-nhan-the--link,.tc-hoi-ds a{position:relative;transition:transform .25s ease}
  .tc-mau a::after,.tc-sk-the::after,.tc-nhan-the--link::after,.tc-hoi-ds a::after{content:"";position:absolute;inset:0;
    border-radius:inherit;box-shadow:0 12px 28px rgba(0,77,67,.2);opacity:0;transition:opacity .25s ease;pointer-events:none}
  .tc-mau a:hover,.tc-sk-the:hover,.tc-nhan-the--link:hover,.tc-hoi-ds a:hover{transform:translateY(-4px)}
  .tc-mau a:hover::after,.tc-sk-the:hover::after,.tc-nhan-the--link:hover::after,.tc-hoi-ds a:hover::after{opacity:1}
}