/*
Theme Name:   Fine Travel
Description:  Theme con của Flatsome cho Fine Travel, theo bộ quy chuẩn thương hiệu (navy, vàng, Montserrat, Be Vietnam Pro).
Author:       Fine Travel
Template:     flatsome
Version:      1.0.9
Text Domain:  fine-travel
*/

/* Màu và chữ lấy từ bộ quy chuẩn Fine Travel */
:root {
  --ft-navy: #1B1A4E;
  --ft-navy-dam: #0E0D30;
  --ft-navy-mo: #D7D6E8;
  --ft-vang-gia: #FFD21E;
  --ft-vang-dam: #DC9D1F;
  --ft-vang-chu: #8A6206;
  --ft-kem: #FFF8D6;
  --ft-nen-nhat: #F5F5F9;
  --ft-vien: #DAD9E6;
  --ft-muc: #24233F;
  --ft-muc-phu: #55546E;
  --ft-phu-navy: rgba(14, 13, 48, 0.85);
  --ft-font-tieude: Montserrat, "Be Vietnam Pro", system-ui, sans-serif;
  --ft-font-noidung: "Be Vietnam Pro", system-ui, sans-serif;
}

body {
  font-family: var(--ft-font-noidung);
  color: var(--ft-muc);
}

h1, h2, h3, h4, h5, h6,
.heading-font, .nav > li > a, .button, button, input[type="submit"] {
  font-family: var(--ft-font-tieude);
}

h1, h2, h3 {
  color: var(--ft-navy);
}

a { color: var(--ft-navy); }
a:hover { color: var(--ft-navy-dam); }

/* Nút: primary = navy chữ trắng, secondary = vàng chữ navy (khớp màu Flatsome đã đặt) */
.button.primary, .button.ft-navy {
  background-color: var(--ft-navy);
  color: #FFFFFF;
}
.button.secondary, .button.ft-vang {
  background-color: var(--ft-vang-gia);
  color: var(--ft-navy) !important;
}
.button { border-radius: 12px; text-transform: none; letter-spacing: 0; }

/* Dòng nhãn viết hoa trên tiêu đề */
.ft-nhan {
  font-family: var(--ft-font-tieude);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ft-vang-chu);
}
.dark .ft-nhan, .ft-tren-navy .ft-nhan { color: var(--ft-vang-gia); }

/* Giá: luôn "Giá từ" + số, vàng đậm trên nền trắng, vàng giá trên nền navy */
.ft-gia {
  font-family: var(--ft-font-tieude);
  font-weight: 800;
  color: var(--ft-vang-chu);
}
.dark .ft-gia, .ft-tren-navy .ft-gia { color: var(--ft-vang-gia); }

/* Lớp phủ navy chỉ ở mép dưới ảnh */
.ft-phu-duoi { position: relative; }
.ft-phu-duoi::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(to top, var(--ft-phu-navy), rgba(14, 13, 48, 0));
  pointer-events: none;
}

/* Thẻ hành trình */
.ft-the {
  border: 1px solid var(--ft-vien);
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
}

/* Chân trang */
.footer-wrapper, .absolute-footer {
  background-color: var(--ft-navy);
  color: var(--ft-navy-mo);
}

