/* ==========================================================================
   Landing "Mẹ Đẹp – Nhà An Yên" (beauty-campaign.php) — theo artboard MeDep-NhaAnYen.dc.html
   Bảng màu riêng của chiến dịch (hồng đất) khai báo trên .md; phần còn lại dùng token chung.
   Trên trang này nút chính là .md-btn (hồng đất) thay cho amber → ẩn nút amber của header
   để mỗi màn hình chỉ còn 1 nút chính.
   ========================================================================== */

.md {
  --md-rose: #8C463B;        /* chữ trắng trên nền này: 7,2:1 */
  --md-rose-dark: #6E352C;
  --md-blush: #F3DCCF;
  --md-petal: #FBF1EA;
  --md-line: #EBD9C8;
  --md-field: #E3CDB0;
  --md-cocoa: #4A2E29;
  --md-subnav-h: 56px;
}
.md [id] { scroll-margin-top: calc(var(--header-h) + var(--md-subnav-h) + 16px); }
.md :is(.md-hero, .md-steps, .md-register, .md-conditions) :is(p, li, label, span) a:not(.btn), .md .link-arrow { color: var(--md-rose); }
.md :is(.md-hero, .md-steps, .md-register, .md-conditions) :is(p, li, label, span) a:not(.btn):hover, .md .link-arrow:hover { color: var(--md-rose-dark); }
.md .md-hero .breadcrumb li a:not(.btn) { color: var(--muted); }
.md .md-hero .breadcrumb li a:not(.btn):hover { color: var(--md-rose); }
.md .h2 { font-weight: 400; }
.md .accent { color: var(--md-rose); }
.md .eyebrow, .md-eyebrow { color: var(--md-rose); letter-spacing: .18em; }
.md-eyebrow::before { width: 40px; }
.md :focus-visible { outline-color: var(--md-rose); }

/* Header chung: ẩn nút amber "Đặt lịch khám" (dẫn sang trang Liên hệ) — CTA của landing nằm ở thanh neo */
.page-template-beauty-campaign .site-header .header-actions > .btn { display: none; }

/* Nút chính của landing */
.md-btn { background: var(--md-rose); color: var(--white); border-color: var(--md-rose); }
.md-btn:hover, .md-btn:focus-visible { background: var(--md-rose-dark); border-color: var(--md-rose-dark); color: var(--white); }
.md .btn--lg { min-height: 54px; padding: 16px 30px; }

/* ---------- Thanh neo dính dưới header ---------- */
.md-subnav { position: sticky; top: var(--header-h); z-index: 45; background: rgba(251, 247, 242, .97); border-bottom: 1px solid var(--md-line); }
.md-subnav__inner { max-width: var(--container); margin: 0 auto; padding: 6px var(--gutter); min-height: var(--md-subnav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.md-subnav__links { display: flex; gap: 4px; margin: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.md-subnav__links::-webkit-scrollbar { display: none; }
.md-subnav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; white-space: nowrap; }
.md-subnav .md-subnav__links a { color: var(--ink); text-decoration: none; }
.md-subnav .md-subnav__links a:hover { background: var(--md-petal); color: var(--md-rose); }
.md-subnav .md-subnav__links a[aria-current="true"] { color: var(--md-rose); background: var(--md-petal); }
.md-subnav__actions { display: flex; align-items: center; gap: 20px; flex: none; }
.md .md-subnav__phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--ink); }
/* Header chung đã có hotline ở ≥1080px → thanh neo chỉ hiện hotline khi header ẩn số */
@media (min-width: 1081px) { .md .md-subnav__phone { display: none; } }
@media (max-width: 760px) {
  .md { --md-subnav-h: 52px; }
  .md-subnav__inner { padding: 4px 8px; }
  .md-subnav__links a { padding: 0 12px; font-size: 14px; }
  .md-subnav__actions { display: none; } /* mobile: CTA ở thanh liên hệ cố định cuối màn hình */
}

/* ---------- Hero ---------- */
.md-hero { background: var(--md-petal); }
.md-hero__inner { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-end; padding-top: 56px; }
.md-hero__copy { flex: 1.1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-bottom: 88px; }
.md-hero__copy .breadcrumb { margin-bottom: -4px; }
.md-hero__kicker { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; color: var(--md-rose); margin-bottom: -10px; }
.md-hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.8vw, 66px); line-height: 1.12; letter-spacing: -.015em; }
.md-hero__lead { max-width: 540px; }
.md-hero__gift { display: flex; gap: 16px; align-items: center; background: var(--white); border: 1px solid var(--md-line); border-radius: var(--radius-media); padding: 16px 20px; max-width: 520px; }
.md-hero__gift-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--md-blush); color: var(--md-rose); display: flex; align-items: center; justify-content: center; }
.md-hero__gift-text { display: flex; flex-direction: column; line-height: 1.4; }
.md-hero__gift-text > span { font-size: 14px; color: var(--muted); }
.md-hero__gift-text > strong { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--ink); }
.md-hero__period { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.md-hero__period .ic { color: var(--md-rose); }
.md-hero__media { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.md-hero__media img { width: 100%; max-width: 500px; }
.md-ended { background: var(--white); border: 1px solid var(--md-line); }
.md-ended .ic { color: var(--md-rose); }
@media (max-width: 760px) {
  .md-hero__inner { padding-top: 32px; gap: 32px; }
  .md-hero__copy { padding-bottom: 0; gap: 20px; }
  .md-hero__media img { max-width: 340px; }
  .md-hero__gift-text > strong { font-size: 22px; }
  .md-hero__ctas .btn { flex: 1 1 100%; }
}

/* ---------- Lời gửi mẹ ---------- */
.md-letter__inner { max-width: 880px; padding-block: 120px; display: flex; flex-direction: column; gap: 28px; align-items: center; text-align: center; }
.md-letter__mark { fill: var(--champagne); }
.md-letter .md-eyebrow { font-family: var(--sans); font-size: 12px; }
.md-letter__quote { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.5; }
.md-letter__text { max-width: 640px; }
.md-letter__sign { font-family: var(--serif); font-size: 18px; color: var(--md-rose); }
@media (max-width: 760px) { .md-letter__inner { padding-block: 72px; gap: 22px; } }

/* ---------- Những thay đổi trên da ---------- */
.md-concerns.section--white { border-color: var(--md-line); }
.md-head { margin-bottom: 44px; }
.md-head > div { gap: 14px; }
.md-head__aside { max-width: 420px; font-size: 16px; }
.md-concerns__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px 24px; margin: 0; }
.md-concern { display: flex; flex-direction: column; gap: 12px; height: 100%; color: var(--ink); }
.md-concern:hover { color: var(--ink); }
.md-concern img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--sand-2); margin-bottom: 2px; transition: transform .3s; }
.md-concern:hover img { transform: translateY(-4px); }
.md-concern__title { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.3; }
.md-concern__text { font-size: 15px; color: var(--muted); flex-grow: 1; }
.md-concern__more { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 15px; font-weight: 600; color: var(--md-rose); }
.md-concern:hover .md-concern__more .ic { transform: translateX(3px); }
.md-concern__more .ic { transition: transform .15s; }
@media (max-width: 560px) { .md-concerns__grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .md-concern__title { font-size: 18px; } .md-concern__text { font-size: 14px; } }
@media (max-width: 380px) { .md-concerns__grid { grid-template-columns: 1fr; } }

/* ---------- Quà tặng (nền tối) ---------- */
.md-gift__inner { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.md-gift__art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.md-gift__ring { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--espresso-line); display: flex; align-items: center; justify-content: center; }
.md-gift__ring::before { content: ""; position: absolute; inset: 28px; border-radius: 50%; background: var(--md-cocoa); }
.md-gift__ring svg { position: relative; width: 60%; }
.md-gift__copy { flex: 1.2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.md-gift .md-eyebrow { color: var(--champagne); }
.md-gift__value { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; border-block: 1px solid var(--espresso-rule); padding: 22px 0; }
.md-gift__value strong { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 76px); line-height: 1; color: var(--champagne); }
.md-gift__value span { font-size: 15px; color: var(--on-dark-muted); }
.md-gift__list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.md-gift__list li { display: flex; gap: 12px; }
.md-gift__list .ic { color: var(--champagne); margin-top: 4px; }
.md-gift__fine { font-size: 13px; color: var(--on-dark-muted); }
@media (max-width: 760px) { .md-gift__inner { gap: 40px; } .md-gift__ring { max-width: 280px; } }

/* ---------- Cách tham gia ---------- */
.md-steps__head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin-bottom: 48px; }
.md-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 0; }
.md-step { background: var(--white); border: 1px solid var(--md-line); border-radius: 24px; padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; }
.md-step__num { width: 56px; height: 56px; border-radius: 50%; background: var(--md-blush); color: var(--md-rose); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; }
.md-step__num--last { background: var(--md-rose); color: var(--white); }
.md-step__title { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.25; }
.md-step__text { font-size: 15px; color: var(--muted); }
@media (max-width: 760px) { .md-step { padding: 28px 24px; } }

