/* ==========================================================================
   ALL DISCOUNT - ธีมแบรนด์ น้ำเงินกรมท่า + ทอง (ให้เข้ากับโลโก้)
   โหลดต่อจาก style.css

   เทมเพลตสร้างสีทั้งเว็บจาก "ตัวแปรกลาง" ใน style.css ไม่ได้เขียนสีตรง rule
   ไฟล์นี้จึงเปลี่ยนที่ตัวแปรเป็นหลัก แล้วค่อยเขียนทับเฉพาะจุดที่ตัวแปรเอื้อมไม่ถึง
   ========================================================================== */

:root,
html.light-mode,
html.dark-mode {
    /* ---- สเกลสีที่ดูดมาจากโลโก้ ---- */
    --ad-navy-900: #00112B;
    --ad-navy-800: #001A3D;
    --ad-navy-700: #002450;
    --ad-navy-600: #003066;
    --ad-navy-500: #004890;
    --ad-navy-400: #0A5FC0;
    --ad-sky-200: #9DC3EA;

    --ad-gold-100: #F7E9C0;
    --ad-gold-300: #F0D07A;
    --ad-gold-500: #D8A848;
    --ad-gold-600: #C1902F;
    --ad-gold-700: #A87C24;

    --ad-ink: #EAF2FB;        /* ตัวหนังสือบนพื้นน้ำเงิน */
    --ad-ink-dim: #A9C4E4;
    --ad-ink-dark: #14263F;   /* ตัวหนังสือบนการ์ดขาว */
    --ad-hairline: rgba(216, 168, 72, .22);
    --ad-hairline-soft: rgba(157, 195, 234, .16);

    /* ---- ตัวแปรกลางของเทมเพลต ---- */
    --finwallapp-theme-color: #D8A848;
    --finwallapp-theme-color-grad-1: #F0D07A;
    --finwallapp-theme-color-grad-2: #D8A848;
    --finwallapp-theme-color-grad-3: #A87C24;

    --finwallapp-theme-text: #ffffff;
    --finwallapp-theme-text-primary: #EAF2FB;
    --finwallapp-theme-text-secondary: #A9C4E4;
    --finwallapp-theme-text-secondary-light: #C7DAF0;
    --finwallapp-theme-bordercolor: rgba(216, 168, 72, .22);

    --finwallapp-header: transparent;
    --finwallapp-header-active: #001A3D;
    --finwallapp-footer: #001A3D;
    --finwallapp-sidebar: #002450;

    /* การ์ดคงพื้นขาวไว้ตามเดิม (CSS รายหน้าเขียนพื้นขาว/อักษรเข้มไว้เยอะ
       ถ้าเปลี่ยนการ์ดเป็นน้ำเงินจะได้การ์ดคนละสีปนกันทั้งเว็บ) */
    --finwallapp-card-color: #ffffff;
    --finwallapp-card-text: #14263F;

    --finwallapp-page-bg-1: #002450;
    --finwallapp-page-bg-2: #001A3D;
    --finwallapp-page-bg-3: #00112B;
    --finwallapp-page-text: #EAF2FB;
    --finwallapp-page-link: #F0D07A;
}

/* ==========================================================================
   1. พื้นหลังหน้าเว็บ
   ========================================================================== */

body,
.loader-wrap,
.theme-light-radial-gradient {
    background: var(--ad-navy-800);
    background: radial-gradient(ellipse at 30% 22%,
            var(--ad-navy-600) 0%,
            var(--ad-navy-800) 46%,
            var(--ad-navy-900) 100%);
    background-attachment: fixed;
    color: var(--ad-ink);
}

/* ตัวหนังสือที่ลอยอยู่บนพื้นน้ำเงินตรงๆ */
body > main,
main .row > .col,
h1, h2, h3, h4, h5, h6 {
    color: inherit;
}

.text-secondary {
    color: var(--ad-ink-dim) !important;
}

.text-muted {
    color: var(--ad-ink-dim) !important;
}

hr {
    border-color: var(--ad-hairline);
    opacity: 1;
}

/* ==========================================================================
   2. พื้นผิวสีขาว - บังคับให้ตัวหนังสือกลับมาเข้ม
      (body เป็นสีอ่อนแล้ว ถ้าไม่ดึงกลับ ตัวหนังสือในการ์ดจะขาวบนขาว)
   ========================================================================== */

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item,
.toast,
.popover,
.accordion-body,
.accordion-button,
.trust-strip,
.news-card,
.notification-card,
.empty-notifications,
.certi-item,
.info-badge,
.payout-info,
.trade-action,
#chart-container {
    color: var(--ad-ink-dark);
}

.card .text-secondary,
.modal-content .text-secondary,
.notification-card .text-secondary,
.trust-strip .text-secondary,
.certi-item .text-secondary,
.card .text-muted,
.modal-content .text-muted,
.notification-card .text-muted {
    color: #5A6B84 !important;
}

.card {
    border: 1px solid rgba(0, 42, 92, .10);
    box-shadow: 0 10px 30px rgba(0, 12, 32, .28);
}

