/* Tab Giới thiệu (tiền tố gt-). Theo design/GioiThieu.dc.html: iPad 1180 là cỡ gốc; máy tính căn giữa khối 1100px; điện thoại xếp 1 cột. */
.gt-goc { --gt-vang: #B08D57; --gt-nau: #8A5A3C; --font: var(--font-an-pham); font-family: var(--font-an-pham); background: #FAFAF7; color: var(--chu); font-size: 14px; overflow-x: clip; }
.gt-serif { font-family: 'Cormorant Garamond', Georgia, serif; }
.gt-trong-noi { padding: 40px 20px; text-align: center; color: var(--chu-phu); }
.gt-nhan-nho { font-size: calc(13px * var(--co-chu)); font-weight: 700; color: #8A8372; white-space: nowrap; }

/* ===== Khung ảnh lồng nhau (vòm, lá, tròn). Mọi cỡ đo theo --k = bề ngang khung / 530 (đầu trang: / 470) nên co theo màn hình ===== */
.gt-anh-hop { container-type: inline-size; width: 100%; min-width: 0; }
.gt-anh { --k: calc(100cqw / 530); position: relative; width: 100%; aspect-ratio: 530 / 560; }
.gt-anh > * { position: absolute; }
.gt-vom { --br: calc(220 * var(--k)) calc(220 * var(--k)) calc(26 * var(--k)) calc(26 * var(--k)); }
.gt-la { --br: calc(180 * var(--k)) calc(22 * var(--k)) calc(180 * var(--k)) calc(22 * var(--k)); }
.gt-la2 { --br: calc(26 * var(--k)) calc(220 * var(--k)) calc(26 * var(--k)) calc(220 * var(--k)); }
.gt-khung { top: 0; width: calc(470 * var(--k)); height: calc(520 * var(--k)); border: 1.5px solid var(--gt-vang); border-radius: var(--br); }
.gt-ph .gt-khung { right: 0; transform: translate(calc(14 * var(--k)), calc(14 * var(--k))); }
.gt-tr .gt-khung { left: 0; transform: translate(calc(-14 * var(--k)), calc(14 * var(--k))); }
.gt-anh-chinh { top: 0; width: calc(456 * var(--k)); height: calc(506 * var(--k)); border-radius: var(--br); overflow: hidden; box-shadow: 0 24px 50px rgba(17, 57, 23, .18); background: #E8F3E6; }
.gt-ph .gt-anh-chinh { right: calc(14 * var(--k)); }
.gt-tr .gt-anh-chinh { left: calc(14 * var(--k)); }
.gt-anh-tron { bottom: 0; z-index: 1; width: calc(210 * var(--k)); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: max(4px, calc(8 * var(--k))) solid #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .18); background: #E8F3E6; }
.gt-ph .gt-anh-tron { left: 0; }
.gt-tr .gt-anh-tron { right: 0; }
.gt-anh-nho { top: calc(40 * var(--k)); z-index: 1; width: calc(150 * var(--k)); height: calc(112 * var(--k)); border-radius: calc(16 * var(--k)); overflow: hidden; border: max(3px, calc(6 * var(--k))) solid #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .16); background: #E8F3E6; }
.gt-ph .gt-anh-nho { left: calc(40 * var(--k)); }
.gt-tr .gt-anh-nho { right: calc(40 * var(--k)); }
.gt-huy-hieu { bottom: calc(30 * var(--k)); z-index: 2; width: calc(54 * var(--k)); aspect-ratio: 1; border-radius: 50%; background: var(--xanh-rung); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 max(3px, calc(6 * var(--k))) #fff; }
.gt-huy-hieu svg { width: 48%; height: auto; }
.gt-ph .gt-huy-hieu { left: calc(214 * var(--k)); }
.gt-tr .gt-huy-hieu { right: calc(214 * var(--k)); }
.gt-anh-chinh img, .gt-anh-tron img, .gt-anh-nho img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-anh-cho { width: 100%; height: 100%; background: linear-gradient(160deg, #3F6B5A, #A2C9B5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, .95); padding: 12px; }
.gt-anh-cho span { font-size: 13px; font-weight: 600; background: rgba(0, 0, 0, .2); padding: 6px 12px; border-radius: 8px; text-align: center; }
.gt-anh-tron .gt-anh-cho svg, .gt-anh-nho .gt-anh-cho svg { width: 40%; height: auto; }

/* ===== Đầu trang ===== */
.gt-hero { position: relative; background: #FAFAF7; padding: 44px 44px 60px; overflow: hidden; }
.gt-la-nen { position: absolute; left: -60px; bottom: -80px; color: #E3EDE0; pointer-events: none; }
.gt-hero-trong { position: relative; max-width: 1100px; margin: 0 auto; display: flex; gap: 30px; align-items: center; }
.gt-hero-chu { flex: 0 1 470px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.gt-logo { width: 260px; max-width: 100%; height: auto; display: block; }
.gt-hero-tieu { margin: 0; font-size: 46px; line-height: 1.05; font-weight: 700; color: var(--xanh-dam); }
.gt-hero-doan { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4A4436; }
.gt-hanh-trinh { margin-top: 6px; padding: 16px 16px 14px; border-radius: 18px; background: #fff; border: 1px solid #E3EAE0; }
.gt-ht-dau { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gt-ht-dau .gt-nhan-nho { color: var(--xanh-rung); }
.gt-gio { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: #F0FBF2; color: var(--xanh-rung); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.gt-ht-hop { position: relative; padding: 14px 4px 0; }
.gt-ht-duong { position: absolute; left: 4px; top: 22px; width: calc(100% - 8px); height: 40px; pointer-events: none; }
.gt-ht-ds { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
.gt-ht-ds li { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.gt-ht-ds button { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 82px; max-width: 100%; border-radius: 12px; }
.gt-ht-vong { position: relative; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1.5px solid var(--xanh-rung); color: var(--xanh-rung); display: flex; align-items: center; justify-content: center; }
.gt-ht-vong i { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--xanh-rung); color: #fff; font-size: 11.5px; font-weight: 800; font-style: normal; display: flex; align-items: center; justify-content: center; }
.gt-ht-ten { font-size: 12.5px; font-weight: 700; color: var(--xanh-dam); text-align: center; white-space: nowrap; }
.gt-hero-anh { --k: calc(100cqw / 470); aspect-ratio: 470 / 560; }
.gt-hero-anh .gt-khung { right: 0; width: calc(360 * var(--k)); height: calc(470 * var(--k)); border-radius: calc(180 * var(--k)) calc(180 * var(--k)) calc(26 * var(--k)) calc(26 * var(--k)); transform: translate(calc(14 * var(--k)), calc(14 * var(--k))); }
.gt-hero-anh .gt-anh-chinh { right: calc(14 * var(--k)); width: calc(346 * var(--k)); height: calc(456 * var(--k)); border-radius: calc(180 * var(--k)) calc(180 * var(--k)) calc(26 * var(--k)) calc(26 * var(--k)); box-shadow: 0 24px 50px rgba(17, 57, 23, .2); }
.gt-hero-anh .gt-anh-tron { left: 0; width: calc(250 * var(--k)); }
.gt-hero-anh .gt-anh-nho { left: calc(30 * var(--k)); top: calc(40 * var(--k)); width: calc(160 * var(--k)); height: calc(120 * var(--k)); border-radius: calc(18 * var(--k)); }
.gt-anh-hop-dau { flex: 0 1 470px; }

/* ===== Thanh "Đi tới" (dính trên cùng khi lướt) ===== */
.gt-di-toi { position: sticky; top: 10px; z-index: 6; width: min(1100px, calc(100% - 88px)); margin: -28px auto 0; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 26px rgba(17, 57, 23, .12); display: flex; gap: 6px; align-items: center; }
.gt-di-toi-nhan { padding: 0 6px; }
.gt-di-toi-ds { display: flex; gap: 6px; flex: 1; min-width: 0; justify-content: space-between; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gt-di-toi-ds::-webkit-scrollbar { display: none; }
.gt-o { flex: none; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; border: 1.5px solid var(--vien-dam); background: #fff; color: #3A3026; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gt-o b { opacity: .6; font-weight: 700; }
.gt-o.on { background: var(--xanh-rung); border-color: var(--xanh-rung); color: #fff; }
.gt-nen-dau { height: 20px; background: #F3F8F1; margin-top: -20px; }

/* ===== Từng khu ===== */
.gt-khu { position: relative; padding: 54px 44px 96px; scroll-margin-top: 14px; }
.gt-khu.le { background: #F3F8F1; }
.gt-khu.chan { background: #FAFAF7; }
.gt-day-net { position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(#B08D57 0 6px, transparent 6px 12px); opacity: .5; }
.gt-cham { position: absolute; left: 11px; top: 70px; width: 15px; height: 15px; border-radius: 50%; background: var(--xanh-rung); }
.gt-khu.le .gt-cham { box-shadow: 0 0 0 4px #F3F8F1; }
.gt-khu.chan .gt-cham { box-shadow: 0 0 0 4px #FAFAF7; }
.gt-khu-trong { position: relative; max-width: 1100px; margin: 0 auto; display: flex; gap: 36px; align-items: center; justify-content: space-between; }
.gt-khu-trong > .gt-anh-hop { flex: 0 1 530px; order: 2; }
.gt-khu-trong > .gt-chu { flex: 0 1 440px; min-width: 0; order: 1; display: flex; flex-direction: column; gap: 14px; }
.gt-khu-trong.trai > .gt-anh-hop { order: 1; }
.gt-khu-trong.trai > .gt-chu { order: 2; }
.gt-dau { display: flex; align-items: flex-end; gap: 14px; }
.gt-so { font-size: 92px; line-height: .8; font-weight: 700; color: transparent; -webkit-text-stroke: 1.5px var(--gt-vang); }
.gt-nhan { font-size: calc(13px * var(--co-chu)); font-weight: 700; color: var(--gt-nau); padding-bottom: 6px; }
.gt-ten { margin: 0; font-size: 48px; line-height: 1; font-weight: 700; color: var(--xanh-dam); }
.gt-cau-dan { font-size: 22px; font-style: italic; font-weight: 600; color: var(--xanh-rung); margin-top: 6px; }
.gt-doan { margin: 0; font-size: 15px; line-height: 1.6; color: #4A4436; }
.gt-nhom { display: flex; flex-direction: column; gap: 7px; }
.gt-tieu-nhom { font-size: 13px; font-weight: 700; color: var(--nau); }
.gt-the-ds, .gt-gia-tri { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.gt-the-ds { flex-wrap: wrap; }
.gt-the { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #DDE8DA; font-size: 13.5px; font-weight: 600; color: #1D4A27; }
.gt-gia-tri li { flex: 1; min-width: 0; padding: 12px 10px; border-radius: 14px; background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gt-gia-tri b { font-size: 13px; line-height: 1.3; color: var(--chu); }
.gt-bieu { width: 36px; height: 36px; border-radius: 50%; background: #E3F1E5; color: var(--xanh-rung); display: flex; align-items: center; justify-content: center; }
.gt-gia { padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--gt-vang); background: rgba(255, 255, 255, .6); }
.gt-gia-nhan { font-size: calc(13px * var(--co-chu)); font-weight: 700; color: #8A8372; }
.gt-gia-ds { margin: 4px 0 0; display: flex; gap: 10px; }
.gt-gia-ds > div { flex: 1; min-width: 0; }
.gt-gia-ds dt { font-size: 12px; color: var(--chu-phu); }
.gt-gia-ds dd { margin: 0; font-weight: 800; font-size: 15.5px; color: var(--xanh-dam); white-space: nowrap; }
.gt-nut { align-self: flex-start; height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid transparent; background: var(--xanh-rung); color: #fff; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.gt-song { position: absolute; left: 0; bottom: -1px; width: 100%; height: 70px; display: block; pointer-events: none; }

/* ===== Cuối trang ===== */
.gt-chan { background: #113917; color: #fff; padding: 36px max(44px, calc((100% - 1100px) / 2)) 44px; display: flex; align-items: center; gap: 24px; }
.gt-chan-chu { flex: 1; min-width: 0; }
.gt-chan-tieu { font-size: 34px; font-weight: 700; line-height: 1.15; }
.gt-chan-phu { color: var(--xanh-lui); margin-top: 6px; font-size: 15px; }
.gt-chan-nut { flex: none; height: 52px; padding: 0 22px; border-radius: 12px; border: 0; background: #F0FBF2; color: var(--xanh-dam); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ===== Điện thoại ===== */
@media (max-width: 767px) {
  .gt-hero { padding: 28px 16px 56px; }
  .gt-hero-trong { flex-direction: column; align-items: stretch; gap: 28px; }
  .gt-hero-chu { flex: none; }
  .gt-logo { width: 200px; }
  .gt-hero-tieu { font-size: 36px; }
  .gt-hero-doan { font-size: 15px; }
  .gt-hanh-trinh { padding: 14px 10px 12px; }
  .gt-ht-ds button { width: 100%; gap: 6px; }
  .gt-ht-vong { width: 46px; height: 46px; }
  .gt-ht-ten { font-size: 12px; white-space: normal; line-height: 1.2; }
  .gt-anh-hop-dau { flex: none; max-width: 400px; margin: 0 auto; padding-right: 12px; }
  .gt-di-toi { top: 8px; width: calc(100% - 24px); margin-top: -26px; padding: 8px; border-radius: 14px; }
  .gt-di-toi-nhan { display: none; }
  .gt-di-toi-ds { justify-content: flex-start; }
  .gt-o { height: 38px; padding: 0 12px; font-size: 13px; }
  .gt-khu { padding: 40px 16px 84px; }
  .gt-day-net, .gt-cham { display: none; }
  .gt-khu-trong, .gt-khu-trong.trai { flex-direction: column; align-items: stretch; gap: 30px; }
  .gt-khu-trong > .gt-anh-hop, .gt-khu-trong.trai > .gt-anh-hop { flex: none; order: 1; max-width: 440px; margin: 0 auto; padding-right: 14px; }
  .gt-khu-trong > .gt-chu, .gt-khu-trong.trai > .gt-chu { flex: none; order: 2; }
  .gt-so { font-size: 68px; }
  .gt-ten { font-size: 38px; }
  .gt-cau-dan { font-size: 20px; }
  .gt-gia-tri { display: grid; grid-template-columns: 1fr 1fr; }
  .gt-gia-ds dd { white-space: normal; }
  .gt-nut { width: 100%; }
  .gt-chan { flex-direction: column; align-items: stretch; padding: 28px 16px 32px; gap: 18px; }
  .gt-chan-tieu { font-size: 28px; }
  .gt-chan-nut { width: 100%; justify-content: center; }
}
/* Máy tính: nền ảnh rộng hơn thì thêm chút khoảng thở */
@media (min-width: 1300px) {
  .gt-khu { padding-top: 64px; }
}