/* ------------------------------------------------------------------
 * hero.css — สไลด์หน้าแรก
 * ------------------------------------------------------------------
 * โครงสร้าง 2 คอลัมน์
 *   ซ้าย  = ข้อความ + ป้ายจุดเด่น + ปุ่ม + ตัวเลขน่าเชื่อถือ
 *   ขวา   = ภาพแบนเนอร์วางเป็นการ์ดลอย เห็นเต็มใบ ไม่โดนครอบขอบ
 *   หลัง  = ภาพเดียวกันเบลอ + เคลือบสีแบรนด์
 *
 * ทำไมต้องวางภาพเป็นการ์ด
 *   ภาพแบนเนอร์ของร้านเป็นโปสเตอร์ที่มีหัวข้อกับเบอร์โทรอยู่ในภาพอยู่แล้ว
 *   ถ้าเอาไปทำพื้นหลังเต็มจอแล้ววางตัวหนังสือทับ จะกลายเป็นข้อความซ้อนข้อความ
 *   จับมาใส่การ์ดแทน = อ่านออกทั้งสองฝั่ง และภาพไม่โดนตัดขอบสักด้าน
 *
 * สไลด์ทุกใบซ้อนอยู่ในช่องตารางเดียวกัน (grid-area: 1/1)
 * จึงค่อยๆ จางสลับกันได้ และความสูงยึดตามใบที่สูงที่สุด (ไม่กระตุก)
 * ------------------------------------------------------------------ */

.mhs-hero {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: #0b0b0b;
}

.mhs-hero-track {
    display: grid;
}

/* ================= ตัวสไลด์ ================= */
.mhs-hero-slide {
    grid-area: 1 / 1;          /* ทุกใบซ้อนช่องเดียวกัน = จางสลับกันได้ */
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 58px 0 96px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s;
}

.mhs-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* ---------- พื้นหลังเบลอ ---------- */
.mhs-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mhs-hero-blur {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    object-fit: cover;
    filter: blur(34px) saturate(1.25);
    transform: scale(1.04);
}

.mhs-hero-slide.is-active .mhs-hero-blur {
    animation: mhs-kenburns 16s ease-out forwards;
}

@keyframes mhs-kenburns {
    from { transform: scale(1.04); }
    to   { transform: scale(1.14); }
}

/* เคลือบสีแบรนด์ทับ ให้ตัวหนังสือฝั่งซ้ายอ่านออกเสมอ */
.mhs-hero-tint {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(88, 0, 0, .95) 0%, rgba(120, 6, 6, .86) 38%, rgba(20, 0, 0, .62) 100%),
        radial-gradient(120% 90% at 12% 50%, rgba(0, 0, 0, .45), transparent 70%);
}

/* ================= ตารางซ้าย/ขวา ================= */
.mhs-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 46px;
}

/* สไลด์ที่ไม่ใส่ข้อความ ให้ภาพอยู่กลางจอ */
.mhs-hero-slide.is-plain .mhs-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1000px;
}

.mhs-hero-inner {
    color: #fff;
}

/* ---------- ทุกชิ้นลอยขึ้นทีละอัน ---------- */
.mhs-hero-eyebrow,
.mhs-hero-title,
.mhs-hero-sub,
.mhs-hero-chips,
.mhs-hero-btns,
.mhs-hero-stats,
.mhs-hero-figure {
    opacity: 0;
    transform: translateY(28px);
}

.mhs-hero-slide.is-active .mhs-hero-eyebrow { animation: mhs-hero-up .7s .12s cubic-bezier(.2,.7,.3,1) forwards; }
.mhs-hero-slide.is-active .mhs-hero-title   { animation: mhs-hero-up .8s .22s cubic-bezier(.2,.7,.3,1) forwards; }
.mhs-hero-slide.is-active .mhs-hero-sub     { animation: mhs-hero-up .8s .32s cubic-bezier(.2,.7,.3,1) forwards; }
.mhs-hero-slide.is-active .mhs-hero-chips   { animation: mhs-hero-up .8s .42s cubic-bezier(.2,.7,.3,1) forwards; }
.mhs-hero-slide.is-active .mhs-hero-btns    { animation: mhs-hero-up .8s .52s cubic-bezier(.2,.7,.3,1) forwards; }
.mhs-hero-slide.is-active .mhs-hero-stats   { animation: mhs-hero-up .8s .62s cubic-bezier(.2,.7,.3,1) forwards; }
.mhs-hero-slide.is-active .mhs-hero-figure  { animation: mhs-hero-in .9s .18s cubic-bezier(.2,.7,.3,1) forwards; }

