/* =========================================================
   YD DISTRIBUTION — Page Hero (global) · โทนน้ำเงินเข้ม
   หัวเพจมาตรฐานเดียวทั้งระบบ — ดีไซน์ชุดเดียวกับ .yd-bhero (ท้าย app.css)
   พื้น var(--yd-blue-grad) · เงา var(--yd-blue-shadow) · ตัวอักษร/ไอคอนขาว
   ลายน้ำ = วงแหวนขาวจาง ๆ มุมขวาล่าง (วาดเป็น background ไม่มี sheen/glow)

   โครง:
   ┌─ .yd-hero (น้ำเงินไล่สี) ──────────────────────────────────────┐
   │ [badge กระจก]  eyebrow (ขาว 75%)            [ ปุ่มขาว ] [ ปุ่มกระจก ] │
   │                Title (ขาว)                                       │
   │                คำโปรย (ขาว 75%)                                  │
   │                (chips กระจก) (ป้ายสถานะ = พื้นขาวตัวน้ำเงิน)       │
   └──────────────────────────────────────────────────────────────────┘

   ของข้างในที่ถูกปรับให้อ่านออกบนพื้นน้ำเงิน:
   - ปุ่มหลัก (.btn-brand-yd / .btn-purple / .btn-primary / .btn.active) → พื้นขาว ตัวน้ำเงิน
   - ปุ่มรอง (.btn-outline-yd / outline-* / light / ปุ่ม .btn อื่น ๆ) → กระจก ตัวขาว
   - ปุ่มอันตราย (.btn-outline-danger) → แดงอ่อนบนกระจก · .btn-danger คงพื้นแดง
   - chip → กระจก · .badge / ป้ายสถานะ yd_ui_badge_html() → พื้นขาว
   - ช่องกรอก / select / dropdown (.yd-dd) / segmented (.mkt-seg) / ช่องวันที่
     → คงเป็น "ตัวควบคุมสีขาว ตัวอักษรเข้ม" วางบนพื้นน้ำเงิน
   - ไอคอนทุกตัวบนพื้นน้ำเงิน = ขาว (ชนะ `.bi { color: var(--primary) }`,
     `.card-yd i.bi`, `text-info` ฯลฯ ที่เป็น !important)
   ไฟล์นี้โหลดหลัง CSS ของหน้า → selector ขึ้นต้นด้วย `html:root` ให้ชนะ
   กฎของหน้าที่ specificity เท่ากัน

   ขอบเขต: คุมเฉพาะ .yd-hero — ตระกูล hero อื่น (.yd-admin-hero, .acc-hero,
   .sp-hero …) คุมที่ yd_hero_dark.css
   ========================================================= */

:root {
  --yd-hero-radius: 24px;
  --yd-hero-pad: 20px 22px;
  --yd-hero-badge: 54px;
  /* วงแหวนลายน้ำ (ชั้นบนสุด) + พื้นน้ำเงินไล่สีกลางของระบบ */
  --yd-hero-ring: radial-gradient(
    circle at calc(100% - 30px) calc(100% + 70px),
    transparent 0 132px,
    rgba(255, 255, 255, 0.05) 133px 170px,
    transparent 171px
  );
  --yd-hero-glass-hover: rgba(255, 255, 255, 0.2);
  --yd-hero-focus: rgba(147, 197, 253, 0.85);
}

/* ---------------------------------------------------------
   1) คอมโพเนนต์หลัก
   --------------------------------------------------------- */
.yd-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: var(--yd-hero-pad);
  margin-bottom: 16px;
  border: 0;
  border-radius: var(--yd-hero-radius);
  background: var(--yd-hero-ring), var(--yd-blue-grad);
  box-shadow: var(--yd-blue-shadow);
  color: #fff;
}
/* มี dropdown ในหัวเพจ → ห้ามตัดเมนูที่เปิดลงมา (ลายน้ำเป็น background ไม่ต้องพึ่ง overflow) */
.yd-hero:has(.yd-dd, .dropdown-menu) {
  overflow: visible;
}
.yd-hero > * {
  position: relative;
  z-index: 1;
}