/* ---- การ์ดที่พื้นเป็นน้ำเงินเข้มอยู่แล้ว ต้องยกเว้นจากกฎด้านบน ---- */
.card.bg-gradient-user-info,
.user-summary-card {
    color: #ffffff;
    border-color: rgba(216, 168, 72, .30);
}

.card.bg-gradient-user-info .text-secondary,
.card.bg-gradient-user-info .text-muted,
.user-summary-card .text-secondary,
.user-summary-card .text-muted {
    color: rgba(234, 242, 251, .72) !important;
}

.card.bg-gradient-user-info a,
.user-summary-card a {
    color: var(--ad-gold-300);
}

/* ==========================================================================
   3. ส่วนหัวของหน้า
   ========================================================================== */

.header {
    background: transparent !important;
    color: var(--ad-ink);
    border-bottom: 1px solid var(--ad-hairline);
}

.header a,
.header .text-color-theme {
    color: var(--ad-gold-300);
}

.header h5,
.header h1,
.header .logo-small h5 {
    color: var(--ad-ink) !important;
}

/* โลโก้เล็กบนหัวเว็บ - ใส่วงแหวนทองจางให้เข้ากับตัวโลโก้ */
.logo-small img {
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(216, 168, 72, .38), 0 4px 14px rgba(0, 12, 32, .45);
}

/* โลโก้ใหญ่ตอนโหลดหน้า */
.logo-wallet img {
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .5));
}

.loader-wrap .text-secondary {
    color: var(--ad-gold-300) !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ==========================================================================
   4. เมนูซ้าย
   ========================================================================== */

.sidebar-wrap.sidebar-overlay .sidebar,
.sidebar-wrap.sidebar-pushcontent .sidebar,
.sidebar-wrap.sidebar-fullmenu {
    background-color: var(--ad-navy-700) !important;
    background-image: linear-gradient(180deg, #002E63 0%, #001A3D 100%);
    border-right: 1px solid var(--ad-hairline);
    color: var(--ad-ink);
}

.sidebar-wrap .sidebar,
.sidebar-wrap .sidebar .nav .nav-item .nav-link {
    color: var(--ad-ink);
}

.sidebar-wrap .sidebar hr {
    border-color: var(--ad-hairline);
    opacity: 1;
}

/* ==========================================================================
   5. ปุ่ม
   ========================================================================== */

.btn-default {
    background: linear-gradient(180deg, var(--ad-gold-300) 0%, var(--ad-gold-500) 55%, var(--ad-gold-600) 100%);
    border: 0;
    color: #2A1B00;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 6px 18px rgba(216, 168, 72, .28);
}

.btn-default:active,
.btn-default:hover,
.btn-default:focus {
    color: #2A1B00;
    background: linear-gradient(180deg, var(--ad-gold-100) 0%, var(--ad-gold-300) 55%, var(--ad-gold-500) 100%);
}

.btn-default:disabled {
    background: rgba(216, 168, 72, .28);
    color: rgba(42, 27, 0, .55);
    box-shadow: none;
}

/* ปุ่มรอง - โปร่งขอบทอง ใช้บนพื้นน้ำเงิน */
.btn-outline-theme,
.btn-light {
    background: rgba(240, 208, 122, .10);
    border: 1px solid var(--ad-gold-500);
    color: var(--ad-gold-300);
}

.btn-outline-theme:hover,
.btn-light:hover {
    background: rgba(240, 208, 122, .18);
    color: var(--ad-gold-100);
}

/* ==========================================================================
   6. ลิงก์
   ========================================================================== */

a {
    color: var(--ad-gold-300);
}

a:hover {
    color: var(--ad-gold-100);
}

.card a,
.modal-content a,
.notification-card a {
    color: var(--ad-navy-500);
}

.card a:hover,
.modal-content a:hover {
    color: var(--ad-navy-400);
}

/* ==========================================================================
   7. ฟอร์ม
      input ของเทมเพลตเป็นพื้นโปร่ง + เส้นใต้ ตัวมันเลยรับสีจากพื้นที่วางอยู่
      บนพื้นน้ำเงินต้องเป็นตัวอักษรสว่าง / ในการ์ดขาวต้องกลับมาเข้ม
   ========================================================================== */

.form-control {
    color: var(--ad-ink);
    border-color: var(--ad-hairline);
}

.form-control::placeholder {
    color: rgba(169, 196, 228, .55);
}

.form-control:focus {
    color: var(--ad-ink);
    border-color: var(--ad-gold-500);
    box-shadow: 0 1px 0 0 var(--ad-gold-500);
}

/* select เป็นข้อยกเว้น: Bootstrap ให้พื้นขาวเสมอ ต่างจาก input ที่เทมเพลต
   ทำพื้นโปร่ง ถ้าใช้ตัวหนังสือสว่างเหมือนกันจะกลายเป็นขาวบนขาว */
.form-select {
    color: var(--ad-ink-dark);
    background-color: #ffffff;
    border-color: rgba(0, 42, 92, .18);
}

.form-select:focus {
    color: var(--ad-ink-dark);
    border-color: var(--ad-gold-500);
    box-shadow: 0 0 0 .18rem rgba(216, 168, 72, .25);
}

.form-floating > .form-select ~ label {
    color: #5A6B84;
}

/* ไอคอนปฏิทิน/นาฬิกาของเบราว์เซอร์เป็นสีเข้ม จมหายบนพื้นน้ำเงิน
   จึงกลับสีให้สว่าง ยกเว้นตอนอยู่ในการ์ดขาวที่พื้นยังสว่างอยู่แล้ว */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(88%) sepia(10%) saturate(700%) hue-rotate(185deg) brightness(103%);
    cursor: pointer;
}

.card input[type="date"]::-webkit-calendar-picker-indicator,
.card input[type="time"]::-webkit-calendar-picker-indicator,
.card input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.modal-content input[type="date"]::-webkit-calendar-picker-indicator,
.modal-content input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
}

.form-group.form-floating > label,
.form-control-label,
label {
    color: var(--ad-ink-dim);
}

/* ในการ์ด / โมดัล พื้นเป็นสีขาว */
.card .form-control,
.card .form-select,
.modal-content .form-control,
.modal-content .form-select {
    color: var(--ad-ink-dark);
    border-color: rgba(0, 42, 92, .18);
}

.card .form-control::placeholder,
.modal-content .form-control::placeholder {
    color: #93A3B8;
}

.card .form-group.form-floating > label,
.card .form-control-label,
.card label,
.modal-content .form-control-label,
.modal-content label {
    color: #5A6B84;
}

/* ==========================================================================
   8. แถบเมนูล่าง (โครงสีอยู่ใน footer.php ด้วย)
   ========================================================================== */

.footer {
    background: linear-gradient(180deg, #002450 0%, #00112B 100%) !important;
    border-top: 1px solid var(--ad-hairline);
    box-shadow: 0 -6px 24px rgba(0, 8, 22, .55);
}

/* ==========================================================================
   9. จิปาถะ
   ========================================================================== */

.badge.bg-theme,
.bg-theme {
    background-color: var(--ad-gold-500) !important;
    color: #2A1B00 !important;
}

.text-theme,
.text-color-theme {
    color: var(--ad-gold-300) !important;
}

.divider,
.border,
.border-top,
.border-bottom {
    border-color: var(--ad-hairline) !important;
}

/* ตารางที่วางบนพื้นน้ำเงินโดยตรง */
main > .container-fluid > .row > .col table:not(.card table) {
    color: var(--ad-ink);
}

.table {
    --bs-table-color: inherit;
    --bs-table-striped-color: inherit;
}

/* scrollbar ให้เข้าโทน */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ad-navy-900);
}

::-webkit-scrollbar-thumb {
    background: rgba(216, 168, 72, .38);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(216, 168, 72, .58);
}

/* เลือกข้อความ */
::selection {
    background: rgba(216, 168, 72, .32);
    color: #ffffff;
}

/* ==========================================================================
   10. หน้า login / สมัครสมาชิก / รีเซ็ตรหัสผ่าน
       เดิมฟอร์มลอยอยู่กลางพื้นน้ำเงินโล่งๆ ไม่มีอะไรยึดสายตา
       จึงจับใส่การ์ดพร้อมโลโก้ และเติมแสงเรืองจางๆ ให้จอกว้างไม่ดูว่างเปล่า
   ========================================================================== */

body[data-page="signin"]::before,
body[data-page="signup"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 42% at 50% 20%, rgba(216, 168, 72, .12) 0%, rgba(216, 168, 72, 0) 70%),
        radial-gradient(72% 55% at 50% 104%, rgba(10, 95, 192, .22) 0%, rgba(10, 95, 192, 0) 70%);
}

body[data-page="signin"] > main,
body[data-page="signup"] > main {
    position: relative;
    z-index: 1;
}

.auth-card {
    max-width: 430px;
    margin: 0 auto;
    padding: 34px 30px 28px;
    border-radius: 22px;
    background: linear-gradient(180deg, #063062 0%, #021B3D 100%);
    border: 1px solid rgba(216, 168, 72, .28);
    box-shadow:
        0 26px 60px rgba(0, 8, 22, .55),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.auth-brand {
    text-align: center;
    margin-bottom: 20px;
}

.auth-brand-logo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(216, 168, 72, .45), 0 10px 26px rgba(0, 8, 22, .6);
}

.auth-brand-name {
    margin: 14px 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .13em;
    color: #ffffff;
}

.auth-title {
    margin: 0 0 20px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ad-ink-dim);
}

/* ช่องกรอกในการ์ด: เปลี่ยนจากเส้นใต้เปล่าๆ เป็นกล่องมีพื้น
   พื้นเป็นสีทึบ (ไม่ใช่ rgba) เพราะต้องเอาไปใช้ซ้ำกับ autofill ให้สีตรงกันเป๊ะ */
.auth-card .form-floating > .form-control {
    background-color: #0B2E5B;
    border: 1px solid rgba(157, 195, 234, .22);
    border-radius: 12px;
    padding-left: 14px;
    padding-right: 14px;
    color: var(--ad-ink);
}

.auth-card .form-floating > .form-control:focus {
    background-color: #0E3568;
    border-color: var(--ad-gold-500);
    box-shadow: 0 0 0 3px rgba(216, 168, 72, .15);
}

.auth-card .form-floating > label {
    padding-left: 14px;
    padding-right: 14px;
    transform-origin: left center;
    color: rgba(169, 196, 228, .88);
}

/* rule เดิมของเทมเพลตรีเซ็ต padding ซ้าย-ขวาเป็น 0 ตอน label ลอยขึ้น
   ต้องใส่กลับ ไม่งั้นตัวหนังสือจะไปชิดขอบกล่อง */
.auth-card .form-floating > .form-control:focus ~ label,
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    padding: 5px 14px var(--finwallapp-padding) 14px;
    transform: scale(.85) translateY(-.5rem) translateX(.1rem);
    transform-origin: left center;
}

/* Chrome autofill ยัดพื้นหลังของตัวเองทับ ทำให้ตัวหนังสือกับ label จมหาย
   กันด้วยการวาดเงา inset สีเดียวกับพื้นช่องกรอก แล้วบังคับสีตัวอักษร */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--ad-ink);
    -webkit-box-shadow: 0 0 0 1000px #0B2E5B inset;
    box-shadow: 0 0 0 1000px #0B2E5B inset;
    caret-color: var(--ad-ink);
    border-radius: 12px;
    transition: background-color 100000s ease-in-out 0s;
}

.auth-card .form-floating > .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0E3568 inset, 0 0 0 3px rgba(216, 168, 72, .15);
    box-shadow: 0 0 0 1000px #0E3568 inset, 0 0 0 3px rgba(216, 168, 72, .15);
}

.auth-card .btn-default {
    border-radius: 12px;
    padding: .78rem 1rem;
    font-size: 1rem;
}

.auth-alt {
    margin: 18px 0 0;
    text-align: center;
    font-size: .92rem;
    color: var(--ad-ink-dim);
}

.auth-alt a {
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 26px 20px 22px;
        border-radius: 18px;
    }

    .auth-brand-logo {
        width: 74px;
        height: 74px;
    }

    .auth-brand-name {
        font-size: 1.15rem;
    }
}

/* ==========================================================================
   11. ตะกร้าสินค้า
   ========================================================================== */

/* ---- ปุ่มใส่ตะกร้าบนการ์ดสินค้า ---- */
.btn-cart {
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .85rem;
    padding: .45rem .5rem;
    border: 1px solid var(--ad-gold-500);
    background: linear-gradient(180deg, var(--ad-gold-300) 0%, var(--ad-gold-500) 100%);
    color: #2A1B00;
    transition: filter .15s ease, background .15s ease, color .15s ease;
}

.btn-cart:hover:not(:disabled) {
    filter: brightness(1.07);
    color: #2A1B00;
}

/* อยู่ในตะกร้าแล้ว - เปลี่ยนเป็นโปร่งขอบทอง จะได้ต่างจากปุ่มที่ยังกดได้ชัดเจน */
.btn-cart.in-cart {
    background: rgba(216, 168, 72, .12);
    color: var(--ad-gold-300);
    border-color: rgba(216, 168, 72, .55);
}

.btn-cart.is-busy {
    opacity: .6;
    pointer-events: none;
}

/* ---- ตัวเลขบนไอคอนตะกร้าที่หัวเว็บ ---- */
.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--ad-gold-500);
    color: #2A1B00;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 8, 22, .5);
}

.cart-badge[hidden] {
    display: none !important;
}

/* เด้งเบาๆ ตอนตัวเลขเปลี่ยน ให้รู้ว่าเพิ่มเข้าตะกร้าแล้วจริง */
.cart-badge.bump {
    animation: cartBump .35s ease;
}

@keyframes cartBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ---- หน้าตะกร้า ---- */
.cart-line {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 42, 92, .10);
}

.cart-line:last-child {
    border-bottom: 0;
}

.cart-line-media {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    border-radius: 12px;
    object-fit: cover;
    background: #E8EEF6;
}

.cart-line-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-line-title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 4px;
    color: var(--ad-ink-dark);
    /* ชื่อสินค้ายาวมาก ตัดที่ 2 บรรทัดไม่ให้การ์ดยืด */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-line-unit {
    font-size: .8rem;
    color: #5A6B84;
    margin: 0;
}

.cart-line-right {
    flex: 0 0 auto;
    text-align: right;
}

.cart-line-subtotal {
    font-weight: 700;
    color: var(--ad-navy-500);
    white-space: nowrap;
}

/* ตัวปรับจำนวน */
.qty-box {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
    border: 1px solid rgba(0, 42, 92, .18);
    border-radius: 10px;
    overflow: hidden;
}

.qty-box button {
    width: 30px;
    height: 30px;
    border: 0;
    background: #F1F5FA;
    color: var(--ad-navy-600);
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
}

.qty-box button:disabled {
    opacity: .4;
}

.qty-box .qty-val {
    min-width: 34px;
    text-align: center;
    font-weight: 700;
    color: var(--ad-ink-dark);
    font-size: .9rem;
}

.cart-remove {
    border: 0;
    background: transparent;
    color: #C64B52;
    font-size: .8rem;
    padding: 6px 0 0;
    margin-top: 2px;
}

/* แถบยอดรวม ลอยอยู่เหนือเมนูล่าง */
.cart-total-bar {
    position: sticky;
    bottom: 0;
    margin-top: 6px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #063062 0%, #021B3D 100%);
    border: 1px solid rgba(216, 168, 72, .28);
    box-shadow: 0 -8px 28px rgba(0, 8, 22, .45);
}

.cart-total-label {
    color: var(--ad-ink-dim);
    font-size: .88rem;
}

.cart-total-value {
    color: var(--ad-gold-300);
    font-size: 1.35rem;
    font-weight: 700;
}

.cart-empty {
    text-align: center;
    padding: 46px 18px;
}

.cart-empty i {
    font-size: 2.6rem;
    color: var(--ad-gold-300);
    opacity: .75;
}

/* ---- หน้ายืนยันคำสั่งซื้อ ---- */
.order-done-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #2A1B00;
    background: linear-gradient(180deg, var(--ad-gold-300) 0%, var(--ad-gold-500) 100%);
    box-shadow: 0 10px 26px rgba(216, 168, 72, .3);
}

.order-code {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(216, 168, 72, .14);
    border: 1px solid rgba(216, 168, 72, .4);
    color: var(--ad-gold-300);
    font-weight: 700;
    letter-spacing: .06em;
}

.contact-admin-box {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(216, 168, 72, .10);
    border: 1px solid rgba(216, 168, 72, .32);
}

/* ==========================================================================
   12. หน้าร้าน (main.php) - ค้นหา / หมวดหมู่ / สินค้าแนะนำ / กริดสินค้า
   ========================================================================== */

/* ---- ช่องค้นหา ---- */
.shop-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 46px;
    border-radius: 23px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(157, 195, 234, .22);
}

.shop-search:focus-within {
    border-color: var(--ad-gold-500);
    background: rgba(255, 255, 255, .10);
    box-shadow: 0 0 0 3px rgba(216, 168, 72, .14);
}

.shop-search > i {
    color: var(--ad-gold-300);
    font-size: 1rem;
    flex: 0 0 auto;
}

.shop-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ad-ink);
    font-size: .95rem;
}

.shop-search input::placeholder { color: rgba(169, 196, 228, .6); }

/* ปุ่มกากบาทซ่อนไว้จนกว่าจะพิมพ์ */
.shop-search button {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--ad-ink-dim);
    padding: 4px;
    line-height: 1;
}

.shop-search button[hidden] { display: none !important; }

/* ---- ปุ่มหมวดหมู่ ---- */
.shop-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    /* ซ่อนสกรอลล์บาร์ ให้ดูเหมือนแอป */
    scrollbar-width: none;
}

.shop-chips::-webkit-scrollbar { display: none; }

.shop-chip {
    flex: 0 0 auto;
    border: 1px solid rgba(157, 195, 234, .24);
    background: rgba(255, 255, 255, .05);
    color: var(--ad-ink-dim);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.shop-chip span {
    opacity: .65;
    font-weight: 500;
    margin-left: 3px;
}

.shop-chip.is-active {
    background: linear-gradient(180deg, var(--ad-gold-300) 0%, var(--ad-gold-500) 100%);
    border-color: var(--ad-gold-500);
    color: #2A1B00;
}

.shop-chip.is-active span { opacity: .75; }

/* ---- แถวสินค้าแนะนำ: เลื่อนแนวนอน ---- */
.feature-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.feature-rail::-webkit-scrollbar { display: none; }

.feature-card {
    flex: 0 0 auto;
    width: 158px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 42, 92, .10);
    box-shadow: 0 6px 18px rgba(0, 8, 22, .28);
    display: flex;
    flex-direction: column;
}

.feature-thumb {
    position: relative;
    background: #EEF3F9;
}

.feature-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.feature-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    color: #2A1B00;
    background: linear-gradient(180deg, var(--ad-gold-300) 0%, var(--ad-gold-500) 100%);
    box-shadow: 0 2px 6px rgba(0, 8, 22, .3);
}

.feature-body {
    padding: 9px 10px 11px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.feature-title {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ad-ink-dark);
    margin: 0 0 6px;
    /* 2 บรรทัดพอ ชื่อสินค้าในระบบนี้ยาวมาก */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}

.feature-price {
    font-size: 1rem;
    font-weight: 800;
    color: #8A6416;
    margin: 0 0 8px;
    font-variant-numeric: tabular-nums;
}

.feature-price span { font-size: .82em; font-weight: 700; }

.feature-card .btn-cart { margin-top: auto; font-size: .78rem; padding: .38rem .4rem; }

/* ---- การ์ดในกริดสินค้าทั้งหมด ---- */
.product-card {
    border: 1px solid rgba(0, 42, 92, .10) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 8, 22, .22) !important;
    transition: box-shadow .18s ease, transform .18s ease;
}

.product-card:hover {
    box-shadow: 0 10px 26px rgba(0, 8, 22, .34) !important;
    transform: translateY(-2px);
}

.product-card .card-body { padding: .7rem .8rem .8rem; }

.product-thumb {
    position: relative;
    background: #EEF3F9;
}

.product-thumb .media-card-top {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
}

@supports not (aspect-ratio: 1) {
    .product-thumb .media-card-top { height: 160px; }
}

/* ป้ายหมวดหมู่มุมบนซ้ายของรูป */
.product-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    color: #EAF2FB;
    background: rgba(0, 20, 45, .78);
    backdrop-filter: blur(3px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card .ad-title {
    font-size: .86rem;
    font-weight: 600;
    color: var(--ad-ink-dark);
    margin-bottom: .35rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.product-price-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #8A6416;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.product-price-unit {
    font-size: .85rem;
    font-weight: 700;
    color: #8A6416;
}

.product-seller {
    color: #5A6B84;
    font-size: .74rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .product-price-value { font-size: .98rem; }
    .product-card .ad-title { font-size: .8rem; }
}

/* ---- สถานะว่าง ---- */
.shop-empty {
    text-align: center;
    padding: 44px 18px;
    color: var(--ad-ink-dim);
}

.shop-empty i {
    font-size: 2.4rem;
    color: var(--ad-gold-300);
    opacity: .7;
    display: block;
    margin-bottom: 12px;
}

.shop-empty p { color: var(--ad-ink); font-weight: 600; }
.shop-empty p.small { color: var(--ad-ink-dim); font-weight: 400; }
.shop-empty[hidden] { display: none !important; }

/* ==========================================================================
   13. หน้ารายละเอียดสินค้า (product.php)
   ========================================================================== */

.pd-hero {
    position: relative;
    background: #EEF3F9;
}

.pd-hero-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
}

@supports not (aspect-ratio: 1) {
    .pd-hero-media { height: 320px; }
}

.pd-hero-cat {
    top: 12px;
    left: 12px;
    font-size: .75rem;
    padding: 5px 12px;
}

.pd-title {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ad-ink-dark);
    margin: 0 0 10px;
}

.pd-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 12px;
}

.pd-price-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #8A6416;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pd-price-unit {
    font-size: 1.1rem;
    font-weight: 700;
    color: #8A6416;
}

/* แถวข้อมูลย่อย: ถูกใจ / วันที่ / รหัสสินค้า */
.pd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 42, 92, .10);
    border-bottom: 1px solid rgba(0, 42, 92, .10);
    color: #5A6B84;
    font-size: .82rem;
}

.pd-meta i { color: var(--ad-gold-600); margin-right: 3px; }

.pd-shop {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(216, 168, 72, .09);
    border: 1px solid rgba(216, 168, 72, .28);
    color: #41506A;
    font-size: .85rem;
    line-height: 1.55;
}

.pd-shop > i {
    flex: 0 0 auto;
    color: var(--ad-gold-600);
    font-size: 1rem;
    margin-top: 2px;
}

.pd-sum {
    font-size: 1.1rem;
    font-weight: 800;
    color: #8A6416;
    font-variant-numeric: tabular-nums;
}

/* ---- การ์ดสินค้าแบบกดได้ ---- */
/* .feature-card ถูกใช้เป็น <a> ในแถวสินค้าใกล้เคียง ต้องล้างสไตล์ลิงก์ออก */
a.feature-card,
a.feature-card:hover {
    text-decoration: none;
    color: inherit;
}

a.feature-card:hover {
    box-shadow: 0 10px 24px rgba(0, 8, 22, .36);
}

/* ลิงก์ที่ครอบรูปกับชื่อสินค้าในกริดหน้าร้าน ปุ่มใส่ตะกร้าอยู่นอกลิงก์ จะได้ไม่พากันเด้งไปหน้าสินค้า */
.product-link,
.product-link:hover {
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-card .product-thumb { cursor: pointer; }

/* บอกใบ้ว่ากดดูรายละเอียดได้ */
.product-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--ad-navy-500);
    margin-bottom: 6px;
}

/* ==========================================================================
   14. หน้าคำสั่งซื้อของฉัน (my_orders.php)
   ========================================================================== */

.order-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(0, 42, 92, .10);
    border-radius: 16px;
    padding: 13px 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(0, 8, 22, .22);
    transition: box-shadow .18s ease, transform .18s ease;
}

.order-card:hover {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 8, 22, .32);
    transform: translateY(-2px);
}

.order-card[hidden] { display: none !important; }

.order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.order-code-sm {
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: .04em;
    color: var(--ad-navy-600);
}

.order-status {
    flex: 0 0 auto;
    font-size: .74rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* แถวรูปย่อของสินค้าในออเดอร์ */
.order-thumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.order-thumbs img,
.order-thumb-blank {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 10px;
    object-fit: cover;
    background: #E8EEF6;
    display: block;
}

.order-thumb-more {
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 700;
    color: #5A6B84;
    padding-left: 2px;
}

.order-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(0, 42, 92, .09);
}

.order-date {
    color: #5A6B84;
    font-size: .78rem;
}

.order-date i { color: var(--ad-gold-600); }

.order-total {
    font-size: 1rem;
    font-weight: 800;
    color: #8A6416;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   15. ปุ่มเลื่อนซ้าย-ขวาของแถวสินค้า
   ========================================================================== */

.rail-wrap {
    position: relative;
}

.rail-nav {
    position: absolute;
    /* จัดให้อยู่กลางรูปสินค้า ไม่ใช่กลางการ์ด เพราะใต้รูปมีชื่อกับราคาอยู่ */
    top: 33%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(216, 168, 72, .5);
    background: rgba(0, 18, 42, .9);
    color: var(--ad-gold-300);
    font-size: 1rem;
    line-height: 1;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 8, 22, .55);
    transition: background .15s ease, opacity .15s ease;

    /* ซ่อนไว้ก่อน จะโชว์เมื่อ rail.js ตรวจว่าของยาวพอให้เลื่อน */
    display: none;
}

.rail-wrap.has-nav .rail-nav {
    display: inline-flex;
}

.rail-nav:hover:not(:disabled) {
    background: rgba(0, 30, 68, .95);
    color: var(--ad-gold-100);
}

.rail-nav:disabled {
    opacity: .28;
    cursor: default;
}

.rail-prev { left: -6px; }
.rail-next { right: -6px; }

@media (max-width: 575.98px) {
    .rail-nav { width: 30px; height: 30px; font-size: .9rem; }
    .rail-prev { left: -4px; }
    .rail-next { right: -4px; }
}

/* แถวที่อยู่ใน .rail-wrap แล้ว ไม่ต้องมี margin ล่างซ้ำกับตัว wrap */
.rail-wrap > .feature-rail {
    margin-bottom: 0;
}

/* ==========================================================================
   16. หน้าออเดอร์สินค้า (ads_list.php) - การ์ดเต็มความกว้าง + ปุ่มยืนยัน
   ========================================================================== */

.task-card {
    border: 1px solid rgba(0, 42, 92, .10) !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 12px rgba(0, 8, 22, .22) !important;
    overflow: hidden;
    transition: box-shadow .18s ease;
}

.task-card:hover {
    box-shadow: 0 8px 22px rgba(0, 8, 22, .3) !important;
}

/* รูปซ้าย เนื้อหาขวา อ่านง่ายทั้งมือถือและเดสก์ท็อป */
.task-row {
    display: flex;
    gap: 13px;
    padding: 12px;
    align-items: stretch;
}

.task-media {
    flex: 0 0 116px;
    width: 116px;
    border-radius: 11px;
    overflow: hidden;
    background: #EEF3F9;
    align-self: flex-start;
}

.task-media img,
.task-media video {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
}

@supports not (aspect-ratio: 1) {
    .task-media img,
    .task-media video { height: 116px; }
}

.task-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.task-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--ad-ink-dark);
    line-height: 1.4;
    margin: 0 0 7px;
    /* ชื่อออเดอร์ยาวมาก ตัดที่ 2 บรรทัดให้การ์ดสูงใกล้เคียงกัน */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-price {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    align-self: flex-start;
    background: rgba(216, 168, 72, .10);
    border: 1px solid rgba(216, 168, 72, .40);
    border-radius: 9px;
    padding: 4px 10px;
    margin-bottom: 7px;
}

.task-price-label,
.task-price-value,
.task-price-unit {
    font-size: 1rem;
    font-weight: 700;
    color: #8A6416;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.task-note {
    color: #41506A;
    font-size: .8rem;
    line-height: 1.5;
    margin: 0 0 8px;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
}

.task-date {
    color: #64748B;
    font-size: .74rem;
    white-space: nowrap;
}

.task-date i { color: var(--ad-gold-600); }

/* ---- ปุ่มยืนยัน ---- */
.btn-confirm {
    flex: 0 0 auto;
    min-width: 108px;
    border-radius: 10px;
    padding: .44rem .9rem;
    font-size: .86rem;
    font-weight: 700;
    border: 1px solid var(--ad-gold-500);
    background: linear-gradient(180deg, var(--ad-gold-300) 0%, var(--ad-gold-500) 100%);
    color: #2A1B00;
    transition: filter .15s ease;
}

.btn-confirm:hover:not(:disabled) {
    filter: brightness(1.07);
    color: #2A1B00;
}

.btn-confirm.is-busy {
    opacity: .6;
    pointer-events: none;
}

/* ยืนยันไปแล้ว - เขียวจางแบบอ่านออก ไม่ใช่ปุ่มเทาที่ดูเหมือนพัง */
.btn-confirm.is-done,
.btn-confirm:disabled {
    background: rgba(27, 127, 59, .12);
    border-color: rgba(27, 127, 59, .45);
    color: #15692F;
    filter: none;
    opacity: 1;
    cursor: default;
}

