@charset "UTF-8";
/* ==========================================================================
   Evereng Online — Design System 2026
   เขียนเองทั้งหมด ไม่พึ่ง framework
   โครงไฟล์:
     1  Design tokens        7  Forms              13  Product card
     2  Reset / base         8  Badge / alert      14  Section
     3  Typography           9  Card / table       15  Footer
     4  Layout + grid       10  Header / nav       16  Modal
     5  Utilities           11  Hero / slider      17  Carousel
     6  Buttons             12  Category tiles     18  Responsive
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* แบรนด์ — น้ำเงินเข้มขึ้นจากเดิม #3A9AD8 ให้คมและอ่านง่ายขึ้น */
    --brand:            #0B6FB4;
    --brand-600:        #095C96;
    --brand-700:        #094E80;
    --brand-100:        #D6E9F8;
    --brand-50:         #EAF4FC;

    /* สีเน้น — ส้มเดิมของแบรนด์ ใช้กับ CTA และป้ายลดราคา */
    --accent:           #F5822B;
    --accent-600:       #DC6E1C;
    --accent-50:        #FEF1E6;

    /* กลาง */
    --ink:              #1A2733;
    --ink-2:            #35485A;
    --muted:            #5A6B7A;
    --muted-2:          #8A99A8;
    --line:             #E3E9EF;
    --line-2:           #EEF2F6;
    --surface:          #F7F9FB;
    --surface-2:        #FFFFFF;

    /* สถานะ */
    --danger:           #D64545;
    --danger-50:        #FDEDED;
    --success:          #2E9E5B;
    --success-50:       #EAF7EF;
    --warning:          #E0A32E;

    /* รูปทรง */
    --r-xs:  6px;
    --r-sm:  8px;
    --r:    12px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* เงา — อ่อน ไม่ทึบเหมือนของเดิม */
    --sh-1: 0 1px 2px rgba(16,36,56,.06), 0 1px 3px rgba(16,36,56,.05);
    --sh-2: 0 2px 6px rgba(16,36,56,.07), 0 6px 16px rgba(16,36,56,.06);
    --sh-3: 0 8px 24px rgba(16,36,56,.10), 0 2px 8px rgba(16,36,56,.06);

    /* ระยะ */
    --gap: 24px;
    --container: 1240px;

    /* ตัวอักษร */
    --font: "IBM Plex Sans Thai", "Noto Sans Thai", -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --header-h: 72px;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
img { border: 0; }

a { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-700); text-decoration: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

::selection { background: var(--brand-100); color: var(--brand-700); }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* แถบเลื่อนแนวนอนของตาราง/แถบหมวดหมู่ */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0 0 .5em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.01em;
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.625rem; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.175rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: .95rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

small, .small { font-size: .8125rem; }
b, strong { font-weight: 600; }
del { color: var(--muted-2); }

.lead { font-size: 1.0625rem; color: var(--muted); }

/* ตัดข้อความหลายบรรทัด (ของเดิมมีใช้ในการ์ดสินค้า) */
.one-line, .two-line, .three-line, .four-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.one-line   { -webkit-line-clamp: 1; }
.two-line   { -webkit-line-clamp: 2; }
.three-line { -webkit-line-clamp: 3; }
.four-line  { -webkit-line-clamp: 4; }


/* ==========================================================================
   4. LAYOUT + GRID
   ระบบ 12 คอลัมน์ เขียนเอง ชื่อ class ตรงกับของเดิมเพื่อให้หน้าที่ยังไม่ได้
   รื้อใหม่ใช้งานต่อได้ระหว่างทยอยเปลี่ยน
   ========================================================================== */
.container, .container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
}
.container { max-width: var(--container); }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -12px;
}
.row > * { padding-inline: 12px; width: 100%; }

.col        { flex: 1 0 0%; }
.col-auto   { flex: 0 0 auto; width: auto; }

.col-1  { flex:0 0 8.3333%;  max-width:8.3333%; }
.col-2  { flex:0 0 16.6667%; max-width:16.6667%; }
.col-3  { flex:0 0 25%;      max-width:25%; }
.col-4  { flex:0 0 33.3333%; max-width:33.3333%; }
.col-5  { flex:0 0 41.6667%; max-width:41.6667%; }
.col-6  { flex:0 0 50%;      max-width:50%; }
.col-7  { flex:0 0 58.3333%; max-width:58.3333%; }
.col-8  { flex:0 0 66.6667%; max-width:66.6667%; }
.col-9  { flex:0 0 75%;      max-width:75%; }
.col-10 { flex:0 0 83.3333%; max-width:83.3333%; }
.col-11 { flex:0 0 91.6667%; max-width:91.6667%; }
.col-12 { flex:0 0 100%;     max-width:100%; }
.col-xs-12 { flex:0 0 100%;  max-width:100%; }   /* ตกค้างจาก Bootstrap 3 */

@media (min-width:576px){
    .col-sm-1 {flex:0 0 8.3333%;max-width:8.3333%}   .col-sm-2 {flex:0 0 16.6667%;max-width:16.6667%}
    .col-sm-3 {flex:0 0 25%;max-width:25%}           .col-sm-4 {flex:0 0 33.3333%;max-width:33.3333%}
    .col-sm-5 {flex:0 0 41.6667%;max-width:41.6667%} .col-sm-6 {flex:0 0 50%;max-width:50%}
    .col-sm-7 {flex:0 0 58.3333%;max-width:58.3333%} .col-sm-8 {flex:0 0 66.6667%;max-width:66.6667%}
    .col-sm-9 {flex:0 0 75%;max-width:75%}           .col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}
    .col-sm-11{flex:0 0 91.6667%;max-width:91.6667%} .col-sm-12{flex:0 0 100%;max-width:100%}
}
@media (min-width:768px){
    .col-md-1 {flex:0 0 8.3333%;max-width:8.3333%}   .col-md-2 {flex:0 0 16.6667%;max-width:16.6667%}
    .col-md-3 {flex:0 0 25%;max-width:25%}           .col-md-4 {flex:0 0 33.3333%;max-width:33.3333%}
    .col-md-5 {flex:0 0 41.6667%;max-width:41.6667%} .col-md-6 {flex:0 0 50%;max-width:50%}
    .col-md-7 {flex:0 0 58.3333%;max-width:58.3333%} .col-md-8 {flex:0 0 66.6667%;max-width:66.6667%}
    .col-md-9 {flex:0 0 75%;max-width:75%}           .col-md-10{flex:0 0 83.3333%;max-width:83.3333%}
    .col-md-11{flex:0 0 91.6667%;max-width:91.6667%} .col-md-12{flex:0 0 100%;max-width:100%}
}
@media (min-width:992px){
    .col-lg-1 {flex:0 0 8.3333%;max-width:8.3333%}   .col-lg-2 {flex:0 0 16.6667%;max-width:16.6667%}
    .col-lg-3 {flex:0 0 25%;max-width:25%}           .col-lg-4 {flex:0 0 33.3333%;max-width:33.3333%}
    .col-lg-5 {flex:0 0 41.6667%;max-width:41.6667%} .col-lg-6 {flex:0 0 50%;max-width:50%}
    .col-lg-7 {flex:0 0 58.3333%;max-width:58.3333%} .col-lg-8 {flex:0 0 66.6667%;max-width:66.6667%}
    .col-lg-9 {flex:0 0 75%;max-width:75%}           .col-lg-10{flex:0 0 83.3333%;max-width:83.3333%}
    .col-lg-11{flex:0 0 91.6667%;max-width:91.6667%} .col-lg-12{flex:0 0 100%;max-width:100%}
}
@media (min-width:1200px){
    .col-xl-1 {flex:0 0 8.3333%;max-width:8.3333%}   .col-xl-2 {flex:0 0 16.6667%;max-width:16.6667%}
    .col-xl-3 {flex:0 0 25%;max-width:25%}           .col-xl-4 {flex:0 0 33.3333%;max-width:33.3333%}
    .col-xl-6 {flex:0 0 50%;max-width:50%}           .col-xl-12{flex:0 0 100%;max-width:100%}
}

