/* ==========================================================
   Trang "RGC Vietnam" (romarglobalcare.vn - Romar Global), page-rgc-vietnam.php.
   5 khối theo file nội dung "Content website - Romar Global Care" (2026-10-16):
   .rgc-hero (banner video) -> .rgc-intro (RGC & EIED + chứng nhận) ->
   .rgc-story (nền xanh, ảnh + chữ) -> .rgc-found (con số + 3 ảnh) ->
   .rgc-values (lưới 6 giá trị).
   Màu dùng biến có sẵn trong style.css :root (--romar-teal-dark, --romar-bg-soft).
   ========================================================== */

.romar-menu .nav-link--current{ cursor:default; }
.romar-menu .nav-link--current:hover{ color:#005C6F; }

.rgc-hero, .rgc-intro, .rgc-story, .rgc-found, .rgc-values{
  font-family:'Anuphan', sans-serif;
}
/* Tiêu đề không để 1 chữ đứng lẻ ở dòng cuối (vd "...BỀN / VỮNG"). balance
   cho trình duyệt chưa hỗ trợ pretty. */
.rgc-hero-title, .rgc-intro-title, .rgc-intro-subtitle, .rgc-story-title,
.rgc-found-title, .rgc-values-title, .rgc-value-title{
  text-wrap:balance;
  text-wrap:pretty;
}
/* .container-xl của theme rộng tới 1440px (lề 12px) - nội dung RGC theo vùng
   1200px như các trang khác (Figma lề 120px trên khung 1440). */
.rgc-hero .container-xl,
.rgc-story .container-xl,
.rgc-found .container-xl,
.rgc-values .container-xl{
  max-width:1248px;
  padding-left:24px;
  padding-right:24px;
}

/* ---------- Khung ảnh chờ "*đặt ảnh vào đây" ---------- */
.rgc-media--empty{
  display:flex;
  align-items:flex-start;
  background:#D9D9D9;
}
.rgc-placeholder{
  padding:20px 24px;
  font-weight:300;
  font-size:14px;
  text-transform:uppercase;
  color:#000;
}

/* ---------- 1. Banner video ----------
   Video YouTube phủ kín khung (giống background-size:cover): khung là
   container kích thước (cqw/cqh), iframe 16:9 lấy cạnh lớn hơn rồi căn giữa. */
.rgc-hero{
  position:relative;
  overflow:hidden;
  container-type:size;
  height:min(44vw, 640px);
  min-height:460px;
  background:#1b1b1b center/cover no-repeat;
  color:#fff;
}
.rgc-hero-video{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.rgc-hero-video iframe{
  position:absolute;
  top:50%;
  left:50%;
  /* +140px: đẩy thanh tiêu đề (trên) và logo YouTube (dưới) ra ngoài khung,
     giữ đúng tỉ lệ 16:9 để video không bị viền đen. */
  --rgc-h:calc(max(100cqh, 56.25cqw) + 140px);
  width:calc(var(--rgc-h) * 16 / 9);
  height:var(--rgc-h);
  transform:translate(-50%, -50%);
  border:0;
}
.rgc-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.05) 100%);
}
.rgc-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
}
.rgc-hero-kicker{
  margin:0 0 12px;
  font-weight:700;
  font-size:24px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.rgc-hero-title{
  margin:0;
  max-width:620px;
  font-weight:700;
  font-size:56px;
  line-height:1.12;
  color:#fff;
}
.rgc-hero-caption{
  margin:20px 0 0;
  font-weight:600;
  font-size:16px;
}

/* ---------- 2. Giới thiệu RGC & EIED ---------- */
.rgc-intro{
  background:var(--romar-bg-soft);
  padding:72px 0;
}
.rgc-intro-inner{
  max-width:960px;
  text-align:center;
}
.rgc-intro-title{
  margin:0;
  font-weight:700;
  font-size:40px;
  line-height:1.2;
  color:var(--romar-teal-dark);
  text-transform:uppercase;
}
.rgc-intro-subtitle{
  margin:12px 0 0;
  font-weight:600;
  font-size:22px;
  line-height:1.4;
  color:var(--romar-teal-dark);
}
.rgc-intro-content{
  margin-top:28px;
  font-size:18px;
  line-height:1.65;
  color:#1f2b2e;
}
.rgc-intro-content p{ margin:0 0 16px; }
.rgc-intro-content p:last-child{ margin-bottom:0; }
.rgc-intro-content strong{ color:var(--romar-teal-dark); }
.rgc-certs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px 40px;
  margin:36px 0 8px;
  padding:0;
  list-style:none;
}
.rgc-cert img,
.rgc-cert-empty{
  display:block;
  width:100px;
  height:100px;
  object-fit:contain;
}
.rgc-cert a{ display:block; transition:transform .2s; }
.rgc-cert a:hover{ transform:translateY(-3px); }
.rgc-cert-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed #9aa9ac;
  border-radius:50%;
  font-weight:700;
  font-size:13px;
  color:#5c6b6e;
}

/* ---------- 3. Khối nền xanh (ảnh + chữ) ---------- */
.rgc-story{
  background:var(--romar-teal-dark);
  padding:80px 0;
  color:#fff;
}
.rgc-story-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.rgc-story-title{
  margin:0;
  font-weight:700;
  font-size:40px;
  line-height:1.2;
  color:#fff;
  text-transform:uppercase;
}
.rgc-story-desc{
  margin-top:24px;
  font-size:18px;
  line-height:1.65;
}
.rgc-story-desc p{ margin:0 0 16px; }
.rgc-story-desc p:last-child{ margin-bottom:0; }
.rgc-story-desc strong{ color:#fff; }
.rgc-story-media{
  aspect-ratio:1/1;
  border-radius:8px;
  overflow:hidden;
}
.rgc-story-media img,
.rgc-found-img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- 4. Nền tảng vững mạnh ---------- */
.rgc-found{
  padding:88px 0;
}
.rgc-found-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.rgc-found-title{
  margin:0;
  font-weight:700;
  font-size:40px;
  line-height:1.2;
  color:var(--romar-teal-dark);
  text-transform:uppercase;
}
.rgc-found-desc{
  margin:20px 0 0;
  font-size:18px;
  line-height:1.65;
  color:#1f2b2e;
}
.rgc-stats{
  display:flex;
  flex-wrap:wrap;
  gap:24px 32px;
  margin:36px 0 0;
  padding:0;
  list-style:none;
}
.rgc-stat{ display:flex; flex-direction:column; }
.rgc-stat-number{
  font-weight:700;
  font-size:36px;
  line-height:1.1;
  white-space:nowrap;
  color:var(--romar-teal-dark);
}
.rgc-stat-label{
  margin-top:6px;
  font-size:16px;
  line-height:1.4;
  color:#4a5a5d;
}
.rgc-found-gallery{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:16px;
  height:460px;
}
.rgc-found-img{
  border-radius:12px;
  overflow:hidden;
  min-height:0;
}
.rgc-found-img--main{ grid-row:1 / span 2; }

/* ---------- 5. Những giá trị định hình ---------- */
.rgc-values{
  background:var(--romar-bg-soft);
  padding:80px 0 96px;
}
.rgc-values-title{
  margin:0 0 48px;
  font-weight:700;
  font-size:40px;
  line-height:1.2;
  color:var(--romar-teal-dark);
  text-transform:uppercase;
  text-align:center;
}
.rgc-values-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.rgc-value{
  padding:28px 28px 32px;
  background:#fff;
  border-top:4px solid var(--romar-teal-dark);
  border-radius:8px;
}
.rgc-value-title{
  margin:0 0 12px;
  font-weight:700;
  font-size:18px;
  line-height:1.35;
  color:var(--romar-teal-dark);
  text-transform:uppercase;
}
.rgc-value-desc{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:#1f2b2e;
}

/* ---------- Tablet ---------- */
@media (max-width:991.98px){
  .rgc-hero{ height:auto; min-height:0; aspect-ratio:16/9; }
  .rgc-hero-title{ font-size:40px; max-width:480px; }
  .rgc-hero-kicker{ font-size:18px; }

  .rgc-intro, .rgc-story, .rgc-values{ padding:56px 0; }
  .rgc-found{ padding:56px 0; }
  .rgc-intro-title, .rgc-story-title, .rgc-found-title, .rgc-values-title{ font-size:30px; }

  .rgc-story-row, .rgc-found-row{ grid-template-columns:1fr; gap:32px; }
  .rgc-story-media{ order:-1; max-width:520px; width:100%; margin:0 auto; }
  .rgc-found-gallery{ height:360px; }
  .rgc-values-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------- Mobile ---------- */
@media (max-width:575.98px){
  /* 16:9 ở 375-402px chỉ cao ~215px - chữ banner cần ít nhất ~300px. */
  .rgc-hero{ aspect-ratio:auto; height:320px; }
  .rgc-hero-overlay{ background:rgba(0,0,0,.45); }
  .rgc-hero-kicker{ font-size:14px; margin-bottom:8px; }
  .rgc-hero-title{ font-size:28px; }
  .rgc-hero-caption{ margin-top:12px; font-size:13px; }

  .rgc-intro, .rgc-story, .rgc-found, .rgc-values{ padding:40px 0; }
  .rgc-intro-title, .rgc-story-title, .rgc-found-title, .rgc-values-title{ font-size:24px; }
  .rgc-intro-subtitle{ font-size:17px; }
  .rgc-intro-content, .rgc-story-desc, .rgc-found-desc{ font-size:15px; line-height:1.6; }
  .rgc-intro-content{ text-align:left; }
  .rgc-certs{ gap:16px 20px; }
  .rgc-cert img, .rgc-cert-empty{ width:72px; height:72px; }
  .rgc-cert-empty{ font-size:11px; }

  .rgc-stats{ gap:20px 28px; margin-top:24px; }
  .rgc-stat-number{ font-size:32px; }
  .rgc-stat-label{ font-size:14px; }
  .rgc-found-gallery{ height:260px; gap:10px; }

  .rgc-values-title{ margin-bottom:28px; }
  .rgc-values-grid{ grid-template-columns:1fr; gap:16px; }
  .rgc-value{ padding:20px 20px 24px; }
  .rgc-value-title{ font-size:16px; }
  .rgc-value-desc{ font-size:15px; }
}