@media (max-width: 575.98px) {
    .task-row { gap: 11px; padding: 10px; }
    .task-media { flex: 0 0 92px; width: 92px; }
    .task-title { font-size: .86rem; }
    .task-price-label,
    .task-price-value,
    .task-price-unit { font-size: .9rem; }
    .btn-confirm { min-width: 94px; font-size: .8rem; padding: .4rem .7rem; }
}

/* จอกว้างมาก รูปใหญ่ขึ้นหน่อยให้สมดุลกับการ์ดที่ยาว */
@media (min-width: 992px) {
    .task-media { flex: 0 0 140px; width: 140px; }
    .task-title { font-size: 1rem; }
}

/* ==========================================================================
   17. หน้าผลลัพธ์หลังกดยืนยันออเดอร์ (confirm_result.php)
   ========================================================================== */

.confirm-reward {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 4px 0 2px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(27, 127, 59, .10);
    border: 1px solid rgba(27, 127, 59, .35);
}

.confirm-reward-label {
    font-size: .85rem;
    font-weight: 600;
    color: #15692F;
}

.confirm-reward-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #15692F;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.confirm-reward-unit {
    font-size: .95rem;
    font-weight: 700;
    color: #15692F;
}


/* ---- หน้าร้าน: แถบค้นหาเป็นฟอร์มแล้ว ปุ่มกระดิ่ง/ล้างจึงเป็น submit กับลิงก์ ---- */
.shop-search .shop-search-go,
.shop-search .shop-search-clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--ad-ink-dim);
    padding: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.shop-search .shop-search-clear:hover,
.shop-search .shop-search-go:hover { color: var(--ad-ink); }

/* ---- ปุ่มหมวดเปลี่ยนจาก <button> เป็น <a> จึงต้องรีเซ็ตสไตล์ลิงก์ ---- */
a.shop-chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

a.shop-chip:hover { color: var(--ad-ink); border-color: rgba(157, 195, 234, .45); }
a.shop-chip.is-active:hover { color: #2A1B00; }

/* ---- แถบแบ่งหน้าสินค้า ---- */
.shop-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 4px 0 28px;
}

.pager-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(157, 195, 234, .24);
    background: rgba(255, 255, 255, .05);
    color: var(--ad-ink-dim);
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pager-btn:hover { color: var(--ad-ink); border-color: rgba(157, 195, 234, .45); }

.pager-btn.is-current {
    background: linear-gradient(180deg, var(--ad-gold-300) 0%, var(--ad-gold-500) 100%);
    border-color: var(--ad-gold-500);
    color: #2A1B00;
}

/* ปุ่มที่กดไม่ได้แล้ว เช่น ถอยกลับ ตอนอยู่หน้าแรก ยังคงไว้ให้แถวไม่ขยับ */
.pager-btn.is-disabled { opacity: .35; pointer-events: none; }

.pager-gap {
    color: var(--ad-ink-dim);
    padding: 0 2px;
}


/* ---- หน้าออเดอร์ที่ยืนยันแล้ว (confirmed_list.php) ---- */

/* รูปกับชื่อกดกลับไปหน้าผลยืนยันได้ แต่ต้องไม่ให้หน้าตาเป็นลิงก์สีน้ำเงินขีดเส้นใต้ */
a.task-media,
.task-title-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.task-title-link:hover .task-title { color: var(--ad-gold-600); }

/* ปุ่ม "ดูผลยืนยัน" ใช้โครงเดียวกับ .btn-confirm แต่เป็นสีน้ำเงินโปร่ง
   จะได้ไม่สับสนกับปุ่มทองที่แปลว่า "กดเพื่อยืนยัน" ในหน้า ads_list.php */
.btn-confirm.btn-view {
    background: rgba(0, 42, 92, .06);
    border-color: rgba(0, 42, 92, .28);
    color: var(--ad-ink-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-confirm.btn-view:hover {
    background: rgba(0, 42, 92, .11);
    border-color: rgba(0, 42, 92, .45);
    color: var(--ad-ink-dark);
    filter: none;
}



/* ---- หน้าออเดอร์: ปุ่มสองปุ่มในการ์ดเดียว ---- */

/* จอแคบใส่สองปุ่มกับวันที่ไม่พอ ยอมให้ปุ่มตกลงมาบรรทัดถัดไป ดีกว่าบีบจนอ่านไม่ออก */
.task-foot {
    flex-wrap: wrap;
    row-gap: 8px;
}

.task-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* มีสองปุ่มแล้ว ไม่ต้องบังคับความกว้างขั้นต่ำเท่าเดิม ให้กว้างตามข้อความ */
.task-actions .btn-confirm {
    min-width: 0;
    gap: 5px;
}

/* สไตล์ .btn-confirm.btn-view นิยามไว้แล้วในหมวด confirmed_list.php ด้านบน ใช้ร่วมกัน */