/* กล่องหัวข้อดันตัวเองชิดซ้าย → อะไรที่เหลือ (ปุ่ม) จึงไปกองขวาเอง
   ใช้วิธีนี้แทน justify-content:space-between เพราะมี badge เป็นลูกคนแรก
   ถ้าใช้ space-between หัวข้อจะลอยไปกลางการ์ด */
.yd-hero__head {
  margin-right: auto;
  min-width: 0;
}

/* ไอคอนกล่องมน — กระจกบนพื้นน้ำเงิน ไอคอนขาว */
.yd-hero__badge {
  width: var(--yd-hero-badge);
  height: var(--yd-hero-badge);
  min-width: var(--yd-hero-badge);
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--yd-glass-bg);
  border: 1px solid var(--yd-glass-border);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ---------- ตัวอักษร ---------- */
html:root .yd-hero .yd-hero__title,
html:root .yd-hero h1,
html:root .yd-hero h2,
html:root .yd-hero h3,
html:root .yd-hero h4,
html:root .yd-hero h5 {
  color: #fff;
}
.yd-hero__title {
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 0;
}
html:root .yd-hero .small-muted,
html:root .yd-hero .yd-hero__sub,
html:root .yd-hero .text-muted,
html:root .yd-hero .text-secondary,
html:root .yd-hero .text-body-secondary {
  color: rgba(255, 255, 255, 0.75) !important;
}
/* eyebrow ทุกแบบ (.mkt-eyebrow · .ps-eyebrow · .yd-st-eyebrow · .yd-pushadm__eyebrow …) */
html:root .yd-hero [class*="eyebrow"] {
  color: rgba(255, 255, 255, 0.75) !important;
  opacity: 1;
}
html:root .yd-hero .small-muted b,
html:root .yd-hero .small-muted strong,
html:root .yd-hero .yd-hero__sub b,
html:root .yd-hero .yd-hero__sub strong {
  color: #fff;
}
/* utility สีที่หน้าใส่มาเอง (Bootstrap ตั้ง !important) */
html:root .yd-hero .text-primary,
html:root .yd-hero .text-info,
html:root .yd-hero .text-brand,
html:root .yd-hero .text-brand-yd,
html:root .yd-hero .text-dark,
html:root .yd-hero .text-body,
html:root .yd-hero .text-success {
  color: #fff !important;
}
html:root .yd-hero .text-danger { color: #fecaca !important; }
html:root .yd-hero .text-warning { color: #fde68a !important; }
html:root .yd-hero code {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 0.05em 0.35em;
}

/* ลิงก์ข้อความ (ไม่ใช่ปุ่ม) = ขาว */
html:root .yd-hero .yd-hero__head a:not(.btn):not(.badge):not(.ana-pf-tab):not(.yd-hero__chip) {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
html:root .yd-hero .yd-hero__head a:not(.btn):not(.badge):not(.ana-pf-tab):not(.yd-hero__chip):hover {
  color: #fff;
  text-decoration: underline;
}

/* ---------- ไอคอน: ขาวเสมอบนพื้นน้ำเงิน ---------- */
html:root .yd-hero i.bi,
html:root .yd-hero .bi {
  color: #fff;
}
html:root .yd-hero .yd-hero__badge i,
html:root .yd-hero .yd-hero__badge .bi {
  color: #fff !important;
}

/* ---------- chip เม็ดยา = กระจก ---------- */
.yd-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.92rem;
  font-weight: 600;
}
html:root .yd-hero .yd-hero__chip {
  color: #fff;
  background: var(--yd-glass-bg);
  border: 1px solid var(--yd-glass-border);
}
/* chip เตือน (marketing.css ใส่สีส้มเข้ม !important ไว้สำหรับพื้นขาว) → ส้มอ่อนบนกระจก */
html:root .yd-hero .yd-hero__chip.mkt-chip--warn,
html:root .yd-hero .mkt-chip--warn {
  color: #fde68a !important;
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(253, 230, 138, 0.45) !important;
}
html:root .yd-hero .mkt-chip--warn i,
html:root .yd-hero .mkt-chip--warn .bi {
  color: inherit !important;
}
/* แท็บแพลตฟอร์ม (analytics dashboard) ที่ถูกวางในหัวเพจ → ขอบขาวให้แยกจากพื้น */
html:root .yd-hero .ana-pf-tab {
  border-color: rgba(255, 255, 255, 0.55);
}

/* ---------- ป้าย / badge = พื้นขาว ตัวน้ำเงิน ---------- */
html:root .yd-hero .badge:not(.bg-danger):not(.bg-warning) {
  background: #fff !important;
  color: var(--brand) !important;
  border: 1px solid #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
/* .yd-badge (V68.7.8.276) = pill ขาว · ตัวหนังสือ + วงกลมไอคอนยังเป็นสีประจำโทน (ไอคอนขาวจาก app.css) */
html:root .yd-hero .yd-badge {
  --ydb-bg: #fff;
  --ydb-bd: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
html:root .yd-hero .badge.bg-danger,
html:root .yd-hero .badge.bg-warning {
  border: 1px solid rgba(255, 255, 255, 0.7);
}
html:root .yd-hero .badge i,
html:root .yd-hero .badge .bi {
  color: inherit !important;
}

/* ---------------------------------------------------------
   2) ปุ่มในหัวเพจ
   --------------------------------------------------------- */
/* ปุ่มทั่วไป (.btn-outline-yd / outline-primary / outline-secondary / light / .btn อื่น ๆ) = กระจก */
html:root .yd-hero .btn {
  color: #fff;
  background: var(--yd-glass-bg);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: none;
}
html:root .yd-hero .btn:hover,
html:root .yd-hero .btn:active {
  color: #fff;
  background: var(--yd-hero-glass-hover);
  border-color: rgba(255, 255, 255, 0.42);
}
/* ไอคอนในปุ่ม = สีตัวอักษรของปุ่ม (ยกเว้น dropdown ที่ระบายสีไอคอนตามตัวเลือกเอง) */
html:root .yd-hero .btn:not(.yd-dd-btn) i,
html:root .yd-hero .btn:not(.yd-dd-btn) .bi,
html:root .yd-hero .btn:not(.yd-dd-btn) svg {
  color: inherit !important;
}

/* ปุ่มหลัก = พื้นขาว ตัวน้ำเงิน (app.css ใส่ !important ทุก state ของ .btn-brand-yd) */
html:root .yd-hero .btn.btn-brand-yd,
html:root .yd-hero .btn.btn-purple,
html:root .yd-hero .btn.btn-primary,
html:root .yd-hero .btn.active:not(.yd-dd-btn) {
  color: var(--brand) !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}
html:root .yd-hero .btn.btn-brand-yd:hover,
html:root .yd-hero .btn.btn-brand-yd:focus,
html:root .yd-hero .btn.btn-brand-yd:active,
html:root .yd-hero .btn.btn-purple:hover,
html:root .yd-hero .btn.btn-purple:active,
html:root .yd-hero .btn.btn-primary:hover,
html:root .yd-hero .btn.btn-primary:active,
html:root .yd-hero .btn.active:not(.yd-dd-btn):hover {
  color: var(--brand) !important;
  background: #eaf2ff !important;
  border-color: #eaf2ff !important;
}
html:root .yd-hero .btn-brand-yd *:not(.badge),
html:root .yd-hero .btn-purple *:not(.badge) {
  color: inherit !important;
}
html:root .yd-hero .btn-brand-yd svg,
html:root .yd-hero .btn-brand-yd svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ปุ่มอันตราย */
html:root .yd-hero .btn.btn-outline-danger {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(254, 202, 202, 0.5);
}
html:root .yd-hero .btn.btn-outline-danger:hover,
html:root .yd-hero .btn.btn-outline-danger:active {
  color: #fff;
  background: rgba(239, 68, 68, 0.34);
  border-color: rgba(254, 202, 202, 0.7);
}
html:root .yd-hero .btn.btn-danger,
html:root .yd-hero .btn.btn-danger-yd {
  color: #fff;
  background: #ef4444;
  border-color: rgba(255, 255, 255, 0.3);
}
html:root .yd-hero .btn.btn-danger:hover,
html:root .yd-hero .btn.btn-danger-yd:hover {
  color: #fff;
  background: #dc2626;
}

/* focus คีย์บอร์ด */
html:root .yd-hero .btn:focus-visible,
html:root .yd-hero .mkt-seg__btn:focus-visible,
html:root .yd-hero .yd-hero__chip:focus-visible,
html:root .yd-hero a:focus-visible {
  outline: 3px solid var(--yd-hero-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------------------------------------------------------
   3) ตัวควบคุมในหัวเพจ = ขาว ตัวอักษรเข้ม (วางบนพื้นน้ำเงิน)
   --------------------------------------------------------- */
html:root .yd-hero .form-control,
html:root .yd-hero .form-select {
  color: var(--text);
  background-color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}
html:root .yd-hero .form-control::placeholder { color: var(--muted); }
html:root .yd-hero .form-control:focus,
html:root .yd-hero .form-select:focus {
  border-color: #fff;
  box-shadow: 0 0 0 0.22rem rgba(147, 197, 253, 0.55);
}

/* select ที่ app.js แปลงเป็น .yd-dd (ปุ่มเป็น .btn-outline-yd) → คืนเป็นปุ่มขาว */
html:root .yd-hero .btn.yd-dd-btn {
  color: var(--text);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
html:root .yd-hero .btn.yd-dd-btn:hover,
html:root .yd-hero .btn.yd-dd-btn:active,
html:root .yd-hero .yd-dd.open .btn.yd-dd-btn {
  color: var(--text);
  background: #f1f5f9;
  border-color: #fff;
}
html:root .yd-hero .yd-dd-btn i.bi:not([style*="color"]),
html:root .yd-hero .yd-dd-btn .bi:not([style*="color"]) {
  color: var(--brand);
}
html:root .yd-hero .yd-dd-menu {
  color: var(--text);
}

/* segmented (.mkt-seg) = แคปซูลขาว · ปุ่มที่เลือก = น้ำเงิน */
html:root .yd-hero .mkt-seg {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
html:root .yd-hero .mkt-seg__btn i,
html:root .yd-hero .mkt-seg__btn .bi {
  color: inherit;
}

/* ช่องเลือกวันที่ (.mkt-weeknav__date) = ขาว ไอคอนน้ำเงิน · ปุ่ม ‹ › ข้าง ๆ เป็นกระจก */
html:root .yd-hero .mkt-weeknav__date {
  color: var(--text);
  background: #fff;
  border-color: rgba(255, 255, 255, 0.85);
}
html:root .yd-hero .mkt-weeknav__date i,
html:root .yd-hero .mkt-weeknav__date .bi {
  color: var(--brand);
}

/* ---------------------------------------------------------
   4) หัวเพจที่อยู่ "ในการ์ด" อยู่แล้ว (wizard ลงเพลง, หน้าสมัคร, onboarding)
   ยังเป็นน้ำเงินเข้ม แต่ไม่ใส่เงาใหญ่ (ไม่งั้นการ์ดซ้อนการ์ดดูหนา)
   --------------------------------------------------------- */
html:root .yd-card .yd-hero,
html:root .card-yd .yd-hero {
  border: 0;
  background: var(--yd-hero-ring), var(--yd-blue-grad);
  box-shadow: none;
}

@media (max-width: 767.98px) {
  .yd-hero {
    padding: 14px;
    gap: 12px !important;
    border-radius: 18px;
  }
  .yd-hero__badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 14px;
    font-size: 18px;
  }
  /* ปุ่มลงมาเต็มแถวเอง ไม่ต้องเบียดกับหัวข้อ */
  .yd-hero__head {
    margin-right: 0;
    flex: 1 1 200px;
  }
  .yd-hero > :last-child:not(.yd-hero__head):not(.yd-hero__badge) {
    width: 100%;
  }
}

/* ---------------------------------------------------------
   หมายเหตุ (ตั้งใจไม่ทำ)
   ไฟล์นี้คุมเฉพาะ .yd-hero — hero ตระกูลอื่น (.yd-admin-hero, .acc-hero,
   .sp-hero, .aff-hero …) ทำโทนน้ำเงินที่ yd_hero_dark.css
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   5) hero ที่มี "แผงควบคุม" ด้านขวา (.yd-hero--side)
   ใช้กับ .ana-heroside (Analytics / Charts / Stats Card) และ .mkt-heroside
   (New Music Weekly / Promo Kit / ffmpeg)

   ของเดิมเป็น flex-wrap → พอจอแคบลง ลำดับการตกบรรทัดคุมไม่ได้:
   ไอคอนค้างอยู่บรรทัดเดียว · หัวข้อตกลงไปใต้ไอคอน · แผงควบคุมกองเป็น
   คอลัมน์แคบ ๆ ลอยกลางการ์ด → เปลี่ยนเป็น grid ที่รู้ว่าอะไรอยู่ตรงไหน

   ≥1400  [badge] [หัวข้อ ................] [แผงควบคุม]
   <1400  [badge] [หัวข้อ ................................]
                  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
                  [แผงควบคุม เรียงแนวนอน ตกบรรทัดเอง]
   <768   [badge] [หัวข้อ]
          [แผงควบคุม เต็มความกว้าง]
   --------------------------------------------------------- */
.yd-hero.yd-hero--side {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
  row-gap: 14px;
}
.yd-hero--side > .yd-hero__head { margin-right: 0; min-width: 0; }
.yd-hero--side > .ana-heroside,
.yd-hero--side > .mkt-heroside {
  grid-column: 3;
  justify-self: end;
  max-width: 540px;
  min-width: 0;
}

@media (max-width: 1399.98px) {
  .yd-hero.yd-hero--side { grid-template-columns: auto minmax(0, 1fr); }
  .yd-hero--side > .ana-heroside,
  .yd-hero--side > .mkt-heroside {
    grid-column: 2 / -1;
    justify-self: stretch;
    max-width: none;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.24);
  }
  .yd-hero--side > .ana-heroside > .mkt-seg,
  .yd-hero--side > .mkt-heroside > .mkt-seg {
    align-self: center;
    width: auto;
  }
  .yd-hero--side .ana-filters {
    flex: 1 1 420px;
    justify-content: flex-start;
    min-width: 0;
  }
  .yd-hero--side .ana-filters > .yd-dd { flex: 1 1 200px; max-width: 300px; min-width: 170px; }
}

@media (max-width: 767.98px) {
  .yd-hero--side > .ana-heroside,
  .yd-hero--side > .mkt-heroside {
    grid-column: 1 / -1;
    width: 100%;
  }
  .yd-hero--side > .ana-heroside > .mkt-seg,
  .yd-hero--side > .mkt-heroside > .mkt-seg { width: 100%; }
  .yd-hero--side .mkt-seg__btn { flex: 1 1 0; justify-content: center; }
  .yd-hero--side .ana-filters { flex-basis: 100%; }
  .yd-hero--side .ana-filters > *,
  .yd-hero--side .ana-filters > .yd-dd { flex: 1 1 100%; max-width: none; min-width: 0; }
  .yd-hero--side .ana-filters .mkt-weeknav { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html:root .yd-hero .btn { transition: none; }
}