/* ============================================================
   thai-premium.css — ชั้นตกแต่ง "ไทยพรีเมียม" ของอีสานเว็บดีไซน์
   โหลดต่อจาก style.css เพื่อทับค่าเดิมได้ และถอดออกทั้งชั้นได้
   โดยไม่กระทบโครงสร้างเดิม

   แนวคิด: ผ้าทออีสาน (ลายขิด/มัดหมี่) + ลายไทย (ประจำยาม/กนก)
           + งานทองบนพื้นไวน์แดงของโลโก้
   ============================================================ */

:root {
    /* ฟอนต์หัวเรื่องแบบมีเชิง ให้ความรู้สึกไทยและพรีเมียม */
    --font-display: 'Trirong', 'Prompt', 'Sarabun', Georgia, serif;

    /* ทองแบบทองคำเปลว ใช้กับตัวอักษรและเส้นขอบ */
    --foil: linear-gradient(100deg, #C8912A 0%, #F3D98C 22%, #FFF6D8 38%, #E3A92F 55%, #C8912A 78%, #F0CE7E 100%);
    --foil-line: linear-gradient(90deg, transparent, rgba(227,169,47,.15) 12%, var(--gold-500) 50%, rgba(227,169,47,.15) 88%, transparent);

    /* ลวดลาย */
    --khit:          url('../img/pattern-khit.svg');        /* ทอง — สำหรับพื้นเข้ม */
    --khit-soft:     url('../img/pattern-khit-soft.svg');   /* ไวน์จาง — สำหรับพื้นสว่าง */
    --khit-dim:      url('../img/pattern-khit-dim.svg');    /* ทองจาง — สำหรับแถบสีเข้มที่มีตัวอักษรทับ */
    --teensin:       url('../img/band-teensin.svg');
    --teensin-soft:  url('../img/band-teensin-soft.svg');
    --ornament:      url('../img/ornament-divider.svg');
    --ornament-gold: url('../img/ornament-divider-gold.svg');
    --kanok:         url('../img/kanok-corner.svg');
}

/* ------------------------------------------------------------
   1. ตัวอักษร — หัวเรื่องมีเชิง เนื้อความยังเป็น Sarabun อ่านง่าย
   ------------------------------------------------------------ */
h1, h2,
.section-title,
.cta-band__title,
.answer-box__q,
.pkg-card__name,
.hero__card h2,
.region-block__title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.005em;
}
h1 { font-weight: 700; }

.brand__text strong {
    font-family: var(--font-display);
    font-weight: 700;
}

/* ตัวเลขเด่น ๆ ใช้ฟอนต์มีเชิงให้ดูมีน้ำหนัก */
.stat__num,
.pkg-card__amount {
    font-family: var(--font-display);
    font-weight: 700;
}

/* ------------------------------------------------------------
   2. เส้นคาดลายประจำยามใต้หัวข้อทุกส่วน
   ------------------------------------------------------------ */
.section-head { position: relative; }
.section-head::after {
    content: '';
    display: block;
    width: 180px; height: 24px;
    margin: 1.05rem auto 0;
    background: var(--ornament) center / contain no-repeat;
}
.section-head--left::after { margin-inline: 0; }
.section--green .section-head::after { background-image: var(--ornament-gold); }

/* ป้ายกำกับเล็ก — เติมเพชรลายไทยหน้าข้อความ */
.eyebrow::before,
.hero__eyebrow::before {
    content: '\25C6';
    margin-right: .45em;
    font-size: .72em;
    vertical-align: .08em;
    color: var(--gold-600);
    opacity: .85;
}
.hero__eyebrow::before { color: var(--gold-400); }

/* ------------------------------------------------------------
   3. ทองคำเปลว — คำเน้นในหัวเรื่องฮีโร่
   ------------------------------------------------------------ */