/* ===== Trang chủ ===== */
.ft-hero .banner-bg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65%;
  background: linear-gradient(to top, var(--ft-phu-navy), rgba(14, 13, 48, 0));
}
.ft-hero .ft-nhan { color: var(--ft-vang-gia); margin: 0; }
.ft-hero h1 { font-weight: 800; font-size: 64px; line-height: 1.05; letter-spacing: -1px; color: #FFFFFF; margin: 8px 0 12px; }
.ft-hero .ft-mo-ta { font-size: 20px; line-height: 30px; color: var(--ft-navy-mo); max-width: 640px; margin: 0; }
@media (max-width: 549px) {
  .ft-hero h1 { font-size: 40px; }
  .ft-hero .ft-mo-ta { font-size: 17px; line-height: 26px; }
}

/* Ô tìm tour nổi lên trên ảnh lớn */
.ft-tim-tour {
  background: #FFFFFF; border-radius: 16px; box-shadow: 0 12px 32px rgba(14, 13, 48, 0.16);
  padding: 24px; margin-top: -72px; position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
}
.ft-tim-tour label { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ft-muc-phu); margin: 0; }
.ft-tim-tour select, .ft-tim-tour input { height: 48px; border: 1px solid var(--ft-vien); border-radius: 12px; margin: 0; box-shadow: none; font-size: 15px; }
.ft-tim-tour button { height: 48px; margin: 0; padding: 0 32px; border-radius: 12px; background: var(--ft-navy); color: #FFFFFF; text-transform: none; letter-spacing: 0; font-size: 16px; }

/* Đầu mục */
.ft-dau-muc { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 28px; }
.ft-dau-muc .ft-nhan { margin: 0; }
.ft-dau-muc h2 { font-size: 36px; line-height: 1.2; margin: 6px 0 0; }
@media (max-width: 549px) { .ft-dau-muc h2 { font-size: 28px; } }

/* Thẻ hành trình */
.ft-the { display: flex; flex-direction: column; height: 100%; }
.ft-the-anh { position: relative; height: 240px; background: #8C99B4; }
.ft-the-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-the-anh::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(to top, var(--ft-phu-navy), rgba(14, 13, 48, 0));
}
.ft-the-ten { position: absolute; left: 20px; bottom: 16px; z-index: 1; }
.ft-the-ten .ft-nhan { color: var(--ft-vang-gia); font-size: 12px; letter-spacing: 3px; margin: 0; }
.ft-the-ten h3 { color: #FFFFFF; font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -0.5px; margin: 4px 0 0; }
.ft-the-than { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.ft-chang { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ft-chang b { display: block; font-family: var(--ft-font-tieude); font-weight: 800; font-size: 28px; line-height: 1.1; color: var(--ft-navy); }
.ft-chang small { font-size: 13px; color: var(--ft-muc-phu); }
.ft-chang .ft-den { text-align: right; }
.ft-thong-tin { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ft-muc-phu); }
.ft-thong-tin strong { color: var(--ft-muc); }
.ft-hang-gia { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--ft-vien); padding-top: 16px; margin-top: auto; }
.ft-hang-gia small { display: block; font-size: 13px; color: var(--ft-muc-phu); }
.ft-hang-gia .ft-gia { font-size: 24px; }

/* Nút dạng liên kết */
.ft-nut { display: inline-block; padding: 12px 18px; border-radius: 12px; font-family: var(--ft-font-noidung); font-weight: 600; font-size: 15px; line-height: 1.2; }
.ft-nut-vang { background: var(--ft-vang-gia); color: var(--ft-navy) !important; }
.ft-nut-navy { background: var(--ft-navy); color: #FFFFFF !important; }

/* Lưới điểm đến */
.ft-luoi-diem-den { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.ft-luoi-diem-den a { background: #FFFFFF; border: 1px solid var(--ft-vien); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.ft-luoi-diem-den b { font-family: var(--ft-font-tieude); font-weight: 800; font-size: 20px; color: var(--ft-navy); }
.ft-luoi-diem-den small { font-size: 13px; color: var(--ft-muc-phu); }

/* Khối navy tour đoàn */
.ft-tren-navy h2 { color: #FFFFFF; }
.ft-tren-navy p { color: var(--ft-navy-mo); font-size: 17px; line-height: 28px; }
.ft-buoc { list-style: none; margin: 0 0 24px; padding: 0; }
.ft-buoc li { display: flex; gap: 14px; margin: 0 0 14px; font-size: 16px; line-height: 24px; color: #FFFFFF; }
.ft-buoc li span { font-family: var(--ft-font-tieude); font-weight: 800; font-size: 18px; color: var(--ft-vang-gia); min-width: 28px; }
.ft-anh-bo { border-radius: 16px; width: 100%; height: auto; display: block; }
.ft-hop-lien-he { background: #FFFFFF; border-radius: 16px; padding: 28px; color: var(--ft-muc); margin-top: 24px; }
.ft-hop-lien-he h3 { color: var(--ft-navy); font-size: 22px; margin: 0 0 8px; }
.ft-hop-lien-he p { color: var(--ft-muc); font-size: 15px; line-height: 24px; }

/* Visa */
.ft-visa { background: var(--ft-kem); border-radius: 16px; padding: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; }
.ft-visa h2 { font-size: 30px; margin: 6px 0 10px; }
.ft-visa p { margin: 0; }

/* Ảnh đoàn: ô chờ ảnh thật */
.ft-luoi-anh { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ft-o-anh { height: 220px; border-radius: 16px; background: var(--ft-nen-nhat); border: 1px dashed var(--ft-vien); display: flex; align-items: center; justify-content: center; color: var(--ft-muc-phu); font-size: 14px; text-align: center; padding: 16px; }

/* Đầu trang navy */
.header-top a { color: var(--ft-vang-gia); }
.header-main .nav > li > a { font-family: var(--ft-font-noidung); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 15px; }

/* Chân trang Fine */
.ft-chan-trang { background: var(--ft-navy); color: var(--ft-navy-mo); padding: 56px 0 24px; }
.ft-chan-trang .ft-cot { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.ft-chan-trang .ft-cot > div { flex: 1 1 220px; min-width: 0; font-size: 14px; line-height: 22px; }
.ft-chan-trang .ft-cot > div:first-child { flex-basis: 300px; }
.ft-chan-trang strong { color: #FFFFFF; }
.ft-chan-trang a { color: var(--ft-navy-mo); }
.ft-chan-trang a.ft-hotline { color: #FFFFFF; font-weight: 600; }
.ft-chan-trang .ft-nhan { color: var(--ft-vang-gia); font-size: 13px; letter-spacing: 3px; margin: 0 0 10px; }
.ft-chan-trang img { height: 46px; width: auto; margin-bottom: 16px; }
.absolute-footer { background: var(--ft-navy) !important; color: var(--ft-navy-mo); border-top: 2px solid rgba(255, 210, 30, 0.5); }

/* Nút nổi Zalo, Gọi */
.ft-nut-noi { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 999; }
.ft-nut-noi a { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(14, 13, 48, 0.25); }
.ft-nut-noi a.ft-zalo { background: var(--ft-vang-gia); }
.ft-nut-noi a.ft-goi { background: var(--ft-navy); }

/* Điện thoại: ô tìm tour không đè ảnh lớn; nhãn gọn một dòng */
@media (max-width: 549px) {
  .ft-tim-tour { margin-top: 16px; padding: 20px; }
  .ft-hero .ft-nhan { font-size: 11px; letter-spacing: 2px; }
}

/* Nút lên đầu trang chuyển sang trái, không đè nút Gọi */
.back-to-top { right: auto !important; left: 20px; }

/* ===== Trang con ===== */
.ft-hero-trang-con h1 { font-size: 52px; }
.ft-hero-trang-con .banner-bg::after {
  height: 100%;
  background: linear-gradient(to top, rgba(14, 13, 48, 0.9) 0%, rgba(14, 13, 48, 0.6) 55%, rgba(14, 13, 48, 0.15) 100%);
}
@media (max-width: 549px) { .ft-hero-trang-con h1 { font-size: 36px; } }

/* Ô thông tin trên nền trắng */
.ft-o { background: #FFFFFF; border: 1px solid var(--ft-vien); border-radius: 16px; padding: 24px; }
.ft-o h3 { font-size: 20px; margin: 0 0 8px; color: var(--ft-navy); }
.ft-o p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ft-muc); }
.ft-luoi-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ft-hai-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }

/* Quy trình nhiều bước, hai cột trên máy tính */
.ft-buoc-2-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 40px; margin-top: 24px; }
.ft-buoc-2-cot li { margin: 0 0 16px; }
.ft-buoc-2-cot li div { color: var(--ft-navy-mo); }
.ft-buoc-2-cot li strong { color: #FFFFFF; }

/* Danh sách cần chuẩn bị */
.ft-danh-sach { list-style: none; margin: 0 0 24px; padding: 0; }
.ft-danh-sach li { position: relative; padding: 0 0 10px 28px; margin: 0 !important; font-size: 16px; line-height: 24px; }
.ft-danh-sach li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 3px; background: var(--ft-vang-gia); }

/* Hỏi đáp */
.ft-hoi-dap details { border-bottom: 1px solid var(--ft-vien); padding: 16px 0; }
.ft-hoi-dap summary { cursor: pointer; list-style: none; font-family: var(--ft-font-tieude); font-weight: 700; font-size: 17px; color: var(--ft-navy); padding-right: 32px; position: relative; }
.ft-hoi-dap summary::-webkit-details-marker { display: none; }
.ft-hoi-dap summary::after { content: "+"; position: absolute; right: 0; top: -2px; font-size: 24px; color: var(--ft-vang-chu); }
.ft-hoi-dap details[open] summary::after { content: "–"; }
.ft-hoi-dap details p { margin: 10px 0 0; font-size: 15px; line-height: 24px; color: var(--ft-muc); }
.ft-hop-vien { border: 1px solid var(--ft-vien); margin-top: 0; }
.ft-hop-vien .ft-nut { width: 100%; text-align: center; }

/* ===== Visa, lịch, liên hệ ===== */
.ft-luoi-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ft-tieu-de-nho { font-size: 16px; margin: 0 0 8px; color: var(--ft-navy); }
.ft-the-than .ft-danh-sach { margin-bottom: 8px; }
.ft-ghi-chu { font-size: 14px; line-height: 22px; color: var(--ft-muc-phu); margin: 12px 0 0; }
.ft-ghi-chu-khung { background: var(--ft-kem); border-radius: 12px; padding: 16px 20px; color: var(--ft-muc); margin-top: 24px; }

/* Lưới điểm đến có dòng thành phố */
.ft-luoi-diem-den-lon { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ft-luoi-diem-den-lon small { line-height: 20px; }
.ft-lien-ket { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--ft-vang-chu); }

/* Đầu trang con không ảnh */
.ft-dau-trang-navy h1 { color: #FFFFFF; font-weight: 800; font-size: 44px; line-height: 1.1; margin: 8px 0 12px; }
.ft-dau-trang-navy .ft-nhan { color: var(--ft-vang-gia); margin: 0; }
@media (max-width: 549px) { .ft-dau-trang-navy h1 { font-size: 32px; } }
.ft-loc-tuyen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ft-loc-tuyen a { border: 1px solid rgba(255, 210, 30, 0.5); color: #FFFFFF !important; border-radius: 999px; padding: 8px 14px; font-size: 14px; line-height: 1.2; }
.ft-loc-tuyen a:hover { background: var(--ft-vang-gia); color: var(--ft-navy) !important; }

/* Bảng lịch khởi hành */
.ft-bang-cuon { overflow-x: auto; border: 1px solid var(--ft-vien); border-radius: 16px; }
.ft-bang-lich { width: 100%; min-width: 680px; border-collapse: collapse; margin: 0; }
.ft-bang-lich th { background: var(--ft-navy); color: #FFFFFF; font-family: var(--ft-font-tieude); font-weight: 700; font-size: 14px; text-align: left; padding: 14px 16px; border: 0; }
.ft-bang-lich td { padding: 14px 16px; border-top: 1px solid var(--ft-vien); font-size: 15px; vertical-align: middle; }
.ft-bang-lich tbody tr:nth-child(even) td { background: var(--ft-nen-nhat); }
.ft-bang-lich small { color: var(--ft-muc-phu); }
.ft-bang-lich .ft-gia { font-size: 18px; }
.ft-bang-lich .ft-nut { padding: 10px 14px; white-space: nowrap; }

/* Album ảnh đoàn */
.ft-album { margin-bottom: 40px; }
.ft-chu-thich-album { margin: 12px 0 0; font-size: 15px; color: var(--ft-muc-phu); }
.ft-chu-thich-album strong { color: var(--ft-navy); }

/* Liên hệ */
.ft-so-lon { font-family: var(--ft-font-tieude); font-weight: 800; font-size: 26px; color: var(--ft-navy); }
.ft-so-lon.ft-email { font-size: 20px; word-break: break-all; }

/* Khối "Điều làm nên hơn cả một chuyến đi" */
.ft-gia-tri .ft-o { border-color: rgba(201, 146, 14, 0.25); }
.ft-gia-tri .ft-so { display: block; font-family: var(--ft-font-tieude); font-weight: 800; font-size: 28px; line-height: 1; color: var(--ft-vang-dam); margin-bottom: 12px; }
.ft-gia-tri h3 { font-size: 19px; }

/* Ảnh lớn: lớp phủ đủ đậm để đoạn mô tả dài vẫn đọc rõ */
.ft-hero .banner-bg::after { height: 80%; }
@media (max-width: 849px) {
  .ft-hero .banner-bg::after {
    height: 100%;
    background: linear-gradient(to top, rgba(14, 13, 48, 0.92) 0%, rgba(14, 13, 48, 0.7) 50%, rgba(14, 13, 48, 0.25) 100%);
  }
}