/* กริดแบบใหม่ — ยืดตามพื้นที่จริง ใช้กับ grid สินค้า/หมวดหมู่ */
.grid { display: grid; gap: var(--gap); }
.grid-products { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (min-width: 992px)  { .grid-products { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .grid-products { grid-template-columns: repeat(5, 1fr); } }
.grid-cats     { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.grid-2        { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4        { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.main-container { min-height: 40vh; }
.page-section   { padding: 48px 0; }
.stack   { display: flex; flex-direction: column; gap: 12px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }


/* ==========================================================================
   5. UTILITIES
   ========================================================================== */
.hide, .d-none { display: none !important; }
.hand { cursor: pointer; }
.sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.text-left{text-align:left!important} .text-center{text-align:center!important} .text-right{text-align:right!important}
.text-primary{color:var(--brand)!important}   .text-blue{color:var(--brand)!important}
.text-dark-blue{color:var(--brand-700)!important} .text-secondary{color:var(--ink-2)!important}
.text-muted{color:var(--muted)!important}      .text-white{color:#fff!important}
.text-danger{color:var(--danger)!important}    .text-success{color:var(--success)!important}
.text-dark{color:var(--ink)!important}         .text-accent{color:var(--accent)!important}
.font-weight-bold{font-weight:600!important}

.bg-blue{background:var(--brand);color:#fff}
.bg-dark-blue{background:var(--brand-700);color:#fff}
.bg-danger{background:var(--danger);color:#fff}
.bg-accent{background:var(--accent);color:#fff}
.bg-surface{background:var(--surface)}

.float-right,.pull-right{float:right!important}
.pull-left{float:left!important}
.justify-content-center{justify-content:center!important}
.align-center{align-items:center!important}
.w-100{width:100%!important}

.m-0{margin:0!important}  .mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:4px!important}   .mb-3{margin-bottom:12px!important}
.mb-5{margin-bottom:20px!important}  .mb-7{margin-bottom:7px!important}
.mb-14{margin-bottom:14px!important} .mb-20{margin-bottom:20px!important}
.mt-7{margin-top:7px!important}      .mt-14{margin-top:14px!important}
.mt-20{margin-top:20px!important}
.pt-7{padding-top:7px!important}     .pt-14{padding-top:14px!important}
.pt-21{padding-top:21px!important}   .pt-35{padding-top:35px!important}
.pb-7{padding-bottom:7px!important}  .pb-14{padding-bottom:14px!important}
.pb-21{padding-bottom:21px!important}.pb-35{padding-bottom:35px!important}
.p-35{padding:35px!important}        .py-5{padding-top:36px!important;padding-bottom:36px!important}

/* กล่องพื้นขาวมีขอบ (ของเดิมใช้ในหลังบ้านและบางหน้าหน้าบ้าน) */
.mat-box {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
    padding: 20px;
}

.image-box { background-size: cover; background-position: center; background-repeat: no-repeat; }


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn {
    --btn-bg: var(--brand);
    --btn-fg: #fff;
    --btn-bd: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--r-sm);
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    cursor: pointer;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .06s ease;
    -webkit-appearance: none;
    appearance: none;
}
.btn:hover  { color: var(--btn-fg); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.btn-primary   { --btn-bg:var(--brand);      --btn-bd:var(--brand); }
.btn-primary:hover { --btn-bg:var(--brand-600); --btn-bd:var(--brand-600); }

.btn-accent    { --btn-bg:var(--accent);     --btn-bd:var(--accent); }
.btn-accent:hover { --btn-bg:var(--accent-600); --btn-bd:var(--accent-600); }

.btn-secondary { --btn-bg:var(--ink-2);      --btn-bd:var(--ink-2); }

/* ปุ่ม LINE ใช้สีเขียวตามแบรนด์ LINE */
.btn-line      { --btn-bg:#06C755;           --btn-bd:#06C755; }
.btn-line:hover { --btn-bg:#05B04B;          --btn-bd:#05B04B; }
.btn .line-logo { flex: 0 0 auto; display: block; }
.btn-warning   { --btn-bg:var(--warning);    --btn-bd:var(--warning); }
.btn-danger    { --btn-bg:var(--danger);     --btn-bd:var(--danger); }
.btn-success   { --btn-bg:var(--success);    --btn-bd:var(--success); }

.btn-light, .btn-default {
    --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:var(--line);
}
.btn-light:hover, .btn-default:hover { --btn-bg:var(--surface); --btn-bd:var(--muted-2); }

.btn-outline-primary   { --btn-bg:transparent; --btn-fg:var(--brand);   --btn-bd:var(--brand); }
.btn-outline-primary:hover   { --btn-bg:var(--brand);   --btn-fg:#fff; }
.btn-outline-secondary { --btn-bg:transparent; --btn-fg:var(--muted);   --btn-bd:var(--line); }
.btn-outline-secondary:hover { --btn-bg:var(--surface); --btn-fg:var(--ink); }
.btn-outline-success   { --btn-bg:transparent; --btn-fg:var(--success); --btn-bd:var(--success); }
.btn-outline-success:hover   { --btn-bg:var(--success); --btn-fg:#fff; }
.btn-outline-info      { --btn-bg:transparent; --btn-fg:var(--brand);   --btn-bd:var(--brand-100); }

.btn-sm  { padding: 7px 14px;  font-size: .85rem; }
.btn-lg  { padding: 14px 28px; font-size: 1.03rem; border-radius: var(--r); }
.btn-block { display: flex; width: 100%; }
.btn-pill  { border-radius: var(--r-pill); }


/* ==========================================================================
   7. FORMS
   ========================================================================== */
label { display: inline-block; margin-bottom: 6px; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.label-control { padding-top: 8px; }

.form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.form-control::placeholder { color: var(--muted-2); }
.form-control:hover  { border-color: #CFD9E3; }
.form-control:focus  {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-50);
}
.form-control:disabled, .form-control[readonly] { background: var(--surface); color: var(--muted); }

textarea.form-control { min-height: 110px; resize: vertical; }

select.form-control, .form-select {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B7A' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.form-control-sm { padding: 7px 12px; font-size: .85rem; }
.form-control-lg, .input-lg { padding: 13px 16px; font-size: 1.03rem; border-radius: var(--r); }

/* ช่องที่บังคับกรอก — ของเดิมใช้ class .require */
[required], .require { border-left: 3px solid var(--brand); }

/* กลุ่ม input (ช่องค้นหา ฯลฯ) */
.input-group { display: flex; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; }
.input-group > .form-control:not(:first-child) { border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group > .form-control:not(:last-child)  { border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group-prepend, .input-group-append { display: flex; }
.input-group-text {
    display: flex; align-items: center;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted);
    white-space: nowrap;
}
.input-group-prepend .input-group-text { border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group-append  .input-group-text { border-left: 0;  border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-group-sm .form-control { padding: 7px 12px; font-size: .85rem; }

/* ตัวนับจำนวนสินค้า */
.input-number, .txtQty { text-align: center; }
.qty-box { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.qty-box .btn-number {
    width: 38px; border: 0; background: var(--surface); color: var(--ink-2);
    font-size: 1rem; line-height: 1;
}
.qty-box .btn-number:hover { background: var(--brand-50); color: var(--brand); }
.qty-box .form-control { border: 0; border-inline: 1px solid var(--line); border-radius: 0; width: 60px; text-align: center; }

.input-hint { font-size: .8125rem; color: var(--muted); margin-top: 4px; }


/* ==========================================================================
   8. BADGE / ALERT
   ========================================================================== */
.badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    font-size: .75rem; font-weight: 600; line-height: 1.5;
    border-radius: var(--r-pill);
    background: var(--surface); color: var(--ink-2);
}
.badge.bg-danger { background: var(--danger); color: #fff; }

.alert {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--muted-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    margin-bottom: 16px;
}
.alert-success { background: var(--success-50); border-color: #CBE9D7; border-left-color: var(--success); }
.alert-danger, .alert-error { background: var(--danger-50); border-color: #F5CFCF; border-left-color: var(--danger); }
.alert-info    { background: var(--brand-50); border-color: var(--brand-100); border-left-color: var(--brand); }


/* ==========================================================================
   9. CARD / TABLE
   ========================================================================== */
.card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.card-body  { padding: 16px; }
.card-title { margin-bottom: 6px; font-size: .95rem; font-weight: 500; }
.card-text  { color: var(--muted); }

.table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table thead th {
    font-size: .8125rem; font-weight: 600; color: var(--muted);
    text-transform: none; letter-spacing: .01em;
    border-bottom: 1px solid var(--line); background: var(--surface);
}
.table thead th:first-child { border-top-left-radius: var(--r-sm); }
.table thead th:last-child  { border-top-right-radius: var(--r-sm); }
.table-striped tbody tr:nth-child(odd) { background: var(--surface); }
.table-hover tbody tr:hover { background: var(--brand-50); }
.table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--line); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ==========================================================================
   10. HEADER / NAV
   ========================================================================== */
.topbar {
    background: var(--brand-700);
    color: rgba(255,255,255,.9);
    font-size: .8125rem;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar a { color: rgba(255,255,255,.9); }
.topbar a:hover { color: #fff; }
.topbar-info { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar-info span { display: inline-flex; align-items: center; gap: 7px; }

.site-header {
    position: sticky; top: 0; z-index: 900;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: var(--sh-2); }

.header-main {
    display: flex; align-items: center; gap: 24px;
    min-height: var(--header-h);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }

/* ช่องค้นหา */
.header-search { flex: 1 1 auto; max-width: 560px; }
.search-form { position: relative; display: flex; }
.search-form input {
    width: 100%;
    padding: 11px 48px 11px 16px;
    font-size: .9375rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.search-form input::placeholder { color: var(--muted-2); }
.search-form input:focus {
    outline: 0; background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-50);
}
.search-form button {
    position: absolute; top: 4px; right: 4px; bottom: 4px;
    width: 40px;
    border: 0; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.search-form button:hover { background: var(--brand-600); }

/* ปุ่มด้านขวา */
.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.icon-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    color: var(--ink-2); font-size: .875rem; font-weight: 500;
    background: none; border: 0;
    transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--surface); color: var(--brand); }
.icon-btn i { font-size: 1.15rem; }
.icon-btn .count {
    position: absolute; top: 2px; left: 24px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: .6875rem; font-weight: 700; line-height: 1;
    color: #fff; background: var(--accent);
    border: 2px solid #fff; border-radius: var(--r-pill);
}

/* แถบเมนูหลัก */
.main-nav { background: #fff; border-top: 1px solid var(--line-2); }
.main-nav .container { display: flex; align-items: center; gap: 4px; }
.nav-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 13px 14px;
    font-size: .9375rem; font-weight: 500;
    color: var(--ink-2);
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); }
.nav-link.is-primary {
    background: var(--brand); color: #fff;
    border-radius: var(--r-sm); margin-right: 10px;
    border-bottom-color: transparent;
}
.nav-link.is-primary:hover { background: var(--brand-600); color: #fff; border-bottom-color: transparent; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 7px 16px; font-size: .875rem; white-space: nowrap; }
/* จอ 992–1279px เมนูยังไม่ยุบ แต่พื้นที่ไม่พอ บีบระยะให้ปุ่มทางขวาไม่ล้นจอ */
@media (min-width: 992px) and (max-width: 1279px) {
    .nav-link { padding: 13px 9px; font-size: .875rem; }
    .nav-cta { gap: 6px; }
    .nav-cta .btn { padding: 7px 11px; font-size: .8125rem; }
}

/* เมนูหมวดหมู่ (แผงใหญ่) */
.has-mega { position: relative; }
.mega {
    position: absolute; top: 100%; left: 0; z-index: 950;
    min-width: 680px; max-width: 92vw;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: var(--sh-3);
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 24px;
}
.has-mega.open .mega { display: grid; }
.mega-col { min-width: 0; }
.mega-head {
    display: block; padding: 6px 0; margin-bottom: 4px;
    font-size: .9375rem; font-weight: 600; color: var(--ink);
    border-bottom: 1px solid var(--line-2);
}
.mega-head:hover { color: var(--brand); }
.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-list a {
    display: block; padding: 5px 0;
    font-size: .875rem; color: var(--muted);
}
.mega-list a:hover { color: var(--brand); padding-left: 4px; }
.mega-all {
    grid-column: 1 / -1;
    padding-top: 12px; margin-top: 6px;
    border-top: 1px solid var(--line-2);
    font-weight: 500;
}

/* เมนูย่อยแบบทั่วไป */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; top: 100%; left: 0; z-index: 950;
    min-width: 210px; padding: 6px;
    margin: 0; list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-3);
    display: none;
}
.dropdown.open > .dropdown-menu, .dropdown-menu.show { display: block; }
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    font-size: .9rem; color: var(--ink-2);
    border-radius: var(--r-xs);
}
.dropdown-item:hover { background: var(--surface); color: var(--brand); }
.dropdown-divider { height: 1px; margin: 6px 0; background: var(--line-2); }

/* ปุ่มเมนูมือถือ */
.nav-toggle {
    display: none;
    padding: 9px 11px;
    background: none; border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-2); font-size: 1.1rem;
}

/* ลิ้นชักเมนูมือถือ */
.drawer {
    position: fixed; inset: 0 auto 0 0; z-index: 1200;
    width: 300px; max-width: 86vw;
    background: #fff;
    box-shadow: var(--sh-3);
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px; border-bottom: 1px solid var(--line);
}
.drawer-body { padding: 8px 0 24px; }
.drawer-cta { padding: 8px 16px 4px; }
.drawer-link {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    color: var(--ink-2); font-size: .9375rem; font-weight: 500;
}
.drawer-link:hover { background: var(--surface); color: var(--brand); }
.drawer-sub { padding: 2px 0 8px 30px; }
.drawer-sub a { display: block; padding: 7px 0; font-size: .875rem; color: var(--muted); }
.drawer-label {
    padding: 16px 18px 6px;
    font-size: .75rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted-2);
}
.scrim {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(16,36,56,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.scrim.open { opacity: 1; visibility: visible; }


/* ==========================================================================
   11. HERO / SLIDER
   ========================================================================== */
.hero { background: var(--surface); padding: 28px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

.slider { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--brand-50); }
.slider-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.slide { flex: 0 0 100%; min-width: 0; }
.slide img { width: 100%; height: 100%; object-fit: contain; display: block; aspect-ratio: 3/1; background: var(--surface); }
@supports not (aspect-ratio: 1) { .slide img { height: 300px; } }

.slider-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.9); color: var(--ink);
    border: 0; border-radius: 50%;
    box-shadow: var(--sh-2);
    opacity: 0; transition: opacity .2s ease, background .15s ease;
}
.slider:hover .slider-btn { opacity: 1; }
.slider-btn:hover { background: #fff; color: var(--brand); }
.slider-btn.prev { left: 14px; }
.slider-btn.next { right: 14px; }

.slider-dots {
    position: absolute; left: 0; right: 0; bottom: 14px;
    display: flex; justify-content: center; gap: 7px;
}
.slider-dots button {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.6);
    transition: width .2s ease, background .2s ease;
}
.slider-dots button.active { width: 22px; border-radius: var(--r-pill); background: #fff; }

/* แถบจุดเด่นบริการ */
.trust-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    margin-top: 24px;
}
.trust-item {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    background: #fff;
}
.trust-item i {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    color: var(--brand);
    background: var(--brand-50);
    border-radius: var(--r-sm);
}
.trust-item b { display: block; font-size: .9375rem; font-weight: 600; }
.trust-item small { color: var(--muted); }


/* ==========================================================================
   12. CATEGORY TILES
   ========================================================================== */
.cat-tile {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 20px 14px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--ink-2);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cat-tile:hover {
    border-color: var(--brand-100);
    box-shadow: var(--sh-2);
    transform: translateY(-2px);
    color: var(--brand);
}
.cat-tile .ico {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--brand);
    background: var(--brand-50);
    border-radius: 50%;
}
.cat-tile span { font-size: .875rem; font-weight: 500; line-height: 1.4; }


/* ==========================================================================
   13. PRODUCT CARD
   ========================================================================== */
.product-card {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.product-card:hover {
    border-color: var(--brand-100);
    box-shadow: var(--sh-3);
    transform: translateY(-3px);
}

.product-media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--surface);
    overflow: hidden;
}
@supports not (aspect-ratio: 1) { .product-media { height: 220px; } }
.product-media img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform .35s ease;
}
.product-card:hover .product-media img { transform: scale(1.05); }

.product-flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.flag {
    padding: 3px 9px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
    color: #fff; border-radius: var(--r-pill);
}
.flag-new  { background: var(--success); }
.flag-hot  { background: var(--accent); }
.flag-save { background: var(--danger); }

.product-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; gap: 4px; }
.product-brand { font-size: .75rem; font-weight: 500; color: var(--muted-2); text-transform: uppercase; letter-spacing: .03em; }
.product-name {
    font-size: .9rem; font-weight: 500; line-height: 1.45;
    color: var(--ink); margin: 0;
    min-height: 2.6em;
}
.product-card:hover .product-name { color: var(--brand); }

.product-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.product-price { font-size: 1.15rem; font-weight: 700; color: var(--brand-700); letter-spacing: -.01em; }
.product-price .cur { font-size: .8rem; font-weight: 500; color: var(--muted); margin-left: 2px; }
.product-oldprice { font-size: .8125rem; color: var(--muted-2); text-decoration: line-through; }

.product-actions { display: flex; gap: 8px; margin-top: 12px; }
.product-actions .btn { flex: 1; padding: 9px 12px; font-size: .875rem; }


/* ==========================================================================
   14. SECTION
   ========================================================================== */
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 22px;
}
.section-head h2 {
    margin: 0;
    font-size: 1.375rem; font-weight: 600;
    display: flex; align-items: center; gap: 11px;
}
.section-head h2::before {
    content: ""; width: 4px; height: 22px;
    background: var(--brand); border-radius: var(--r-pill);
}
.section-head .more {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .875rem; font-weight: 500; color: var(--brand);
    white-space: nowrap;
}
.section-head .more:hover { gap: 9px; }
.section-sub { margin: -14px 0 22px; color: var(--muted); font-size: .9375rem; }

.empty-state { padding: 60px 20px; text-align: center; color: var(--muted); }
.empty-state i { font-size: 2.5rem; color: var(--line); display: block; margin-bottom: 14px; }


/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer { background: var(--brand-700); color: rgba(255,255,255,.82); font-size: .9rem; }
.footer-main { padding: 44px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.site-footer h5 {
    margin: 0 0 14px;
    font-size: .9375rem; font-weight: 600; color: #fff;
}
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-about img { height: 38px; margin-bottom: 14px; background: #fff; padding: 6px 10px; border-radius: var(--r-xs); }
.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li { display: flex; gap: 11px; margin-bottom: 11px; line-height: 1.55; }
.footer-contact i { flex-shrink: 0; margin-top: 4px; color: rgba(255,255,255,.55); width: 15px; }
.footer-bottom {
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,.13);
    font-size: .8125rem; color: rgba(255,255,255,.6);
}
.footer-bottom .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }


/* ==========================================================================
   16. MODAL
   ทำงานร่วมกับ evereng.js ที่จำลอง API .modal('show'/'hide') ของ Bootstrap ไว้
   ========================================================================== */
.modal {
    position: fixed; inset: 0; z-index: 1000001;
    display: none;
    overflow-y: auto;
    padding: 24px 16px;
    background: rgba(16,36,56,.5);
    -webkit-overflow-scrolling: touch;
}
.modal.show { display: block; }
.modal-dialog {
    max-width: 540px;
    margin: 4vh auto;
    animation: modal-in .22s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.modal-lg .modal-dialog { max-width: 860px; }
.modal-content {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    overflow: hidden;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}
.modal-title { margin: 0; font-size: 1.05rem; font-weight: 600; }
.modal-body   { padding: 22px; }
.modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.close, .close-btn {
    padding: 0; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; line-height: 1;
    color: var(--muted); background: none; border: 0; border-radius: var(--r-xs);
}
.close:hover, .close-btn:hover { background: var(--surface); color: var(--ink); }
body.modal-open { overflow: hidden; }


/* ==========================================================================
   17. CAROUSEL (รองรับ markup เดิมที่ยังไม่ได้รื้อ)
   ========================================================================== */
.carousel { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-item { display: none; width: 100%; }
.carousel-item.active { display: block; }
.carousel-item img { width: 100%; object-fit: cover; }
.carousel-control-prev, .carousel-control-next {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.9); border-radius: 50%; box-shadow: var(--sh-2);
    opacity: 0; transition: opacity .2s ease;
}
.carousel:hover .carousel-control-prev, .carousel:hover .carousel-control-next { opacity: 1; }
.carousel-control-prev { left: 14px; }
.carousel-control-next { right: 14px; }
.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 10px; height: 10px;
    border-top: 2px solid var(--ink); border-right: 2px solid var(--ink);
}
.carousel-control-prev-icon { transform: rotate(-135deg); margin-left: 3px; }
.carousel-control-next-icon { transform: rotate(45deg); margin-right: 3px; }
.carousel-indicators {
    position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
    display: flex; justify-content: center; gap: 7px;
    list-style: none; margin: 0; padding: 0;
}
.carousel-indicators li {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.6); cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.carousel-indicators li.active { width: 22px; border-radius: var(--r-pill); background: #fff; }
.carousel-caption { display: none !important; }


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (min-width: 768px) { .d-md-block { display: block !important; } }

@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 991px) {
    :root { --gap: 18px; }
    .main-nav { display: none; }
    .nav-toggle { display: inline-flex; align-items: center; }
    .header-main { gap: 14px; min-height: 64px; }
    .brand img { height: 34px; }
    .topbar-info span:not(:first-child) { display: none; }
}

@media (max-width: 767px) {
    body { font-size: 14.5px; }
    .page-section { padding: 32px 0; }
    .container { padding-inline: 16px; }

    /* ค้นหาย้ายลงมาเป็นแถวของตัวเองบนมือถือ */
    .header-main { flex-wrap: wrap; padding-bottom: 12px; }
    .header-search { order: 3; flex-basis: 100%; max-width: none; }

    .grid-products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .grid-cats { grid-template-columns: repeat(3, 1fr); gap: 10px; }

    .product-body { padding: 12px; }
    .product-name { font-size: .85rem; min-height: 2.5em; }
    .product-price { font-size: 1.05rem; }
    .cat-tile { padding: 14px 8px; }
    .cat-tile .ico { width: 44px; height: 44px; font-size: 1.15rem; }

    .section-head { margin-bottom: 16px; }
    .section-head h2 { font-size: 1.15rem; }

    .slide img { aspect-ratio: 5/2; }
    .slider-btn { display: none; }

    .trust-bar { grid-template-columns: 1fr 1fr; margin-top: 18px; }
    .trust-item { padding: 14px; gap: 10px; flex-direction: column; align-items: flex-start; }

    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-bottom .container { justify-content: center; text-align: center; }

    .modal-dialog { margin: 0 auto; }
    .modal { padding: 12px; }

    /* กริดเดิมของหน้าที่ยังไม่ได้รื้อ: บีบเป็นคอลัมน์เดียวให้อ่านได้ */
    .text-right { text-align: left !important; }
}

@media (max-width: 400px) {
    .grid-cats { grid-template-columns: repeat(2, 1fr); }
}

@media print {
    .topbar, .site-header, .main-nav, .site-footer, .nav-toggle, .drawer, .scrim { display: none !important; }
    body { background: #fff; }
}


/* ==========================================================================
   19. หน้าเนื้อหา (เกี่ยวกับเรา / วิธีการสั่งซื้อ ฯลฯ)
   ========================================================================== */

/* --- แถบหัวหน้า --- */
.page-hero {
    position: relative;
    padding: 44px 0;
    background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 100%);
    color: #fff;
    overflow: hidden;
}
.page-hero::after {
    content: "";
    position: absolute; right: -80px; top: -80px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
.page-hero h1 { color: #fff; font-size: 2rem; margin: 0 0 12px; }
.page-hero p  { color: rgba(255,255,255,.88); font-size: 1.03rem; margin: 0; max-width: 56ch; }
.page-hero .eyebrow {
    display: inline-block; margin-bottom: 12px;
    padding: 5px 13px;
    font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
    color: #fff; background: rgba(255,255,255,.16);
    border-radius: var(--r-pill);
}
.page-hero-art { display: flex; justify-content: center; }
.page-hero-art svg { width: 100%; max-width: 380px; height: auto; }

/* เส้นทางนำทาง */
.crumbs { font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 14px; }
.crumbs a { color: rgba(255,255,255,.9); }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 7px; opacity: .55; }

/* --- เนื้อความยาว (ครอบเนื้อหาที่แอดมินแก้เองได้) --- */
.prose { font-size: 1rem; line-height: 1.85; color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child  { margin-bottom: 0; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.3rem; margin: 1.6em 0 .6em; }
.prose h3 { font-size: 1.1rem; margin: 1.4em 0 .5em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose img { border-radius: var(--r); margin: 1em 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose strong, .prose b { color: var(--ink); }
/* ล้างสไตล์ที่ตัวแก้ไข WYSIWYG ฝังมา ให้คุมด้วยดีไซน์ระบบแทน */
.prose [style*="font-size"] { font-size: inherit !important; }
.prose [style*="color: rgb(51, 51, 51)"],
.prose [style*="color:#333"] { color: inherit !important; }
.prose [style*="font-family"] { font-family: inherit !important; }

/* --- สถิติ --- */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.stat { padding: 22px 18px; text-align: center; background: #fff; }
.stat b {
    display: block;
    font-size: 1.85rem; font-weight: 700; line-height: 1.1;
    color: var(--brand); letter-spacing: -.02em;
}
.stat span { display: block; margin-top: 5px; font-size: .875rem; color: var(--muted); }

/* --- การ์ดจุดเด่น (พันธกิจ / ธุรกิจ) --- */
.feature-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.feature-card:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); transform: translateY(-2px); }
.feature-card .art {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-50);
    border-radius: var(--r-sm);
}
.feature-card .art svg { width: 32px; height: 32px; }
.feature-card h3 { margin: 0; font-size: 1.03rem; }
.feature-card p  { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.65; }
.feature-card .tag-en {
    font-size: .75rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--accent);
}

/* --- ขั้นตอน (วิธีการสั่งซื้อ) --- */
.steps { display: grid; gap: 18px; counter-reset: step; }
.step {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 22px; align-items: center;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute; top: -10px; left: -10px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem; font-weight: 700;
    color: #fff; background: var(--brand);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: var(--sh-1);
}
.step-art {
    width: 96px; height: 84px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-50);
    border-radius: var(--r-sm);
}
.step-art svg { width: 62px; height: 62px; }
.step h3 { margin: 0 0 5px; font-size: 1.05rem; }
.step p  { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.7; }
.step .note {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 9px; padding: 5px 11px;
    font-size: .8125rem; font-weight: 500;
    color: var(--brand-700); background: var(--brand-50);
    border-radius: var(--r-pill);
}

/* --- กล่องข้อมูล / เตือน --- */
.note-box {
    display: flex; gap: 14px;
    padding: 18px 20px;
    background: var(--accent-50);
    border: 1px solid #F7DCC2;
    border-left: 4px solid var(--accent);
    border-radius: var(--r-sm);
}
.note-box i { flex-shrink: 0; margin-top: 3px; font-size: 1.1rem; color: var(--accent-600); }
.note-box h4 { margin: 0 0 5px; font-size: .95rem; }
.note-box p  { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.7; }

/* --- รายชื่อลูกค้า --- */
.client-group { margin-bottom: 26px; }
.client-group h3 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 12px; font-size: 1rem;
}
.client-group h3::before {
    content: ""; width: 3px; height: 17px;
    background: var(--accent); border-radius: var(--r-pill);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    padding: 6px 13px;
    font-size: .8125rem; font-weight: 500;
    color: var(--ink-2); background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}

/* --- ไทม์ไลน์ --- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
    content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
    width: 2px; background: linear-gradient(var(--brand-100), var(--line));
}
.timeline-item { position: relative; padding-bottom: 24px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: ""; position: absolute; left: -30px; top: 6px;
    width: 16px; height: 16px;
    background: #fff; border: 3px solid var(--brand);
    border-radius: 50%;
}
.timeline-item b { display: block; color: var(--brand); font-size: .9rem; }
.timeline-item p { margin: 3px 0 0; color: var(--muted); font-size: .9375rem; }

/* --- คำถามพบบ่อย --- */
.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
.faq-item summary {
    padding: 15px 18px;
    font-size: .95rem; font-weight: 500;
    cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; flex-shrink: 0;
    font-size: 1.25rem; font-weight: 400; color: var(--muted-2);
    transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { background: var(--surface); color: var(--brand); }
.faq-item .faq-body {
    padding: 0 18px 16px;
    font-size: .9rem; color: var(--muted); line-height: 1.75;
}

@media (max-width: 991px) {
    .page-hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .page-hero-art { order: -1; }
    .page-hero-art svg { max-width: 280px; }
}
@media (max-width: 767px) {
    .page-hero { padding: 30px 0; }
    .page-hero h1 { font-size: 1.5rem; }
    .page-hero p { font-size: .95rem; }
    .step { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
    .step-art { width: 74px; height: 66px; }
    .step-art svg { width: 48px; height: 48px; }
    .stat b { font-size: 1.5rem; }
    .prose { font-size: .95rem; line-height: 1.8; }
}


/* ==========================================================================
   20. แบ่งหน้า (pagination)
   ========================================================================== */
.pager { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pager a {
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    font-size: .875rem; font-weight: 500;
    color: var(--ink-2); background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.pager a.active {
    background: var(--brand); border-color: var(--brand); color: #fff;
    pointer-events: none;
}
.pager .gap { padding: 0 4px; color: var(--muted-2); }

@media (max-width: 767px) {
    .pager a { min-width: 32px; height: 32px; padding: 0 8px; font-size: .8125rem; }
}


/* ==========================================================================
   21. Compat — component เดิมที่หน้ายังไม่ได้รื้อใช้อยู่
   (มุมมองแบบตารางในหน้ารวมสินค้า ฯลฯ) จัดสไตล์ให้เข้าชุดกับดีไซน์ใหม่
   ========================================================================== */

/* ป้าย HOT / NEW แบบเดิม */
.card-libbon { display: inline-flex; gap: 5px; vertical-align: middle; }
.libbon {
    display: inline-flex; align-items: center;
    padding: 2px 9px;
    font-size: .6875rem; font-weight: 700; line-height: 1.6;
    letter-spacing: .02em;
    color: #fff; background: var(--muted);
    border-radius: var(--r-pill);
}
.libbon.hot { background: var(--accent); }
.libbon.new { background: var(--success); }

/* กล่องราคาแบบเดิม */
.product-price-box, .product-price-box-inner { display: block; }
.product-price-box-inner b { font-size: 1.05rem; font-weight: 700; color: var(--brand-700) !important; }
.product-price-box-inner del { color: var(--muted-2); }

.save-box {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--danger);
}
.save-box small { color: var(--muted); }
.save-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    font-size: .6875rem; font-weight: 700;
    color: #fff; background: var(--danger);
    border-radius: var(--r-pill);
}

/* กล่องเพิ่มลงตะกร้าในมุมมองตาราง */
.product-add-cart, .product-add-cart-table { display: block; }
.product-add-cart-table .input-group { flex-wrap: nowrap; align-items: stretch; gap: 0; }
.product-add-cart-table .input-group .btn { margin-left: 8px; white-space: nowrap; border-radius: var(--r-sm); }
.product-add-cart-table .txtQty { max-width: 68px; text-align: center; }
.product-add-cart-table .input-group-text { cursor: pointer; }
.product-add-cart-table .input-group-text:hover { background: var(--brand-50); color: var(--brand); }

/* รูปในการ์ดแบบเดิม */
.card-image { position: relative; display: block; background: var(--surface); overflow: hidden; }
.card-image img { width: 100%; height: 200px; object-fit: contain; padding: 10px; }


/* ปรับแถวปุ่มในการ์ดสินค้า ให้ตัวนับจำนวนกับปุ่มใส่ตะกร้าอยู่ในบรรทัดเดียวได้
   (การ์ดกว้างราว 210-240px เมื่อแสดง 4-5 คอลัมน์) */
.product-actions .qty-box { flex: 0 0 auto; }
.product-actions .qty-box .btn-number { width: 28px; font-size: .8rem; }
.product-actions .qty-box .form-control { width: 38px; padding-inline: 2px; font-size: .8125rem; }
.product-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 8px;
    font-size: .8125rem;
    white-space: nowrap;
    gap: 5px;
}
.product-actions .btn i { font-size: .85rem; }

@media (max-width: 480px) {
    /* จอแคบมาก: ให้ปุ่มลงบรรทัดใหม่เต็มความกว้าง อ่านง่ายกว่าบีบให้อยู่บรรทัดเดียว */
    .product-actions { flex-wrap: wrap; }
    .product-actions .qty-box { flex: 1 1 100%; justify-content: center; }
    .product-actions .qty-box .form-control { flex: 1; width: auto; }
    .product-actions .btn { flex: 1 1 100%; }
}


/* ปุ่มไอคอนล้วน (ใส่ตะกร้าในการ์ดสินค้า) — ข้อความยาวทำให้ตกบรรทัด */
.btn-icon {
    flex: 0 0 auto !important;
    width: 42px;
    padding: 9px 0 !important;
    gap: 0 !important;
    margin-left: auto;          /* ดันไปชิดขวา ให้เว้นช่องกับตัวนับจำนวน */
}
.btn-icon i { font-size: 1rem !important; }

/* ตัวนับจำนวนคงขนาดกะทัดรัด ไม่ยืดจนดูโล่ง */
.product-actions .qty-box { flex: 0 0 auto; }
.product-actions .qty-box .form-control { width: 42px; }

@media (max-width: 480px) {
    /* จอแคบ: ตัวนับยืดได้ ปุ่มยังเป็นไอคอนชิดขวา */
    .product-actions { flex-wrap: nowrap; }
    .product-actions .qty-box { flex: 1 1 auto; }
    .product-actions .qty-box .form-control { flex: 1; width: auto; }
}


/* ==========================================================================
   22. ปุ่มสลับมุมมอง (การ์ด / รายการ) ในหน้ารวมสินค้า
   ความสูงตั้งด้วย --control-h ให้เท่ากับช่อง "เรียงลำดับโดย" ข้าง ๆ
   ========================================================================== */
:root { --control-h: 38px; }

.view-toggle {
    display: inline-flex;
    height: var(--control-h);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.view-toggle .selected-view {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: .95rem;
    transition: background .15s ease, color .15s ease;
}
.view-toggle .selected-view + .selected-view { border-left: 1px solid var(--line); }
.view-toggle .selected-view:hover { background: var(--surface); color: var(--brand); }
.view-toggle .selected-view.active { background: var(--brand); color: #fff; }

/* ช่อง "เรียงลำดับโดย" ให้สูงเท่ากันพอดี */
.input-group.input-group-sm { height: var(--control-h); }
.input-group.input-group-sm > .form-control,
.input-group.input-group-sm .input-group-text {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}
.input-group.input-group-sm .input-group-text { white-space: nowrap; }

@media (max-width: 767px) {
    .view-toggle { margin-bottom: 10px; }
}


/* ==========================================================================
   23. หน้ารายละเอียดสินค้า
   ========================================================================== */
.pdp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* --- แกลเลอรีรูป --- */
.pdp-gallery { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; }
/* มีรูปเดียว ไม่มีแถบรูปย่อ ให้รูปหลักเต็มความกว้าง */
.pdp-gallery.is-single { grid-template-columns: minmax(0, 1fr); }
.pdp-thumbs {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 460px; overflow-y: auto;
    scrollbar-width: thin;
}
.pdp-thumb {
    flex: 0 0 auto;
    width: 74px; height: 74px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb:hover { border-color: var(--brand-100); }
.pdp-thumb.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-50); }

.pdp-main {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
@supports not (aspect-ratio: 1) { .pdp-main { height: 460px; } }
.pdp-main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp-main .product-flags { top: 14px; left: 14px; }

/* --- แผงข้อมูล/สั่งซื้อ --- */
.pdp-brand {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .8125rem; font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase; color: var(--brand);
}
.pdp-title { margin: 8px 0 6px; font-size: 1.5rem; line-height: 1.35; }
.pdp-sku { font-size: .875rem; color: var(--muted); margin-bottom: 14px; }
.pdp-sku b { color: var(--ink-2); font-weight: 500; }
.pdp-short { color: var(--muted); line-height: 1.75; margin-bottom: 18px; }

.pdp-pricebox {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
    padding: 18px 20px;
    background: var(--brand-50);
    border-radius: var(--r);
    margin-bottom: 20px;
}
.pdp-price { font-size: 1.9rem; font-weight: 700; color: var(--brand-700); letter-spacing: -.02em; line-height: 1.1; }
.pdp-price .cur { font-size: .95rem; font-weight: 500; color: var(--muted); margin-left: 4px; }
.pdp-oldprice { font-size: 1rem; color: var(--muted-2); text-decoration: line-through; }
.pdp-save {
    padding: 3px 10px;
    font-size: .8125rem; font-weight: 700;
    color: #fff; background: var(--danger);
    border-radius: var(--r-pill);
}

.pdp-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.pdp-buy .qty-box { height: 46px; }
.pdp-buy .qty-box .btn-number { width: 40px; }
.pdp-buy .qty-box .form-control { width: 58px; font-size: 1rem; }
.pdp-buy .btn { height: 46px; padding-inline: 28px; font-size: .95rem; }

.pdp-perks { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.pdp-perk { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; }
.pdp-perk i {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: var(--brand); background: var(--brand-50);
    border-radius: var(--r-xs);
}
.pdp-perk b { display: block; font-size: .9rem; }
.pdp-perk span { color: var(--muted); font-size: .85rem; }

/* --- ตารางคุณสมบัติ --- */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td {
    padding: 12px 16px;
    text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line);
    font-size: .9375rem;
}
.spec-table th {
    width: 38%;
    font-weight: 500; color: var(--muted);
    background: var(--surface);
}
.spec-table td { color: var(--ink-2); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

/* --- ปุ่มดาวน์โหลดเอกสาร --- */
.doc-link {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 13px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.doc-link:hover { border-color: var(--brand); box-shadow: var(--sh-1); color: var(--brand); }
.doc-link i { font-size: 1.3rem; color: var(--danger); }
.doc-link b { display: block; font-size: .9375rem; }
.doc-link small { color: var(--muted); }

@media (max-width: 991px) {
    .pdp-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
    .pdp-gallery { grid-template-columns: 1fr; }
    .pdp-thumbs {
        flex-direction: row; order: 2;
        max-height: none; overflow-x: auto; padding-bottom: 4px;
    }
    .pdp-main { order: 1; }
    .pdp-title { font-size: 1.2rem; }
    .pdp-price { font-size: 1.5rem; }
    .pdp-buy .btn { flex: 1; padding-inline: 16px; }
    .spec-table th { width: 45%; }
    .spec-table th, .spec-table td { padding: 10px 12px; font-size: .875rem; }
}


/* ==========================================================================
   24. ตะกร้าสินค้า
   ========================================================================== */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }

.cart-items { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cart-head {
    padding: 14px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-size: .875rem; color: var(--muted);
}

.cart-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto 120px 40px;
    gap: 18px; align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line-2);
}
.cart-row:last-child { border-bottom: 0; }

.cart-thumb {
    display: block;
    width: 88px; height: 88px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }

.cart-name { margin: 0 0 5px; font-size: .95rem; font-weight: 500; line-height: 1.45; color: var(--ink); }
.cart-row a:hover .cart-name { color: var(--brand); }
.cart-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem; color: var(--muted); margin-bottom: 5px; }
.cart-unit { font-size: .8125rem; color: var(--muted); }

.cart-qty .qty-box .form-control { width: 46px; }
.cart-line-total { text-align: right; font-size: .9375rem; color: var(--muted); white-space: nowrap; }
.cart-line-total b { display: block; font-size: 1.05rem; color: var(--brand-700); }

.cart-remove {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: var(--r-sm);
    color: var(--muted-2); font-size: 1rem;
    transition: background .15s ease, color .15s ease;
}
.cart-remove:hover { background: var(--danger-50); color: var(--danger); }

/* --- กล่องสรุป --- */
.cart-summary { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; }
.sum-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 0;
    font-size: .9375rem; color: var(--muted);
}
.sum-row b { color: var(--ink); font-weight: 600; }
.sum-total {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-top: 14px; margin-top: 6px;
    border-top: 1px solid var(--line);
    font-size: 1rem; font-weight: 600;
}
.sum-total b { font-size: 1.35rem; color: var(--brand-700); letter-spacing: -.01em; }
.cart-perks { display: grid; gap: 14px; padding: 18px 20px; background: var(--surface); border-radius: var(--r); }

@media (max-width: 991px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
}
@media (max-width: 767px) {
    .cart-row {
        grid-template-columns: 72px minmax(0, 1fr) 36px;
        grid-template-areas:
            "thumb info remove"
            "thumb qty  total";
        gap: 10px 14px;
        padding: 16px;
    }
    .cart-thumb { grid-area: thumb; width: 72px; height: 72px; }
    .cart-info  { grid-area: info; }
    .cart-qty   { grid-area: qty; }
    .cart-line-total { grid-area: total; text-align: right; }
    .cart-remove { grid-area: remove; }
    .cart-line-total b { font-size: .95rem; }
}


/* ==========================================================================
   25. ขั้นตอนสั่งซื้อ (checkout)
   ========================================================================== */
.steps-bar {
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0 0 24px; padding: 0;
}
.steps-bar li {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: .875rem; color: var(--muted);
}
.steps-bar li span {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
    color: var(--muted); background: var(--surface);
    border-radius: 50%;
}
.steps-bar li.done { color: var(--success); border-color: #CBE9D7; background: var(--success-50); }
.steps-bar li.done span { background: var(--success); color: #fff; }
.steps-bar li.current { color: #fff; background: var(--brand); border-color: var(--brand); font-weight: 500; }
.steps-bar li.current span { background: rgba(255,255,255,.25); color: #fff; }

/* ตัวเลือกวิธีชำระเงิน */
.pay-opt {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-weight: 400;
    transition: border-color .15s ease, background .15s ease;
}
.pay-opt:hover { border-color: var(--brand-100); background: var(--brand-50); }
.pay-opt input { margin-top: 3px; }
.pay-opt b { display: block; font-size: .9375rem; }
.pay-opt small { color: var(--muted); }

/* ตารางฟอร์ม 2 คอลัมน์ */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.req { color: var(--danger); }

/* รายการย่อในกล่องสรุป */
.co-items {
    max-height: 220px; overflow-y: auto;
    margin-bottom: 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
}
.co-item {
    display: grid; grid-template-columns: 34px minmax(0,1fr) auto;
    gap: 8px; align-items: baseline;
    padding: 5px 0;
    font-size: .8125rem;
}
.co-item-qty  { color: var(--brand); font-weight: 600; }
.co-item-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-item-price{ color: var(--muted); white-space: nowrap; }

@media (max-width: 767px) {
    .steps-bar li { flex: 1; justify-content: center; padding: 9px 10px; font-size: .78rem; }
    .steps-bar li span { width: 19px; height: 19px; font-size: .68rem; }
}


/* กล่องเพิ่มลงตะกร้า */
.atc-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: start; }
.atc-media {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
@supports not (aspect-ratio: 1) { .atc-media { height: 180px; } }
.atc-media img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media (max-width: 560px) {
    .atc-grid { grid-template-columns: 1fr; gap: 16px; }
    .atc-media { max-width: 190px; margin: 0 auto; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 1 auto; }
}


/* ==========================================================================
   26. ติดต่อเรา
   ========================================================================== */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list i {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    color: var(--brand); background: var(--brand-50);
    border-radius: var(--r-xs);
}
.contact-list span { display: block; font-size: .9rem; color: var(--ink-2); line-height: 1.6; }
.contact-list b { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); }

.contact-map { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 767px) { .contact-map { height: 300px; } }


/* ==========================================================================
   27. ช่องกรอกจำนวน — ซ่อนลูกศร spinner ของเบราว์เซอร์
   ลูกศรกินพื้นที่จนตัวเลขถูกบีบหายไป (เห็นชัดในหน้าตะกร้า)
   ========================================================================== */
.qty-box input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.qty-box input[type="number"]::-webkit-outer-spin-button,
.qty-box input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-box .form-control { padding-inline: 4px; text-align: center; }

/* กว้างพอให้เห็นตัวเลข 3 หลัก */
.cart-qty .qty-box .form-control { width: 56px; }
.pdp-buy .qty-box .form-control  { width: 62px; }
.product-actions .qty-box .form-control { width: 44px; }


/* ==========================================================================
   28. บัญชีผู้ใช้ / สมัครสมาชิก
   ========================================================================== */
.auth-wrap { max-width: 620px; margin: 0 auto; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { font-size: 1.5rem; margin: 0 0 6px; }
.auth-head p { margin: 0; color: var(--muted); font-size: .9375rem; }
.auth-foot {
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center; font-size: .9rem; color: var(--muted);
}

.profile-id { display: flex; align-items: center; gap: 14px; }
.profile-avatar {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: var(--brand); background: var(--brand-50);
    border-radius: 50%;
}
.profile-id b { display: block; font-size: .95rem; }

.addr-list { display: grid; gap: 10px; }
.addr-item {
    display: grid; grid-template-columns: 30px minmax(0,1fr) auto;
    gap: 14px; align-items: center;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.addr-no {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
    color: var(--brand); background: var(--brand-50);
    border-radius: 50%;
}
@media (max-width: 560px) {
    .addr-item { grid-template-columns: 26px minmax(0,1fr); }
    .addr-item .btn { grid-column: 2; justify-self: start; }
}


/* ==========================================================================
   29. ใบสั่งซื้อ / หน้ายืนยันคำสั่งซื้อสำเร็จ
   ========================================================================== */
.order-banner {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 22px; margin-bottom: 22px;
    border-radius: var(--r);
    font-size: .95rem;
}
.order-banner i { font-size: 1.4rem; margin-top: 1px; }
.order-banner b { display: block; font-size: 1.05rem; }
.order-banner.ok   { background: var(--success-50); border: 1px solid #CBE9D7; color: #1d6b3e; }
.order-banner.ok i { color: var(--success); }
.order-banner.wait { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); }
.order-banner.wait i { color: var(--brand); }

.invoice-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 18px; margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.invoice-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px; margin-bottom: 18px;
}
.lbl { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .03em;
       text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
.po-code { font-size: 1.05rem; letter-spacing: .02em; color: var(--brand-700); }
.invoice-to { padding: 16px 18px; background: var(--surface); border-radius: var(--r-sm); font-size: .9375rem; }
.invoice-total { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }

.inv-thumb {
    width: 52px; height: 52px; padding: 4px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs);
}
.inv-thumb img { width: 100%; height: 100%; object-fit: contain; }

.bank-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; margin-bottom: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.bank-card img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.bank-card b { display: block; font-size: 1.05rem; letter-spacing: .04em; color: var(--brand-700); }
.bank-card span { display: block; font-size: .85rem; color: var(--muted); }

/* สรุปค่าจัดส่งกับร้านหลังสั่งซื้อ (CheckOut / CheckOutSuccess) */
.quote-steps { margin: 10px 0 0; padding-left: 1.25em; font-size: .9rem; color: var(--ink-2); line-height: 1.7; }
.quote-steps li + li { margin-top: 4px; }
.quote-steps small { color: var(--muted); }
.next-step { border: 2px solid var(--brand-100); }
.next-step .btn-line { color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.po-copy {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--brand-50); border: 1px dashed var(--brand-100); border-radius: var(--r-sm);
}
.po-copy .lbl { width: 100%; font-size: .8rem; color: var(--muted); }
.po-copy b { font-size: 1.25rem; letter-spacing: .04em; color: var(--brand-700); margin-right: auto; }
.callback-note {
    display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px;
    background: var(--surface-2); border-radius: var(--r-sm); font-size: .88rem; color: var(--ink-2); line-height: 1.6;
}
.callback-note i { color: var(--accent-600); margin-top: 3px; }

@media (max-width: 767px) {
    .invoice-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .invoice-head .text-right { text-align: left !important; }
}

/* ==========================================================================
   30. ปุ่มติดต่อเราแบบลอย (Component/contact-widget.php)
   ========================================================================== */
.cw {
    position: fixed; right: 20px; bottom: 20px; z-index: 900;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.cw-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.cw-list[hidden] { display: none; }
.cw.is-open .cw-list li { animation: cw-in .18s ease both; }
.cw.is-open .cw-list li:nth-last-child(2) { animation-delay: .03s; }
.cw.is-open .cw-list li:nth-last-child(3) { animation-delay: .06s; }
.cw.is-open .cw-list li:nth-last-child(4) { animation-delay: .09s; }
.cw.is-open .cw-list li:nth-last-child(5) { animation-delay: .12s; }
@keyframes cw-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cw-item, .cw-toggle {
    display: flex; align-items: center; gap: 16px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--ink); text-decoration: none;
}
.cw-item:hover { color: var(--ink); }

/* ป้ายข้อความสีขาวทรงแคปซูลพร้อมหางชี้ไปที่ไอคอน */
.cw-label {
    position: relative;
    padding: 7px 16px;
    background: #fff; border-radius: 999px;
    box-shadow: var(--sh-3);
    font-size: .875rem; font-weight: 500; white-space: nowrap;
}
.cw-label::after {
    content: ""; position: absolute; top: 50%; right: -9px; margin-top: -8px;
    border-top: 8px solid transparent; border-bottom: 8px solid transparent;
    border-left: 10px solid #fff;
}

.cw-icon {
    flex: 0 0 auto;
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px;
    box-shadow: var(--sh-3);
    transition: transform .15s ease, filter .15s ease;
}
.cw-item:hover .cw-icon, .cw-toggle:hover .cw-icon { transform: scale(1.06); filter: brightness(1.06); }
.cw-item:focus-visible .cw-icon, .cw-toggle:focus-visible .cw-icon { outline: 3px solid var(--brand-100); outline-offset: 2px; }

.cw-phone    { background: var(--brand); }
.cw-line     { background: #06C755; }
.cw-facebook { background: #1877F2; }
.cw-tiktok   { background: #111; }
.cw-youtube  { background: #FF0000; }
.cw-main     { width: 58px; height: 58px; font-size: 26px; background: var(--brand); }

/* ปุ่มหลัก: ปิดอยู่แสดงไอคอนแชท เปิดแล้วเป็นกากบาท และซ่อนป้าย "ติดต่อเรา" */
/* ใส่ .cw นำหน้า เพื่อให้ชนะ .fa { display:inline-block } ของ Font Awesome */
.cw .cw-ico-close { display: none; }
.cw.is-open .cw-ico-open  { display: none; }
.cw.is-open .cw-ico-close { display: inline-block; }
.cw.is-open .cw-hint { display: none; }

@media (max-width: 767px) {
    .cw { right: 14px; bottom: 14px; }
    .cw-hint { display: none; }          /* จอเล็ก ไม่ให้ป้ายบังเนื้อหา */
    .cw-icon { width: 46px; height: 46px; font-size: 20px; }
    .cw-main { width: 54px; height: 54px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .cw.is-open .cw-list li { animation: none; }
}
@media print { .cw { display: none !important; } }

/* หัวข้อหลักหน้ารายการสินค้า (h1 สำหรับ SEO) */
.list-title { font-size: 1.25rem; font-weight: 600; color: var(--brand-700); margin: 6px 0 0; line-height: 1.4; }

/* ราคาสินค้าเป็นราคายังไม่รวม VAT (ต.ค. 2569) */
.vat-tag  { margin-left: 4px; font-size: .68em; font-weight: 600; color: var(--muted); vertical-align: middle; letter-spacing: .02em; }
.vat-note { display: block; flex-basis: 100%; width: 100%; margin-top: 4px; font-size: .8125rem; font-weight: 400; color: var(--muted); }

/* ช่องดักบอทในฟอร์มติดต่อ : ซ่อนจากคน (ไม่ใช้ display:none เพราะบอทบางตัวข้ามช่องที่ซ่อนแบบนั้น) */
.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }