/* =========================================================
   MEDIORA – Trang chủ
   CSS các section (CSS hiển thị .site-header, menu mobile và .hero nằm trong header.php)
   Thiết kế gốc: desktop 1920px (Figma "Trang chủ")
   ========================================================= */

body {
  background: var(--m-cream);
  color: var(--m-text);
  font-family: var(--font-body);
}
img { max-width: 100%; height: auto; }

/* Khung nội dung: 1704px + gutter → lề 108px ở màn 1920 */
.wrap      { max-width: var(--wrap); padding-left: 24px; padding-right: 24px; }
.wrap-wide { max-width: 1894px;      padding-left: 24px; padding-right: 24px; }

/* =========================================================
   KHUNG GIỮ CHỖ ẢNH (.ph)
   Ảnh chưa có → hiện khung gạch chéo + nhãn (tên layer Figma · kích thước).
   Thả đúng file vào imgs/ là ảnh tự hiện, khung tự ẩn.
   ========================================================= */
.ph {
  position: relative; display: block;
 /* background: repeating-linear-gradient(45deg, rgba(201,164,106,.20) 0 12px, rgba(201,164,106,.08) 12px 24px);
  outline: 1px dashed rgba(169,130,74,.9); outline-offset: -1px;*/
}
.ph::before {
  content: attr(data-ph);
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center; padding: 6px;
  color: #8A6A3C; font: 600 14px/1.3 var(--font-body); text-align: center;
}
.ph > img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.ph > img.is-missing { visibility: hidden; }
.ph.is-loaded { background: none; outline: 0; }
.ph.is-loaded::before { content: none; }

.ratio-csvc   { aspect-ratio: 1075 / 709; }
.ratio-doctor { aspect-ratio: 1583 / 762; }
.ratio-result { aspect-ratio: 1846 / 966; }

/* Ảnh nền section: file chưa có → dùng màu nền dự phòng */
.sec-gmiss, .sec-facility, .sec-doctor, .sec-result, .register-side {
  background-repeat: no-repeat; background-position: center top; background-size: cover;
}
.text-linear{   background: -webkit-linear-gradient(#412613, #926544);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

/* =========================================================
   3. GIỚI THIỆU NGẮN (cao 275, text y+81)
   ========================================================= */
.sec-intro {
  min-height: 275px;
  padding: 81px 0 65px;
  /*background: linear-gradient(180deg, var(--m-brown-2) 0%, var(--m-brown) 100%);*/
  background:  var(--m-brown) ;
  color: #fff;
}
.intro-text {
  max-width: 1701px; margin: 0 auto;
  font-size: 24px; line-height: 43px; text-align: center;
}

/* =========================================================
   4. NÂNG CƠ GMISS (cao 1197)
   Trái: tiêu đề 805×282 + lưới bước 2×3 (408×265, gap 19 / 15)
   Phải: ảnh video 811×1114 (y+29)
   ========================================================= */
.sec-gmiss {
  display: flow-root;                 /* chặn margin âm của .row tràn ra ngoài section */
  min-height: 1197px;
  padding: 0 0 54px;
  background-color: #8E6A47;                                  /* dự phòng khi chưa có bg-m2.jpg */
  background-image: url("../imgs/bg-m2.jpg"), linear-gradient(180deg, #6B4A2E 0%, #B8946A 55%, #EAD9BD 100%);
}
.gmiss-title { max-width: 805px; margin: 0 auto; }
.gmiss-title img { display: block; width: 100%; }

.steps { --bs-gutter-x: 19px; --bs-gutter-y: 15px; margin-top: 21px !important; max-width: 854px; margin-left: auto !important; margin-right: auto !important; }
.steps img { display: block; width: 100%; }

.gmiss-video {
  position: relative; display: block; max-width: 811px; margin: 29px auto 0;
}
.gmiss-video img { display: block; width: 100%; }
.play-btn {
  position: absolute; left: 50%; top: 42%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%; background: rgba(255,255,255,.28); border: 2px solid rgba(255,255,255,.85);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform .25s ease, background .25s ease;
}
.play-btn::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -14px 0 0 -8px;
  border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff;
}
.gmiss-video:hover .play-btn { transform: scale(1.08); background: rgba(255,255,255,.4); }

/* =========================================================
   5. CƠ SỞ VẬT CHẤT (cao 1148) – ảnh 1075×709 ở y+368
   Mũi tên 110×110 cách ảnh 19px mỗi bên
   ========================================================= */
.sec-facility {
  min-height: 1148px;
  padding: 368px 0 71px;
  background-color: #EFE3D1;
  background-image: url("../imgs/bg3.png");
}
.facility-slider { max-width: 1333px; margin: 0 auto; }
.facility-row { --bs-gutter-x: 38px; }

/* Nút mũi tên dùng chung (1 ảnh, nút "trước" lật 180°) */
.arrow {
  display: block; width: 110px; padding: 0; border: 0; background: none;
  transition: transform .2s ease, opacity .2s ease;
}
.arrow .ph { width: 100%; aspect-ratio: 1; border-radius: 50%; }
.arrow .ph::before { font-size: 40px; }
.arrow-prev .ph > img { transform: rotate(180deg); }
.arrow:hover { transform: scale(1.06); }

/* =========================================================
   6. ĐỘI NGŨ BÁC SĨ (cao 1022) – ảnh 1583×762 ở y+242
   ========================================================= */
.sec-doctor {
  min-height: 1022px;
  padding: 242px 0 18px;
  background-color: #F4EADB;
  background-image: url("../imgs/bg4.png");
}
.sec-doctor .ratio-doctor { max-width: 1583px; margin: 0 auto; }

/* =========================================================
   7. HIỆU QUẢ KHÁCH HÀNG (cao 1049) – slide 1846×966 ở y+114
   Mũi tên 110×110 nằm trên 2 mép slide
   ========================================================= */
.sec-result {
  position: relative; z-index: 1;
  min-height: 1049px;
  padding: 114px 0 0;
  margin-bottom: 0;               /* Figma: slide tràn 31px xuống section đăng ký */
  /*background-color: #F1E5D3;*/
  background-image: url("../imgs/bg5.png");
  /*background-size: 100% 1049px;*/
  background-size:cover;
}
.result-slider { position: relative; max-width: 1846px; margin: 0 auto; }
.arrow-over { position: absolute; top: 47%; transform: translateY(-50%); z-index: 2; }
.arrow-over.arrow-prev { left: 0; }
.arrow-over.arrow-next { right: 0; }
.arrow-over:hover { transform: translateY(-50%) scale(1.06); }

/* =========================================================
   8. ĐĂNG KÝ TƯ VẤN (cao 724): cover 1287 + cột form 633
   Khung form 579×579, ô nhập 406×50 từ y+212, cách 21px, nút 248×41
   (dùng cqw để toàn bộ form co giãn theo bề rộng khung)
   ========================================================= */
.sec-register { overflow: hidden; }
.register-cover { height: 724px; }
.register-cover > img { height: 100%; object-fit: cover; }
.register-side {
  min-height: 724px; padding: 24px 16px;
  background-color: var(--m-brown);
  background-image: url("../imgs/bg-m6.png");
}

.consult-form {
  container-type: inline-size;
  width: 100%; max-width: 579px; aspect-ratio: 1;
  padding-top: 36.6%;                                         /* 212 / 579 */
  background: var(--m-cream) url("../imgs/frame-dien-ten.png") center / cover no-repeat;
  border-radius: 6px;
}
.consult-form .field { width: 70.12%; margin-bottom: 3.63cqw; } /* 406/579, 21/579 */
.consult-form .form-control {
  height: 8.64cqw;                                            /* 50 / 579 */
  padding: 0 3.28cqw;                                         /* 19 / 579 */
  border: 1px solid var(--m-gold); border-radius: 4px;
  background: #fff; color: var(--m-text);
  font-size: 3.45cqw;                                         /* ≈ 20px */
}
.consult-form .form-control::placeholder { color: #9C8466; }
.consult-form .form-control:focus { border-color: var(--m-brown-2); box-shadow: 0 0 0 3px rgba(201,164,106,.25); }
.consult-form.was-validated .form-control:invalid { border-color: #C0392B; }
.consult-form.was-validated .form-control:valid   { border-color: var(--m-gold); background-image: none; }
.btn-receive {
  width: 42.8cqw; height: 7.06cqw; margin-top: 8.6cqw;        /* 248×41, cách ô cuối 71 → 50 sau margin field */
  padding: 0; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #E9CC97 0%, var(--m-gold) 50%, #A9824A 100%);
  color: var(--m-brown);
  font-family: var(--font-head); font-weight: 700; font-size: 4.66cqw; letter-spacing: .04em; text-transform: uppercase;
}
.btn-receive:hover { color: var(--m-brown); filter: brightness(1.06); }
.form-msg { margin-top: 3cqw; text-align: center; font-size: 3.2cqw; color: var(--m-brown); }

/* =========================================================
   POPUP (Frame Popup 579×579)
   ========================================================= */
.popup-dialog { max-width: 579px; }
.popup-content { position: relative; background: none; border: 0; }
.popup-content .consult-form { background-image: url("../imgs/frame-popup.png"); }
.popup-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 28px; height: 28px; border-radius: 50%; background-color: rgba(255,255,255,.85); opacity: 1;
}
.video-ratio { --bs-aspect-ratio: calc(1114 / 811 * 100%); max-height: 86vh; }

/* =========================================================
   9. FOOTER (cao 373)
   ========================================================= */
.site-footer {
  min-height: 373px;
  padding: 34px 0 40px;
  background: #fff;
  color: #000;
}
.f-tit{ font-size: 34px; line-height: 40px; }
.footer-logo { width: 422px; max-width: 100%; aspect-ratio: 422 / 95; }
.footer-addr { margin-top: 29px !important; }
.footer-gps { width: 28px; height: 40px; flex: 0 0 28px; margin-left: 16px; }
.footer-gps::before { font-size: 9px; }
.footer-city { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; }
.footer-addr p { margin-top: 20px !important; font-size: 20px; line-height: 25px; }
.footer-phone { width: 253px; aspect-ratio: 253 / 42; margin-left: 16px; }
.footer-title {
  margin: 26px 0 47px;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
}
.site-footer p { font-size: 22px; line-height: 33px; }
.site-footer .col-lg-6 p + p { margin-top: 45px; }

/* =========================================================
   10. THANH LIÊN HỆ NỔI (99×323)
   ========================================================= */
.float-contact {
  position: fixed; right: 16px; top: 50%; z-index: 1020;
  transform: translateY(-50%);
  width: 69px; padding: 25px 0 22px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--m-gold-light) 100%);
  border: 1px solid var(--m-gold); border-radius: 50px;
  box-shadow: 0 10px 30px -10px rgba(74,44,23,.45);
}
.fc-item { display: block; width: 39px; transition: transform .2s ease; }
.fc-item:hover { transform: scale(1.08); }
.fc-item .ph { width: 100%; aspect-ratio: 1; border-radius: 12px; }
.fc-item .ph::before { font-size: 11px; }
.fc-item .ph > img { object-fit: contain; }
.fc-divider { width: 45px; height: 2px; margin: 6px 0; background: var(--m-gold); }

/* =========================================================
   RESPONSIVE
   Dưới 1920px: các khoảng cách phụ thuộc ảnh nền co theo vw
   ========================================================= */
@media (max-width: 1919.98px) {
  .sec-gmiss    { min-height: 62.34vw; }
  .sec-facility { min-height: 59.79vw; padding-top: 19.17vw; padding-bottom: 3.7vw; }
  .sec-doctor   { min-height: 53.23vw; padding-top: 12.6vw; }
  .sec-result   { min-height: 54.64vw; padding-top: 5.94vw; background-size: 100% 54.64vw; margin-bottom: -1.6vw; }
  .register-cover, .register-side { height: auto; min-height: 37.7vw; }
  .register-cover { aspect-ratio: 1287 / 724; }
  .arrow { width: clamp(44px, 5.73vw, 110px); }
  .arrow .ph::before { font-size: clamp(20px, 2vw, 40px); }
  .facility-row { --bs-gutter-x: clamp(16px, 2vw, 38px); }
}

@media (max-width: 1599.98px) {
  .intro-text { font-size: 22px; line-height: 36px; }
  .site-footer p { font-size: 18px; line-height: 28px; }
  .footer-addr p { font-size: 18px; }
}

/* Tablet: GMISS xếp chồng, ảnh video xuống dưới */
@media (max-width: 1199.98px) {
  .sec-intro { min-height: 0; padding: 56px 0 40px; }
  .sec-gmiss { padding-top: 32px; }
  .gmiss-video { margin-top: 0; }
  .float-contact { transform: translateY(-50%) scale(.8); transform-origin: right center; right: 10px; }
}

/* Đăng ký: cover + form xếp chồng */
@media (max-width: 991.98px) {
  .register-cover { min-height: 0; }
  .register-side { min-height: 0; padding: 40px 16px; }
  .site-footer { padding: 40px 0; }
  .footer-title { margin: 8px 0 20px; }
  .site-footer .col-lg-6 p + p { margin-top: 16px; }
}

/* Mobile */
@media (max-width: 767.98px) {
  .wrap, .wrap-wide { padding-left: 16px; padding-right: 16px; }
  .sec-intro { padding: 44px 0 32px; }
  .intro-text { font-size: 16px; line-height: 26px; }
  .sec-facility { padding-top: 22vw; padding-bottom: 32px; min-height: 0; }
  .sec-doctor   { padding-top: 16vw; padding-bottom: 24px; min-height: 0; }
  .sec-result   { padding-top: 10vw; padding-bottom: 24px; min-height: 0; margin-bottom: 0; background-size: cover; }
  .arrow { width: 40px; }                               /* Figma mobile: 40×40 */
  .site-footer p, .footer-addr p { font-size: 15px; line-height: 23px; }
  .footer-city, .footer-title { font-size: 22px; line-height: 24px; }
  .footer-logo { width: 260px; }
  .footer-phone { width: 200px; }
  .float-contact { top: auto; bottom: 16px; transform: scale(.62); transform-origin: right bottom; right: 8px; }
}