@keyframes mhs-hero-up {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mhs-hero-in {
    from { opacity: 0; transform: translateY(34px) scale(.965); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- ป้ายกำกับบนสุด ---------- */
.mhs-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    margin-bottom: 18px;
    border-radius: 30px;
    font-size: 14px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mhs-hero-eyebrow i {
    color: #ffc046;
}

.mhs-hero-title {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 14px;
    text-shadow: 0 4px 22px rgba(0, 0, 0, .45);
}

.mhs-hero-sub {
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 22px;
    max-width: 560px;
    color: rgba(255, 255, 255, .93);
}

/* ---------- ป้ายจุดเด่น ---------- */
.mhs-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.mhs-hero-chips a,
.mhs-hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: 30px;
    font-size: 14.5px;
    color: #fff !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .26);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .2s ease, transform .2s ease;
}

.mhs-hero-chips i {
    color: #ffc046;
    font-size: 13px;
}

.mhs-hero-chips a:hover {
    background: rgba(255, 255, 255, .24);
    transform: translateY(-2px);
}

/* ---------- ปุ่ม ---------- */
.mhs-hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.mhs-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 14px 26px;
    border-radius: 16px;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.mhs-hero-btn i {
    font-size: 18px;
}

.mhs-hero-btn span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.mhs-hero-btn strong {
    font-size: 16.5px;
    font-weight: 700;
}

.mhs-hero-btn small {
    font-size: 12.5px;
    opacity: .78;
    margin-top: 2px;
}

.mhs-hero-btn.is-main {
    color: #a10000 !important;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}

.mhs-hero-btn.is-main i {
    color: #d32f2f;
}

.mhs-hero-btn.is-call {
    color: #fff !important;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mhs-hero-btn:hover {
    transform: translateY(-3px);
}

.mhs-hero-btn.is-main:hover {
    box-shadow: 0 18px 38px rgba(0, 0, 0, .42);
}

.mhs-hero-btn.is-call:hover {
    background: linear-gradient(135deg, #ff9000, #ef6c00);
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(239, 108, 0, .45);
}

/* ---------- ตัวเลขน่าเชื่อถือ ---------- */
.mhs-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
}

.mhs-hero-stats > div {
    padding: 0 22px;
    text-align: center;
}

.mhs-hero-stats > div + div {
    border-left: 1px solid rgba(255, 255, 255, .24);
}

.mhs-hero-stats strong {
    display: block;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.15;
}

.mhs-hero-stats span {
    font-size: 12.5px;
    opacity: .82;
}

/* ================= การ์ดภาพฝั่งขวา ================= */
.mhs-hero-figure {
    margin: 0;
}

.mhs-hero-card {
    position: relative;
    padding: 12px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mhs-hero-photo {
    display: block;
    width: 100%;
    height: auto;              /* ภาพเห็นเต็มใบตามสัดส่วนจริง ไม่โดนตัด */
    border-radius: 14px;
}

.mhs-hero-cardfoot {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 14px 4px 0;
    color: #fff;
}

.mhs-hero-avatar {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: linear-gradient(135deg, #ff9000, #ef6c00);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

.mhs-hero-cardtxt {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.mhs-hero-cardtxt strong {
    font-size: 15.5px;
}

.mhs-hero-cardtxt small {
    font-size: 12.5px;
    opacity: .8;
}

.mhs-hero-cardtxt i {
    color: #ffc046;
    margin-right: 3px;
}

/* ================= ปุ่มเลื่อนซ้าย/ขวา ================= */
.mhs-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(161, 0, 0, .85);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
    transition: background .2s ease, transform .2s ease;
    z-index: 4;
}

.mhs-hero-nav:hover {
    background: #fff;
    color: #a10000;
    transform: translateY(-50%) scale(1.08);
}

.mhs-hero-nav.is-prev { left: 18px; }
.mhs-hero-nav.is-next { right: 18px; }

/* ================= แถบล่าง : ตัวเลข + จุด ================= */
.mhs-hero-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    z-index: 4;
}

.mhs-hero-bar-inner {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mhs-hero-count {
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    letter-spacing: 1px;
    flex: none;
}

.mhs-hero-count strong {
    color: #fff;
    font-size: 20px;
}

.mhs-hero-dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* จุดเป็นหลอดที่ค่อยๆ เติมตามเวลาที่เหลือของสไลด์ */
.mhs-hero-dots button {
    position: relative;
    width: 46px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    overflow: hidden;
    transition: width .3s ease, background .2s ease;
}

.mhs-hero-dots button:hover {
    background: rgba(255, 255, 255, .6);
}

.mhs-hero-dot-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: #fff;
    border-radius: 4px;
}

.mhs-hero-dots button.is-active {
    width: 74px;
}

.mhs-hero-dots button.is-active .mhs-hero-dot-fill {
    animation: mhs-hero-fill var(--hero-delay, 6s) linear forwards;
}

.mhs-hero.is-paused .mhs-hero-dots button.is-active .mhs-hero-dot-fill {
    animation-play-state: paused;
}

@keyframes mhs-hero-fill {
    from { width: 0; }
    to   { width: 100%; }
}

.mhs-hero-dots button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* ================= ปุ่มเลื่อนลง ================= */
.mhs-hero-scroll {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    cursor: pointer;
}

.mhs-hero-scroll i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    font-size: 11px;
    animation: mhs-hero-bob 1.8s ease-in-out infinite;
}

.mhs-hero-scroll:hover {
    color: #fff;
}

@keyframes mhs-hero-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* ================= ปุ่มลัดของแอดมิน ================= */
.mhs-hero-edit {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13.5px;
    color: #fff !important;
    text-decoration: none !important;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .2s ease;
}

.mhs-hero-edit:hover {
    background: #a10000;
}

/* ================= จอกลาง ================= */
@media (max-width: 1199px) {
    .mhs-hero-title { font-size: 38px; }
    .mhs-hero-grid { gap: 32px; }
    .mhs-hero-stats > div { padding: 0 16px; }
    .mhs-hero-stats strong { font-size: 22px; }
}

/* ================= จอแท็บเล็ตลงมา : เรียงบนล่าง ================= */
@media (max-width: 991px) {
    .mhs-hero-slide {
        min-height: 0;
        padding: 40px 0 84px;
    }

    .mhs-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    /* ภาพขึ้นก่อน แล้วค่อยตามด้วยข้อความ */
    .mhs-hero-figure { order: 1; }
    .mhs-hero-inner  { order: 2; text-align: center; }

    .mhs-hero-title { font-size: 30px; }
    .mhs-hero-sub { font-size: 15.5px; margin-left: auto; margin-right: auto; }
    .mhs-hero-chips { justify-content: center; }
    .mhs-hero-btns { justify-content: center; }
    .mhs-hero-cardfoot { justify-content: center; }

    .mhs-hero-nav {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .mhs-hero-nav.is-prev { left: 8px; }
    .mhs-hero-nav.is-next { right: 8px; }

    .mhs-hero-bar-inner { justify-content: center; }
    .mhs-hero-count { display: none; }
    .mhs-hero-scroll { display: none; }
}

/* ================= มือถือ ================= */
@media (max-width: 575px) {
    .mhs-hero-slide { padding: 28px 0 76px; }
    .mhs-hero-eyebrow { font-size: 12.5px; padding: 7px 14px; margin-bottom: 13px; }
    .mhs-hero-title { font-size: 24px; line-height: 1.4; }
    .mhs-hero-sub { font-size: 14.5px; margin-bottom: 18px; }
    .mhs-hero-chips { gap: 8px; margin-bottom: 20px; }
    .mhs-hero-chips a,
    .mhs-hero-chips span { font-size: 13px; padding: 7px 13px; }

    .mhs-hero-btns { flex-direction: column; gap: 10px; }
    .mhs-hero-btn { justify-content: center; width: 100%; }

    .mhs-hero-stats { display: flex; width: 100%; padding: 12px 0; }
    .mhs-hero-stats > div { flex: 1; padding: 0 6px; }
    .mhs-hero-stats strong { font-size: 20px; }
    .mhs-hero-stats span { font-size: 11.5px; }

    .mhs-hero-card { padding: 8px; border-radius: 18px; }
    .mhs-hero-photo { border-radius: 11px; }
    .mhs-hero-avatar { width: 36px; height: 36px; font-size: 15px; }

    .mhs-hero-nav { display: none; }        /* จอเล็กใช้ปัดนิ้วแทน */
    .mhs-hero-dots button { width: 30px; }
    .mhs-hero-dots button.is-active { width: 52px; }
    .mhs-hero-edit { display: none; }
}

/* ================= เคารพการตั้งค่าลดการเคลื่อนไหว ================= */
@media (prefers-reduced-motion: reduce) {
    .mhs-hero-slide,
    .mhs-hero-nav,
    .mhs-hero-btn,
    .mhs-hero-chips a,
    .mhs-hero-dots button {
        transition: none !important;
    }

    .mhs-hero-blur,
    .mhs-hero-eyebrow,
    .mhs-hero-title,
    .mhs-hero-sub,
    .mhs-hero-chips,
    .mhs-hero-btns,
    .mhs-hero-stats,
    .mhs-hero-figure,
    .mhs-hero-scroll i,
    .mhs-hero-dot-fill {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}