/* ---------- Bác sĩ + form ---------- */
.md-register { background: var(--md-blush); padding-block: 104px; }
.md-register__inner { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.md-register__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.md-register__copy .h2 { font-size: clamp(30px, 3.6vw, 46px); }
.md-register__form { flex: 1 1 440px; min-width: 0; }
.md-doctor { display: flex; gap: 18px; align-items: center; }
.md-doctor img { flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; border: 3px solid var(--white); background: var(--sand); }
.md-doctor__text { display: flex; flex-direction: column; line-height: 1.45; }
.md-doctor__text strong { font-weight: 600; font-size: 18px; }
.md-doctor__text span { font-size: 15px; color: var(--muted); }
.md-checks { display: flex; flex-direction: column; gap: 12px; margin: 0; font-size: 16px; }
.md-checks li { display: flex; gap: 12px; }
.md-checks .ic { color: var(--md-rose); margin-top: 3px; }
.md-register .link-arrow { align-self: flex-start; }

.md-form-card, .md-register .booking-form.card { background: var(--white); border: 0; border-radius: 28px; padding: 40px; }
.md-form { gap: 18px; }
.md-form__head { display: flex; flex-direction: column; gap: 6px; }
.md-form__title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; }
.md-form__notice { background: var(--md-petal); border-radius: 10px; padding: 10px 14px; margin-top: 6px; }
.md-form__grid { gap: 18px 16px; }
.md-form .field { font-size: 14px; }
.md-form .input, .md-form .select, .md-form .textarea { border-color: var(--md-field); border-radius: 12px; }
.md-form .input, .md-form .select { height: 50px; }
.md-form .input:focus, .md-form .select:focus, .md-form .textarea:focus { border-color: var(--md-rose); box-shadow: 0 0 0 3px rgba(140, 70, 59, .16); }
.md-form .input[aria-invalid="true"], .md-form .select[aria-invalid="true"] { border-color: var(--danger); }
.md-form__hint { font-weight: 400; }
.md-form__slots { border: 0; padding: 0; margin: 0; min-width: 0; }
.md-form__slots legend { padding: 0; margin-bottom: 8px; }
.md-form .slot input:checked + span { background: var(--md-rose); border-color: var(--md-rose); }
.md-form .slot input:focus-visible + span { outline-color: var(--md-rose); }
.md-form .slot span { border-color: var(--md-field); }
.md-check { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 15px; font-weight: 400; cursor: pointer; }
.md-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--md-rose); }
.md-check--consent { align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--muted); }
.md-check--consent input { margin-top: 2px; }
.md-check--consent input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.md-form .field__error:not([hidden]) { display: block; }
.md-form__privacy { display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; }
.md-success { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.md-success[hidden] { display: none; }
.md-success:focus { outline: none; }
.md-success__icon { width: 56px; height: 56px; border-radius: 50%; background: #EAF4EE; color: var(--success); display: flex; align-items: center; justify-content: center; }
.md-success__code { font-size: 15px; }
.md-success__code strong { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .04em; }
@media (max-width: 760px) {
  .md-register { padding-block: 72px; }
  .md-form-card, .md-register .booking-form.card { padding: 24px 20px; border-radius: 20px; }
  .md-form__title { font-size: 26px; }
}

/* ---------- Điều kiện ---------- */
.md-conditions__inner { max-width: 880px; display: flex; flex-direction: column; gap: 20px; }
.md-conditions__title { text-align: center; font-size: clamp(30px, 3.2vw, 40px); margin-bottom: 8px; }
.md .faq, .md .faq details { border-color: var(--md-line); }
.md .faq details > div ul { margin: 0; padding-left: 1.2em; }
.md-conditions__fine { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }

/* ---------- CTA cuối ---------- */
.md-closing { background: var(--md-petal); border-top: 1px solid var(--md-line); }
.md-closing__inner { max-width: 1000px; padding-block: 96px; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.md-closing__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.1; color: var(--md-rose); }
.md-closing__text { font-size: 18px; color: var(--muted); max-width: 560px; }
.md-closing__ctas { justify-content: center; }
@media (max-width: 760px) { .md-closing__inner { padding-block: 72px; } .md-closing__ctas .btn { flex: 1 1 100%; } }
.md-form[hidden] { display: none; }