/* ============================================================
   SECTIONS — Kiểu riêng cho các khối nội dung (Module C trở đi)
   ============================================================ */

/* ---------- Hiệu ứng reveal (dùng chung) ----------
   --i do reveal.js gán để các phần tử cùng nhóm hiện lần lượt. */
.reveal {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* ---------- Khung ảnh dùng chung + placeholder khi chưa có ảnh ----------
   core.js gắn .is-missing vào khung khi ảnh không tải được. */
.feature__media, .bento__media, .tour-card__top {
  background:
    repeating-radial-gradient(circle at 18% 118%, rgba(255,255,255,.08) 0 1px, transparent 1.5px 26px),
    radial-gradient(110% 90% at 100% 0%, rgba(255,255,255,.2), transparent 55%),
    linear-gradient(135deg, var(--accent), var(--green-900));
}
.ph { display: none; }
.is-missing > img { display: none; }
.is-missing > .ph { display: grid !important; }  /* thắng style="display:none" cũ */
.ph {
  position: absolute; inset: 0; z-index: 1;
  place-items: center; align-content: center; color: #fff; text-align: center;
}
.ph svg {
  width: 68px; height: 68px; padding: 17px; margin: 0 auto;
  border-radius: 20px; background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 24px 40px -22px rgba(0,0,0,.45);
}
.ph small { display: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(55% 70% at 92% 6%, rgba(201,150,46,.20), transparent 62%),
    radial-gradient(50% 60% at -5% 105%, rgba(14,132,73,.10), transparent 62%),
    linear-gradient(180deg, var(--green-100) 0%, var(--ivory) 78%);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 58%; pointer-events: none;
  background-image: radial-gradient(rgba(20,80,60,.18) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 60% at 68% 48%, #000, transparent 72%);
          mask-image: radial-gradient(60% 60% at 68% 48%, #000, transparent 72%);
}
.hero__inner {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center;
  gap: clamp(32px, 5vw, 72px); padding-block: clamp(48px, 7vw, 88px) clamp(64px, 9vw, 112px);
}
.hero__inner > * { min-width: 0; }
.hero .eyebrow { color: var(--green-700); }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.1; letter-spacing: -.024em; margin-bottom: 22px; }
.hero h1 .accent { color: var(--gold); font-style: italic; display: inline-block; padding-bottom: .08em; }
/* Desktop: cỡ chữ vừa cột để "vững bước tương lai." nằm trọn 1 dòng (tổng 2 dòng) */
@media (min-width: 901px) {
  .hero h1 { font-size: clamp(2.2rem, 4.1vw, 3.4rem); }
}
.hero__lead { color: var(--muted); font-size: clamp(1.02rem, 1.25vw, 1.14rem); margin-bottom: 34px; max-width: 50ch; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Panel cam kết bên phải hero: tấm nền xanh xoay lệch phía sau + khung kép */
.hero__visual { position: relative; padding: 26px 0 0 26px; }
.hero__plate {
  position: absolute; inset: 0 26px 26px 0; border-radius: var(--radius-xl);
  background:
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px) 0 0 / 20px 20px,
    radial-gradient(80% 70% at 100% 0%, rgba(228,184,74,.35), transparent 60%),
    var(--grad-dark);
  transform: rotate(-3deg); box-shadow: var(--shadow-lg);
}
.hero__panel {
  position: relative; background: var(--paper); border-radius: 24px;
  padding: clamp(26px, 3vw, 36px); box-shadow: var(--bezel), var(--shadow-lg);
}
.hero__panel h3 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  color: var(--green-900); padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.hero__panel ul { list-style: none; display: grid; }
.hero__panel li { display: flex; gap: 14px; align-items: center; font-weight: 500; padding: 14px 0; }
.hero__panel li + li { border-top: 1px solid rgba(20,80,60,.07); }
.hero__panel li:last-child { padding-bottom: 0; }
.hero__panel svg {
  flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%;
  color: var(--gold); background: rgba(201,150,46,.14);
}
.hero__panel svg path { stroke-width: 2.4; }

/* ---------- Thẻ dịch vụ (link) ---------- */
.service-card { display: flex; flex-direction: column; }
.service-card .more { margin-top: auto; padding-top: 14px; font-weight: 600; color: var(--green-700); }
.service-card:hover .more { text-decoration: underline; }

/* ---------- Bốn mảng dịch vụ: lưới ô lệch nhịp (bento) ----------
   Hàng 1: ô lớn ảnh + ô nhỏ nền màu. Hàng 2: ô nhỏ nền màu + ô lớn ảnh. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.bento__item {
  grid-column: span 5; position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(300px, 30vw, 360px); padding: clamp(24px, 3vw, 36px);
  border-radius: 24px; box-shadow: var(--bezel), var(--shadow-sm);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.bento__item--wide { grid-column: span 7; }
.bento__item:hover { transform: translateY(-6px); box-shadow: var(--bezel), var(--shadow-lg); }
.bento__item .card__icon { margin-bottom: auto; }
.bento__item h3 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -.015em; margin: 28px 0 8px;
}
.bento__item p { font-size: .98rem; max-width: 40ch; }
.bento__item .more { display: inline-flex; gap: 8px; margin-top: 18px; font-weight: 600; }

/* Ô có ảnh nền */
.bento__item--photo { color: #fff; background: var(--green-900); }
.bento__media { position: absolute; inset: 0; z-index: -1; }
.bento__media > .ph { display: none !important; }  /* ô đã có icon riêng, chỉ để nền họa tiết khi chưa có ảnh */
.bento__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.bento__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,40,26,.08) 15%, rgba(6,40,26,.5) 55%, rgba(6,40,26,.9) 100%);
}
.bento__item:hover .bento__media img { transform: scale(1.05); }

/* Vùng ảnh riêng từng ô */
/* Du lịch: ảnh ghép 4 khung → phóng 2,1 lần, neo góc trên phải để chỉ hiện cảnh du thuyền */
.bento__media--du-lich img {
  position: absolute; top: 0; right: 0; width: 210%; height: 210%; max-width: none;
  object-position: 100% 0; transform-origin: 76% 24%;
}
/* Môi trường: neo góc dưới phải để dòng chữ "Tương Lai Bền Vững" in sẵn trong ảnh
   luôn nằm trọn trong khung; phóng khi rê chuột cũng neo góc đó để chữ không bị cắt */
.bento__media--moi-truong img { object-position: right bottom; transform-origin: right bottom; }
/* Lớp phủ: tối ở bên trái (chữ trắng của thẻ), nhạt dần về góc dưới phải (chữ trong ảnh) */
.bento__media--moi-truong::after {
  background:
    linear-gradient(90deg, rgba(6,40,26,.6) 0%, rgba(6,40,26,.45) 45%, rgba(6,40,26,0) 80%),
    linear-gradient(180deg, rgba(6,40,26,0) 25%, rgba(6,40,26,.3) 60%, rgba(6,40,26,.35) 100%);
}
/* Bù lại phần nền nhạt hơn: bóng mờ nhẹ giữ chữ trắng của thẻ dễ đọc */
.bento__media--moi-truong ~ h3,
.bento__media--moi-truong ~ p,
.bento__media--moi-truong ~ .more { text-shadow: 0 1px 14px rgba(6,40,26,.75), 0 1px 2px rgba(6,40,26,.5); }
.bento__media--kho-bai img { object-position: 48% 30%; }     /* cẩu vàng + tàu container */
.bento__item--photo h3 { color: #fff; }
.bento__item--photo p { color: rgba(255,255,255,.88); }
.bento__item--photo .more { color: var(--gold-soft); }
.bento__item--photo .card__icon { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }

/* Ô nền màu nhạt có họa tiết riêng */
.bento__item--tint {
  color: var(--ink);
  background: var(--green-100);
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(255,255,255,.75), transparent 60%),
    color-mix(in srgb, var(--accent) 11%, #fff);
}
.bento__item--tint h3 { color: var(--green-900); }
.bento__item--tint p { color: var(--muted); }
.bento__item--tint .more { color: var(--accent); }
.bento__item--tint::before {
  content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 300px; height: 300px;
  pointer-events: none; opacity: .5;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent);
          mask-image: radial-gradient(closest-side, #000 40%, transparent);
  transition: transform 1.2s var(--ease-out);
}
.bento__item--tint:hover::before { transform: rotate(8deg) scale(1.06); }
/* Vân vòng tròn (môi trường) */
.bento__item--rings::before {
  background: repeating-radial-gradient(circle at 50% 50%, var(--accent) 0 1px, transparent 1.5px 16px);
}
/* Sọc chéo như giá kệ (kho bãi) */
.bento__item--stripes::before {
  background: repeating-linear-gradient(-45deg, var(--accent) 0 1px, transparent 1.5px 14px);
}

/* ---------- Khối chi tiết ảnh–chữ ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.feature + .feature { margin-top: clamp(72px, 10vw, 128px); }
.feature--reverse > .feature__media,
.feature--reverse > .feature__visual { order: 2; }

/* Tấm màu lệch phía sau ảnh tạo chiều sâu */
.feature__visual { position: relative; isolation: isolate; }
.feature__visual::before {
  content: ""; position: absolute; z-index: -1; inset: 22px -22px -22px 22px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(135deg, var(--accent), var(--green-900));
  opacity: .9;
}
.feature--reverse .feature__visual::before { inset: 22px 22px -22px -22px; }

.feature__media {
  aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; position: relative;
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--bezel), var(--shadow-lg);
}
.feature--reverse .feature__media { aspect-ratio: 5 / 4; }
.feature__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 100% at 100% 0%, rgba(255,255,255,.12), transparent 55%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.feature:hover .feature__media img { transform: scale(1.04); }
.feature__body .eyebrow { color: var(--accent); }
.feature__body p { color: var(--muted); margin: 14px 0 24px; }
.feature__list { list-style: none; display: grid; gap: 14px; margin-bottom: 30px; }
.feature__list li { display: flex; gap: 12px; align-items: flex-start; }
.feature__list svg {
  flex: none; width: 26px; height: 26px; padding: 6px; border-radius: 50%; margin-top: 1px;
  color: var(--accent); background: var(--green-100);
  background: color-mix(in srgb, var(--accent) 13%, #fff);
}
.feature__list svg path { stroke-width: 2.6; }

/* ---------- Cảm nhận khách hàng ---------- */
.testimonial { text-align: center; }
.testimonial blockquote {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.5; color: #fff; max-width: 34em; margin: 0 auto 28px; font-style: italic;
  text-wrap: balance;
}
.testimonial .cite { color: var(--gold-soft); font-family: var(--font-body); font-weight: 600; font-style: normal; }
.testimonial .cite::before {
  content: ""; display: block; width: 44px; height: 2px; border-radius: 2px;
  margin: 0 auto 16px; background: var(--gold-soft); opacity: .7;
}

/* ---------- Tin tức / Tour nổi bật ---------- */
.tour-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tour-card__top { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tour-card__top img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s var(--ease-out);
}
.tour-card:hover .tour-card__top img { transform: scale(1.06); }
.tour-card__top::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(6,40,26,.35)),
    radial-gradient(120% 100% at 100% 0%, rgba(201,150,46,.22), transparent 55%);
}
.tour-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px clamp(20px, 2.6vw, 28px) 26px; }
.tour-card h3 { margin-bottom: 8px; }
.tour-card p { color: var(--muted); font-size: .95rem; margin-bottom: 18px; }
.tour-card .more { margin-top: auto; font-weight: 600; color: var(--green-700); }

/* Trang chủ: 1 thẻ lớn bên trái + 2 thẻ ngang xếp chồng bên phải */
.tours { display: grid; gap: clamp(18px, 2.6vw, 30px); grid-template-columns: 1.25fr 1fr; }
.tours > .tour-card:first-child { grid-row: span 2; }
.tours > .tour-card:first-child .tour-card__top { aspect-ratio: auto; flex: 1; min-height: 280px; }
.tours > .tour-card:first-child h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }  /* cùng font với thẻ nhỏ, chỉ lớn hơn */
.tours > .tour-card:not(:first-child) { flex-direction: row; }
.tours > .tour-card:not(:first-child) .tour-card__top { aspect-ratio: auto; width: 42%; flex: none; }

/* ---------- Dải CTA cuối ---------- */
.cta-band { text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: 14px; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.cta-band p { color: #CFDDD4; margin: 0 auto 32px; max-width: 52ch; }
.cta-band .hotline {
  display: block; width: max-content; max-width: 100%; margin: 20px auto 0;
  color: var(--gold-soft); font-weight: 600; font-variant-numeric: tabular-nums;
}
.cta-band .hotline:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Responsive các khối ---------- */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { padding: 16px 0 0 16px; max-width: 560px; }
  .hero__plate { inset: 0 16px 16px 0; transform: rotate(-2deg); }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__item, .bento__item--wide { grid-column: auto; }
  .feature { grid-template-columns: 1fr; }
  .feature--reverse > .feature__media,
  .feature--reverse > .feature__visual { order: 0; }
  .feature__visual::before,
  .feature--reverse .feature__visual::before { inset: 14px -10px -14px 10px; }
  .tours { grid-template-columns: 1fr; }
  .tours > .tour-card:first-child { grid-row: auto; }
  .tours > .tour-card:first-child .tour-card__top { aspect-ratio: 16 / 10; flex: none; min-height: 0; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento__item { min-height: 280px; }
  .tours > .tour-card:not(:first-child) { flex-direction: column; }
  .tours > .tour-card:not(:first-child) .tour-card__top { width: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .hero__actions .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   PAGE HERO + CARD LIST  (Module D — trang dịch vụ)
   ============================================================ */
.page-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(55% 80% at 94% -10%, rgba(201,150,46,.18), transparent 60%),
    linear-gradient(180deg, var(--green-100), var(--ivory) 82%);
}
/* Họa tiết chấm mờ bên phải banner */
.page-hero::before{
  content:""; position:absolute; z-index:-1; top:0; bottom:0; right:0; width:55%; pointer-events:none;
  background-image: radial-gradient(rgba(20,80,60,.16) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 40%, #000, transparent 72%);
          mask-image: radial-gradient(60% 70% at 72% 40%, #000, transparent 72%);
}
.page-hero__inner{ max-width:840px; padding-block: clamp(40px,6vw,72px) clamp(52px,7vw,92px); }
.page-hero .eyebrow{ color:var(--accent); }
.page-hero h1{ margin:0 0 18px; }
.page-hero .lead{ color:var(--muted); font-size:clamp(1.02rem,1.25vw,1.12rem); margin-bottom:30px; max-width:58ch; }

/* Banner có ảnh (trang dịch vụ): chữ trái, ảnh phải, ảnh đè xuống khối dưới */
.page-hero--media{ overflow:visible; }
.page-hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(32px,5vw,72px);
}
.page-hero__grid > *{ min-width:0; }
.page-hero--media .page-hero__inner{ padding-block: clamp(40px,6vw,72px) clamp(88px,10vw,128px); }
.page-hero__visual{ position:relative; isolation:isolate; align-self:end; margin-bottom:-56px; z-index:1; }
.page-hero__visual::before{
  content:""; position:absolute; z-index:-1; inset:-18px 18px 18px -18px; border-radius:var(--radius-xl);
  background:
    radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(135deg, var(--accent), var(--green-900));
  transform: rotate(-2deg);
}
.page-hero__media{
  position:relative; overflow:hidden; aspect-ratio:5 / 4; border-radius:24px;
  box-shadow: var(--bezel), var(--shadow-lg);
  background:
    repeating-radial-gradient(circle at 18% 118%, rgba(255,255,255,.08) 0 1px, transparent 1.5px 26px),
    radial-gradient(110% 90% at 100% 0%, rgba(255,255,255,.2), transparent 55%),
    linear-gradient(135deg, var(--accent), var(--green-900));
}
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }
.page-hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
/* Khối ngay sau banner có ảnh: chừa chỗ cho phần ảnh đè xuống */
.page-hero--media + .section{ padding-top: calc(clamp(64px, 9vw, 120px) + 56px); }

@media (max-width:900px){
  .page-hero__grid{ grid-template-columns:1fr; gap:0; }
  .page-hero--media .page-hero__inner{ padding-bottom: clamp(36px,6vw,56px); }
  .page-hero__visual{ margin-bottom:-36px; max-width:600px; }
  .page-hero__visual::before{ inset:-10px 10px 10px -10px; transform:rotate(-1.5deg); }
  .page-hero--media + .section{ padding-top: calc(clamp(64px, 9vw, 120px) + 36px); }
}

/* Danh sách nhỏ bên trong thẻ */
.card__list{ list-style:none; display:grid; gap:9px; margin-top:16px; font-size:.92rem; color:var(--muted); }
.card__list li{ display:flex; gap:10px; align-items:flex-start; }
.card__list li::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--accent); flex:none; margin-top:8px; transform:rotate(45deg); }

/* ---------- Ba trụ cột (thay cho 3 thẻ đều nhau) ---------- */
.pillars{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid rgba(20,80,60,.14);
}
.pillar{
  position:relative; padding: clamp(30px,3.4vw,44px) clamp(20px,2.8vw,40px) 6px;
  transition: background-color .5s var(--ease-out);
}
.pillar:first-child{ padding-left:0; }
.pillar:last-child{ padding-right:0; }
.pillar + .pillar{ border-left:1px solid rgba(20,80,60,.10); }
.pillar::before{
  content:""; position:absolute; top:-2px; left:clamp(20px,2.8vw,40px); width:44px; height:3px; border-radius:3px;
  background:var(--accent); transition: width .6s var(--ease-out);
}
.pillar:first-child::before{ left:0; }
.pillar:hover::before{ width:96px; }
.pillar .card__icon{ transition: transform .6s var(--ease-out); }
.pillar:hover .card__icon{ transform: translateY(-3px); }
.pillar h3{ margin-bottom:8px; }
.pillar p{ color:var(--muted); font-size:.96rem; }

/* Quy trình: vòng mũi tên nối giữa các bước */
.pillars--steps .pillar:not(:last-child)::after{
  content:""; position:absolute; z-index:1; right:-15px; top:calc(clamp(30px,3.4vw,44px) + 10px);
  width:30px; height:30px; border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%231C6B4F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 1px rgba(20,80,60,.14), var(--shadow-sm);
}

@media (max-width:820px){
  .pillars{ grid-template-columns:1fr; border-top:0; }
  .pillar, .pillar:first-child, .pillar:last-child{ padding:30px 0 26px; }
  .pillar{ border-top:1px solid rgba(20,80,60,.14); }
  .pillar + .pillar{ border-left:0; }
  .pillar::before, .pillar:first-child::before{ left:0; }
  .pillars--steps .pillar:not(:last-child)::after{ right:auto; left:calc(50% - 15px); top:auto; bottom:-15px; transform:rotate(90deg); }
}

/* ---------- Danh sách 2×2 không khung (Vì sao chọn) ---------- */
.why{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(32px,5vw,72px); }
.why__item{ display:flex; gap:20px; align-items:flex-start; padding:28px 0; border-top:1px solid rgba(20,80,60,.14); }
.why__item .card__icon{ flex:none; margin:0; background:#fff; }
.why__item h3{ margin-bottom:6px; }
.why__item p{ color:var(--muted); font-size:.96rem; }
@media (max-width:720px){ .why{ grid-template-columns:1fr; } }

/* ============================================================
   TUYỂN DỤNG  (Module E)
   ============================================================ */
.job-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.filter-btn{
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--ink); border:1px solid rgba(20,80,60,.14);
  box-shadow: var(--shadow-sm);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .4s var(--ease-out);
}
.filter-btn:hover{ border-color:var(--green-600); transform:translateY(-1px); }
.filter-btn:active{ transform:scale(.97); }
.filter-btn.is-active{ background:var(--green-700); color:#fff; border-color:var(--green-700); }

.jobs-list{ display:grid; gap:clamp(20px,2.8vw,30px); grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px),1fr)); }
.job-card{ display:flex; flex-direction:column; }
.job-card__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.job-badge{
  flex:none; font-size:.76rem; font-weight:600; color:var(--green-700);
  background:var(--green-100); border-radius:6px; padding:5px 9px; white-space:nowrap;
  box-shadow: inset 0 0 0 1px rgba(20,80,60,.08);
}
.job-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:14px 0 4px; padding-bottom:14px; border-bottom:1px solid rgba(20,80,60,.08); }
.job-meta__item{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--muted); }
.job-meta__item svg{ flex:none; color:var(--green-600); }
.job-card p{ color:var(--muted); font-size:.95rem; margin-top:12px; }
.job-card__foot{ margin-top:auto; padding-top:22px; }
.job-empty, .job-error{
  color:var(--muted); background:rgba(255,255,255,.7); border:1px dashed rgba(20,80,60,.25);
  border-radius:20px; padding:28px; text-align:center; max-width:none;
}

/* ============================================================
   LIÊN HỆ  (Module F)
   ============================================================ */
.contact__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px); align-items:start; }
.contact__grid > *{ min-width:0; }
.contact-form{
  background:var(--paper); border-radius:24px; padding:clamp(24px,3.4vw,40px);
  border:1px solid rgba(20,80,60,.07); box-shadow: var(--bezel), var(--shadow-lg);
}
.field{ display:grid; gap:7px; margin-bottom:18px; }
.field label{ font-size:.9rem; font-weight:600; color:var(--ink); }
.field .req{ color:#C0392B; }
.field input, .field textarea{
  font-family:inherit; font-size:.98rem; color:var(--ink); width:100%;
  padding:13px 15px; border:1px solid #D9D5CA; border-radius:12px;
  background:#FDFCF9; transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#66756D; }
.field input:hover, .field textarea:hover{ border-color:#C4C0B3; }
.field input:focus, .field textarea:focus{ outline:none; background:#fff; border-color:var(--green-600); box-shadow:0 0 0 4px rgba(28,107,79,.14); }
.field textarea{ resize:vertical; min-height:140px; }
.field--error input, .field--error textarea{ border-color:#C0392B; background:#FFFBFA; }
.field--error input:focus, .field--error textarea:focus{ box-shadow:0 0 0 4px rgba(192,57,43,.12); }
.field__err{ display:none; align-items:center; gap:6px; color:#B03A2A; font-size:.84rem; font-weight:500; }
.field__err::before{
  content:"!"; flex:none; width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  background:#C0392B; color:#fff; font-size:.7rem; font-weight:700; line-height:1;
}
.field--error .field__err{ display:flex; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* honeypot chống bot */
.contact-form .btn[type="submit"]{ margin-top:6px; }
.form-status{ display:none; margin-top:14px; padding:12px 16px; border-radius:12px; font-size:.92rem; max-width:none; }
.form-status.is-ok{ display:block; background:var(--green-100); color:var(--green-900); box-shadow: inset 3px 0 0 var(--green-600); }
.form-status.is-err{ display:block; background:#FBEAE7; color:#8A2A1B; box-shadow: inset 3px 0 0 #C0392B; }

.contact-info{ display:grid; gap:6px; align-content:start; }
.info-item{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(20,80,60,.08); }
.info-item .ic{
  flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:14px;
  background:var(--green-100); color:var(--green-700); box-shadow: inset 0 0 0 1px rgba(20,80,60,.08);
}
.info-item strong{ display:block; margin-bottom:2px; color:var(--ink); }
.info-item span, .info-item a{ color:var(--muted); font-size:.96rem; }
.info-item a{ transition:color .25s ease; }
.info-item a:hover{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px; }

.map-wrap{ margin-top:22px; border-radius:22px; overflow:hidden; border:1px solid rgba(20,80,60,.08); box-shadow: var(--bezel), var(--shadow-sm); }
.map-wrap iframe{ display:block; width:100%; height:340px; border:0; }

.pay-note{ padding:22px; border-radius:var(--radius); background:#fff; border:1px dashed var(--gold); }
.pay-note h3{ margin-bottom:6px; }
.pay-note p{ color:var(--muted); font-size:.94rem; }
.pay-note .btn[disabled]{ opacity:.55; cursor:not-allowed; pointer-events:none; margin-top:14px; }

@media (max-width:820px){ .contact__grid{ grid-template-columns:1fr; } }

/* Link mở Google Maps dưới bản đồ (Module F - cập nhật) */
.map-link{ display:inline-flex; gap:6px; margin-top:14px; font-weight:600; color:var(--green-700); }
.map-link:hover{ text-decoration:underline; text-underline-offset:3px; }