.hero h1 .hl { color: var(--gold-400); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero h1 .hl {
        background: var(--foil);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* ------------------------------------------------------------
   4. แถบบน + ส่วนหัว — ตะเข็บทองคั่นให้ดูประณีต
   ------------------------------------------------------------ */
.topbar { border-bottom: 1px solid rgba(227,169,47,.16); }
.topbar__item--right {
    padding-left: 1.1rem;
    border-left: 1px solid rgba(227,169,47,.28);
}

.site-header::before { opacity: .85; height: 2px; }
.site-header.is-stuck::before { opacity: 1; height: 3px; }

.brand__mark {
    box-shadow: 0 0 0 1px rgba(227,169,47,.55), 0 6px 16px rgba(127,2,56,.18);
}
.brand__logo {
    box-shadow: 0 0 0 1px rgba(227,169,47,.35), 0 4px 14px rgba(127,2,56,.11);
}

/* เมนูหลัก — ขีดใต้เป็นทอง ให้ต่างจากลิงก์ทั่วไป */
.main-nav__link::after { background: var(--grad-gold); height: 2.5px; }

/* ------------------------------------------------------------
   5. ฮีโร่ — ผ้าทอลายขิดจาง ๆ ซ้อนบนไล่สีไวน์แดง
   ------------------------------------------------------------ */
.hero {
    background:
        var(--khit) 0 0 / 40px 40px repeat,
        radial-gradient(circle at 76% 36%, rgba(255, 205, 89, .15) 0 2px, transparent 2.5px) 0 0 / 24px 24px,
        var(--grad-hero);
    background-blend-mode: soft-light, normal, normal;
}
/* แถบตีนซิ่นคาดขอบล่างของฮีโร่ — ซ้อนเข้าไปในเลเยอร์แสงเดิมของ .hero::after */
.hero::after {
    background-image:
        var(--teensin-soft),
        radial-gradient(circle at 84% 14%, rgba(227, 169, 47, .26), transparent 46%),
        radial-gradient(circle at 8% 92%, rgba(204, 58, 114, .30), transparent 52%);
    background-repeat: repeat-x, no-repeat, no-repeat;
    background-position: bottom center, 0 0, 0 0;
    background-size: 64px 20px, auto, auto;
}

.hero__eyebrow {
    background: rgba(255,255,255,.10);
    border-color: rgba(227,169,47,.55);
    color: #F6DFA0;
}

.hero__points li::before {
    background: var(--grad-gold);
    box-shadow: 0 2px 8px rgba(227,169,47,.35);
}

/* การ์ดฮีโร่ — ขอบทองบาง ๆ + ลายกนกมุมขวาล่าง */
.hero__card {
    border: 1px solid rgba(227,169,47,.45);
    background: linear-gradient(160deg, #ffffff 0%, #fffdf8 55%, var(--brand-50) 100%);
}
.hero__card::after {
    content: '';
    position: absolute; right: -14px; bottom: -14px;
    width: 132px; height: 132px;
    background: var(--kanok) center / contain no-repeat;
    transform: rotate(180deg);
    opacity: .16;
    pointer-events: none;
}
.hero__card h2 { color: var(--brand-900); position: relative; z-index: 1; }
.hero__card .stat-grid,
.hero__card .badge-row { position: relative; z-index: 1; }

.stat {
    border-color: rgba(227,169,47,.22);
    background: linear-gradient(150deg, #ffffff, #fffaf0);
}
.stat::after { background: rgba(227,169,47,.16); }
.stat__num { color: var(--brand-800); }

/* ------------------------------------------------------------
   6. ปุ่ม — แสงทองกวาดผ่านตอนชี้
   ------------------------------------------------------------ */
.btn--accent,
.btn--primary { position: relative; overflow: hidden; }
.btn--accent::after,
.btn--primary::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
    pointer-events: none;
}
.btn--accent:hover::after,
.btn--primary:hover::after { left: 120%; }

.btn--accent {
    color: #40300a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(184,134,11,.26);
}
.btn--outline { border-color: var(--brand-700); }
.btn--outline:hover { box-shadow: 0 8px 20px rgba(127,2,56,.18); }
.btn--ghost { border-color: rgba(227,169,47,.6); color: #fff; }
.btn--ghost:hover { background: rgba(227,169,47,.16); border-color: var(--gold-400); }

/* ------------------------------------------------------------
   7. ส่วนเนื้อหา — พื้นผ้าทอจาง ๆ และเส้นทองคั่น
   ------------------------------------------------------------ */
.section--soft {
    position: relative;
    background:
        var(--khit-soft) 0 0 / 40px 40px repeat,
        linear-gradient(180deg, #fdfaf7, var(--bg-soft));
}
.section--soft::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--foil-line);
    opacity: .55;
}

.section--green {
    background:
        var(--khit-dim) 0 0 / 40px 40px repeat,
        var(--grad-brand);
    background-blend-mode: soft-light, normal;
}

/* การ์ด — เส้นทองบางบนหัวการ์ดตอนชี้
   (ไม่แตะ .step เพราะ .step::before ถูกใช้เป็นเลขลำดับขั้นตอนอยู่แล้ว) */
.card,
.service-card,
.focus-card { position: relative; }
.card::before,
.service-card::before,
.focus-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s ease;
    z-index: 2;
}
.card:hover::before,
.service-card:hover::before,
.focus-card:hover::before { transform: scaleX(1); }

/* ขั้นตอนการทำงาน — วงเลขลำดับล้อมด้วยวงแหวนทอง */
.step::before {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(227,169,47,.6), 0 6px 14px rgba(127,2,56,.2);
}
.step:hover { border-color: rgba(227,169,47,.45); }

.card:hover,
.service-card:hover,
.focus-card:hover { border-color: rgba(227,169,47,.45); }

.service-card__icon {
    background: linear-gradient(145deg, #fff6e2, var(--brand-50));
    box-shadow: inset 0 0 0 1px rgba(227,169,47,.3), 0 8px 18px rgba(127,2,56,.08);
}
.service-card::after { background: rgba(227,169,47,.09); }

.card__tag {
    background: linear-gradient(180deg, var(--brand-50), var(--brand-100));
    border: 1px solid rgba(127,2,56,.1);
}

/* กล่องคำตอบ AEO — ขอบซ้ายไล่สีไวน์ไปทอง */
.answer-box {
    position: relative;
    border-left: 1px solid rgba(227,169,47,.35);
    padding-left: 1.9rem;
    background: linear-gradient(135deg, #fffaf2, #ffffff 60%);
    border-color: rgba(227,169,47,.35);
}
.answer-box::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--brand-700), var(--gold-500));
    border-radius: var(--radius) 0 0 var(--radius);
}

/* FAQ — เครื่องหมายเป็นทอง */
.faq__q::after { color: var(--gold-600); }
.faq__item[open] { border-color: rgba(227,169,47,.45); }
.faq__q:hover { background: #fffaf0; }

/* จังหวัด — ชิปมีขีดทองด้านซ้ายตอนชี้ */
.province-chip { position: relative; overflow: hidden; }
.province-chip::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--grad-gold);
    transform: scaleY(0); transition: transform .2s ease;
}
.province-chip:hover::before { transform: scaleY(1); }
.province-chip:hover { border-color: rgba(227,169,47,.55); background: #fffaf0; }

.region-block__title { border-bottom-color: rgba(227,169,47,.35); }

/* ------------------------------------------------------------
   8. แพ็กเกจ — ใบที่แนะนำได้กรอบทองและลายขิดที่มุมบน
   ------------------------------------------------------------ */
.pkg-card.is-featured {
    border-color: rgba(227,169,47,.75);
    background: linear-gradient(180deg, #fffdf6, #ffffff 42%);
    box-shadow: 0 18px 44px rgba(184,134,11,.16);
    overflow: hidden;
}
.pkg-card.is-featured::after {
    content: '';
    position: absolute; right: -10px; top: -10px;
    width: 120px; height: 120px;
    background: var(--khit) 0 0 / 30px 30px repeat;
    opacity: .35;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%);
            mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%);
}
.pkg-card__badge {
    background: var(--foil);
    color: #40300a;
    box-shadow: 0 6px 16px rgba(184,134,11,.3);
}
.pkg-card__list li::before { color: var(--gold-600); }
.pkg-tab.is-active {
    background: var(--grad-brand);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(127,2,56,.22);
}

/* ------------------------------------------------------------
   8.5 แถบผู้แนะนำ — ผ้าทอลายขิดบนพื้นไวน์แดง
   ------------------------------------------------------------ */
.referral-band {
    background:
        var(--khit-dim) 0 0 / 40px 40px repeat,
        var(--grad-brand);
    background-blend-mode: soft-light, normal;
    border-block: 1px solid rgba(227,169,47,.28);
}
.referral-band__num {
    font-family: var(--font-display);
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .referral-band__num { color: var(--gold-400); }
}

/* ------------------------------------------------------------
   9. แถบชวนติดต่อ + ส่วนท้าย
   ------------------------------------------------------------ */
.cta-band {
    background:
        var(--khit-dim) 0 0 / 40px 40px repeat,
        var(--grad-brand);
    background-blend-mode: soft-light, normal;
    border-top: 1px solid rgba(227,169,47,.3);
}
.cta-band::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 20px;
    background: var(--teensin) repeat-x center / 64px 20px;
    opacity: .45;
    z-index: 1;
    pointer-events: none;
}
.cta-band__inner { padding-top: .8rem; }

.site-footer { position: relative; }
.site-footer::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 20px;
    background: var(--teensin) repeat-x center / 64px 20px;
    opacity: .55;
}
.site-footer__grid { padding-top: 3.6rem; }
.site-footer__title {
    font-family: var(--font-display);
    position: relative;
    padding-bottom: .55rem;
}
.site-footer__title::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 42px; height: 2px;
    background: var(--grad-gold);
    border-radius: 2px;
}
.site-footer__bottom { border-top-color: rgba(227,169,47,.22); }

/* ------------------------------------------------------------
   10. หัวหน้าเพจย่อย — ผ้าทอจางบนพื้นชมพูอ่อน
   ------------------------------------------------------------ */
.page-hero {
    position: relative;
    background:
        var(--khit-soft) 0 0 / 40px 40px repeat,
        linear-gradient(135deg, var(--brand-50), #fffaf2 65%, var(--brand-50));
}
.page-hero::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--foil-line);
}
.page-hero h1 { font-family: var(--font-display); }

/* ------------------------------------------------------------
   11. ปุ่มลอย — วงแหวนทอง
   ------------------------------------------------------------ */
.float-contact__btn {
    box-shadow: 0 0 0 1px rgba(227,169,47,.4), 0 10px 24px rgba(46,0,20,.22);
}

/* ------------------------------------------------------------
   12. จังหวะการเข้ามาของฮีโร่ (เบา ๆ ไม่รบกวน)
   ------------------------------------------------------------ */
@keyframes thai-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.hero__eyebrow,
.hero h1,
.hero__lead,
.hero__points,
.hero__actions,
.hero__card {
    animation: thai-rise .6s cubic-bezier(.22,.7,.3,1) both;
}
.hero h1       { animation-delay: .06s; }
.hero__lead    { animation-delay: .12s; }
.hero__card    { animation-delay: .16s; }
.hero__points  { animation-delay: .18s; }
.hero__actions { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    .hero__eyebrow,
    .hero h1,
    .hero__lead,
    .hero__points,
    .hero__actions,
    .hero__card { animation: none; }
    .btn--accent::after,
    .btn--primary::after { display: none; }
}

/* ------------------------------------------------------------
   13. จอเล็ก — ลดลวดลายลงไม่ให้รก
   ------------------------------------------------------------ */
@media (max-width: 620px) {
    .section-head::after { width: 140px; margin-top: .85rem; }
    .hero__card::after { width: 96px; height: 96px; opacity: .12; }
    .site-footer::before,
    .cta-band::before { opacity: .4; }
}

@media print {
    .section-head::after,
    .site-footer::before,
    .cta-band::before,
    .hero__card::after { display: none !important; }
}