/* ==========================================================================
   SD-1 Catalog — front-end styles
   ทุกอย่าง scope ด้วย .sd1 จึงไม่ชนกับธีมหรือหน้าอื่น
   ========================================================================== */

.sd1{
  --red:#E31E24; --red-deep:#EF0F3A;
  --ink:#0F0F0F; --ink-2:#252525; --muted:#666666;
  --line:#999999; --line-soft:#E8E8E8;
  --soft:rgba(230,126,34,.05); --green:#27AE60; --orange:#E67E22;
  --shopee:#EE4D2D; --lazada:#000083; --line-green:#06C755;
  --r:8px; --shadow:0 8px 20px rgba(0,0,0,.1);
  --font:'Noto Sans Thai',system-ui,sans-serif;
}
.sd1, .sd1 *{font-family:var(--font);box-sizing:border-box}
.sd1 p{margin:0}
.sd1 .sd1-brand{font-size:14px;line-height:22px;color:var(--muted)}
.sd1 .sd1-block-title{font-size:16px;line-height:24px;font-weight:700;color:var(--ink);margin:0 0 24px}
.sd1 .sd1-ok{color:var(--green)}
.sd1 .sd1-empty{padding:40px 0;text-align:center;color:var(--muted)}
.sd1 .sd1-placeholder{padding:16px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);text-align:center}

/* 1. FILTER BAR ------------------------------------------------------------ */
.sd1-filter{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.sd1-filter-head{font-size:18px;line-height:28px;font-weight:700;color:var(--ink);margin:0 0 16px}
.sd1-filter-row{display:grid;grid-template-columns:repeat(3,1fr) auto auto;gap:16px;align-items:end}
.sd1-field{display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:22px;color:var(--ink-2)}
.sd1-field select{height:48px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;font-size:16px;color:var(--ink);width:100%}
.sd1-field select:disabled{background:#f5f5f5;color:var(--muted);cursor:not-allowed}
.sd1-field select:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.sd1-f-go{height:48px;flex:none}
.sd1-f-reset{height:48px;padding:0 16px;background:none;border:0;color:var(--muted);
  font-size:14px;text-decoration:underline;cursor:pointer}
.sd1-f-reset:hover{color:var(--red)}
.sd1-filter-count{margin-top:12px;font-size:14px;line-height:22px;color:var(--muted)}

/* 2. BUTTONS --------------------------------------------------------------- */
.sd1 .sd1-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;
  padding:12px 24px;border-radius:var(--r);font-size:18px;line-height:28px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;transition:.2s}
.sd1 .sd1-btn--solid{background:var(--red);color:#fff}
.sd1 .sd1-btn--solid:hover{background:#c2181d;color:#fff}
.sd1 .sd1-btn:focus-visible{outline:3px solid #F4B400;outline-offset:2px}

.sd1-market{display:flex;flex-direction:column;gap:16px}
.sd1-market--row{flex-direction:row;flex-wrap:wrap}
.sd1-market--row .sd1-shop{flex:1 1 180px}
.sd1-shop{display:flex;justify-content:center;align-items:center;gap:8px;height:56px;
  background:#fff;border:2px solid;border-radius:var(--r);text-decoration:none;
  font-size:18px;line-height:28px;font-weight:600;transition:.2s}
.sd1-shop:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.sd1-shop--line{background:var(--line-green);border-color:var(--line-green);color:#fff}
.sd1-shop--line:hover{background:#05a948;color:#fff}
.sd1-shop--shopee{border-color:var(--shopee);color:var(--shopee)}
.sd1-shop--shopee:hover{background:var(--shopee);color:#fff}
.sd1-shop--lazada{border-color:var(--lazada);color:var(--lazada)}
.sd1-shop--lazada:hover{background:var(--lazada);color:#fff}
.sd1-line-ico{width:24px;height:22px;flex:none;fill:currentColor}

/* 3. PRODUCT GRID + CARD --------------------------------------------------- */
.sd1-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;transition:opacity .2s}
.sd1-grid.is-loading{opacity:.45;pointer-events:none}
.sd1-grid--scroll{display:flex;overflow-x:auto;padding-bottom:16px}
.sd1-grid--scroll .sd1-card{flex:none;width:267px}

.sd1-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.sd1-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.sd1-card-media{position:relative;line-height:0}
.sd1-card-media img{width:100%;height:200px;object-fit:cover;display:block}
.sd1-card-noimg{display:block;width:100%;height:200px;background:#f0f0f0}
.sd1-badge{position:absolute;left:0;top:0;padding:8px 12px;font-size:16px;line-height:24px;
  font-weight:600;color:#fff;border-radius:0 0 var(--r) 0}
.sd1-badge--bestseller{background:var(--red)}
.sd1-badge--new{background:var(--ink)}
.sd1-badge--promotion{background:var(--orange)}
.sd1-badge--preorder{background:#fff;color:var(--red);border:1px solid var(--red)}
.sd1-badge--discount{background:var(--red-deep)}

.sd1-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.sd1-card-title{font-size:16px;line-height:24px;font-weight:700;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sd1-card-title a{color:var(--ink);text-decoration:none}
.sd1-card-title a:hover{color:var(--red)}
.sd1-card-desc{font-size:14px;line-height:22px;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sd1-card-foot{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.sd1-card-price{display:flex;align-items:center;gap:8px;font-size:24px;line-height:36px;font-weight:700;color:var(--red)}
.sd1-card-price small{font-size:14px;line-height:22px;font-weight:400;color:var(--ink)}
.sd1-card-price--ask{font-size:16px}
.sd1-arrow{flex:none;width:48px;height:48px;border-radius:99px;display:flex;
  justify-content:center;align-items:center;background:var(--red-deep);transition:.2s}
.sd1-arrow svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sd1-arrow:hover{background:var(--red)}

/* 4. SPEC TABLE + FITMENT -------------------------------------------------- */
.sd1-tabgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px}
.sd1-tabgrid--single{grid-template-columns:1fr}
.sd1-spec{width:100%;border-collapse:collapse;table-layout:fixed;
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.sd1-spec th,.sd1-spec td{padding:12px 24px;height:52px;font-size:14px;line-height:28px;
  border:0;border-bottom:1px solid var(--line-soft)}
.sd1-spec tr:last-child th,.sd1-spec tr:last-child td{border-bottom:0}
.sd1-spec th{width:40%;text-align:left;font-weight:400;color:var(--ink-2)}
.sd1-spec td{text-align:right;font-weight:600;color:var(--ink);word-break:break-word}

.sd1-fitment{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sd1-fitment li{display:flex;align-items:center;gap:16px;min-height:52px;padding:12px 16px;
  background:var(--soft);border-radius:var(--r);font-size:14px;line-height:28px;font-weight:600;color:var(--ink)}
.sd1-ico{flex:none;width:24px;height:24px;fill:none;stroke:var(--red);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 5. RESPONSIVE ------------------------------------------------------------ */
@media (max-width:1024px){
  .sd1-filter-row{grid-template-columns:1fr 1fr;}
  .sd1-f-go,.sd1-f-reset{grid-column:span 1}
}
@media (max-width:767px){
  .sd1-filter{padding:16px}
  .sd1-filter-row{grid-template-columns:1fr;gap:12px}
  .sd1-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
  .sd1-card-media img,.sd1-card-noimg{height:150px}
  .sd1-card-price{font-size:20px}
  .sd1-arrow{width:40px;height:40px}
  .sd1-spec th{width:110px;padding:12px 14px}
  .sd1-spec td{padding:12px 14px}
}

/* 6. SIDEBAR FILTER (หน้ารวมสินค้า) -------------------------------------- */
.sd1-side{width:100%}
.sd1-side-head{font-size:18px;line-height:28px;font-weight:700;color:var(--ink);margin:0 0 24px}
.sd1-side-head + .sd1-side-head,.sd1-side-brands{margin-top:0}
.sd1-side-cats,.sd1-side-brands{list-style:none;margin:0 0 24px;padding:0}
.sd1-cat{width:100%;display:flex;align-items:center;gap:16px;padding:16px;background:#fff;
  border:0;border-bottom:1px solid #DBDBDC;font-size:18px;line-height:28px;color:var(--ink);
  font-family:inherit;text-align:left;cursor:pointer;transition:.15s}
.sd1-cat span{flex:1}
.sd1-cat em{font-style:normal;color:var(--line)}
.sd1-cat:hover{background:rgba(227,30,36,.06)}
.sd1-cat.is-active{background:rgba(227,30,36,.15);color:var(--red);font-weight:600}
.sd1-cat.is-active em{color:var(--red)}
.sd1-cat:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

.sd1-check{display:flex;align-items:center;gap:16px;padding:16px;background:#fff;
  border-bottom:1px solid #DBDBDC;font-size:18px;line-height:28px;color:var(--ink);cursor:pointer}
.sd1-check--sub{padding-left:40px}
.sd1-check input{flex:none;width:18px;height:18px;border:1px solid #BDBCDB;border-radius:4px;
  accent-color:var(--red);cursor:pointer}
.sd1-check:hover{background:#fafafa}
.sd1-side-reset{width:100%;padding:12px;background:none;border:1px solid var(--line);
  border-radius:var(--r);color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer;transition:.2s}
.sd1-side-reset:hover{border-color:var(--red);color:var(--red)}

/* 7. TOOLBAR + PAGINATION -------------------------------------------------- */
.sd1-results{display:flex;flex-direction:column;gap:32px}
.sd1-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sd1-toolbar-count{font-size:16px;line-height:24px;color:var(--muted)}
.sd1-sort{display:flex;align-items:center;gap:24px;font-size:16px;line-height:24px;color:var(--ink-2)}
.sd1-sort select{height:48px;min-width:155px;padding:0 16px;border:1px solid #949699;
  border-radius:var(--r);background:#fff;font-size:16px;font-family:inherit;color:#000;cursor:pointer}
.sd1-sort select:focus-visible{outline:2px solid var(--red);outline-offset:1px}

.sd1-pager-wrap{display:flex;justify-content:center}
.sd1-pager{display:flex;justify-content:center;align-items:center;gap:8px}
.sd1-page{width:42px;height:42px;display:flex;justify-content:center;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:4px;
  font-family:inherit;font-size:18px;line-height:28px;color:var(--ink-2);cursor:pointer;transition:.15s}
.sd1-page:hover{border-color:var(--red);color:var(--red)}
.sd1-page.is-active{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.sd1-page--next svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sd1-page:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media (max-width:1024px){
  .sd1-side-head,.sd1-cat,.sd1-check{font-size:16px;line-height:24px}
  .sd1-cat,.sd1-check{padding:12px}
  .sd1-check--sub{padding-left:32px}
}
@media (max-width:767px){
  .sd1-toolbar{flex-direction:column;align-items:stretch}
  .sd1-sort{justify-content:space-between;gap:12px}
  .sd1-sort select{flex:1}
}

/* 8. PRODUCT GALLERY (เทมเพลตหน้าสินค้า) ---------------------------------- */
.sd1-gallery{display:flex;flex-direction:column;gap:16px}
.sd1-gallery .sd1-gal-main{width:100%;aspect-ratio:554/450;object-fit:cover;border-radius:var(--r);display:block}
.sd1-gal-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sd1-gal-thumbs button{padding:0;border:2px solid transparent;background:none;border-radius:var(--r);
  cursor:pointer;overflow:hidden;transition:border-color .2s;line-height:0}
.sd1-gal-thumbs button img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.sd1-gal-thumbs button.is-active,.sd1-gal-thumbs button:hover{border-color:var(--red)}
.sd1-gal-thumbs button:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* 9. SINGLE TEMPLATE BITS -------------------------------------------------- */
.sd1 .sd1-block-title--lg{font-size:18px;line-height:28px;margin-bottom:16px}
.sd1 .sd1-divider{height:1px;background:var(--line-soft);margin:32px 0}
.sd1-featgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sd1-featgrid li{display:flex;align-items:center;gap:16px;font-size:16px;line-height:24px;color:var(--ink)}
.sd1-featgrid li::before{content:"";flex:none;width:6px;height:32px;border-radius:3px;background:var(--red)}
.sd1-featbox{background:var(--soft);border-radius:6px;padding:24px;margin-top:24px}
.sd1-featbox-title{font-size:16px;line-height:24px;font-weight:700;color:var(--ink);margin:0 0 16px}
.sd1-price-row{display:flex;align-items:center;gap:16px;margin-top:24px}
.sd1-price-label{font-size:18px;line-height:28px;color:var(--ink)}
.sd1-price{font-size:32px;line-height:48px;font-weight:700;color:var(--ink)}

@media (max-width:767px){
  .sd1-featgrid{grid-template-columns:1fr}
  .sd1-price{font-size:26px;line-height:38px}
}

/* 10. PRODUCT TABS --------------------------------------------------------- */
.sd1-tabs{display:block}
.sd1-tabs-bar{display:flex;justify-content:flex-start;align-items:stretch;gap:0;
  border-bottom:1px solid #ACADAF;overflow-x:auto;scrollbar-width:none}
.sd1-tabs-bar::-webkit-scrollbar{display:none}
.sd1-tab{flex:none;padding:12px 40px;background:none;border:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  font-family:inherit;font-size:18px;line-height:28px;font-weight:400;color:var(--ink);
  white-space:nowrap;cursor:pointer;transition:color .15s;
  display:grid;justify-items:center;text-align:center}
/* Each tab reserves the width of its own BOLD text, so switching tabs
   cannot change the bar's total width and shift the row sideways. */
.sd1-tab > span{grid-area:1/1}
.sd1-tab::after{content:attr(data-label);grid-area:1/1;
  font-weight:700;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.sd1-tab:hover{color:var(--red)}
.sd1-tab.is-active{color:var(--red);font-weight:700;border-bottom-color:var(--red)}
.sd1-tab:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

.sd1-tab-panel{padding-top:32px}
.sd1-tab-panel[hidden]{display:none}
.sd1-tab-prose{font-size:16px;line-height:28px;color:var(--ink);margin-bottom:32px}
.sd1-tab-prose p{margin:0 0 16px}
.sd1-tab-prose :last-child{margin-bottom:0}

.sd1-steps{list-style:none;counter-reset:sd1step;margin:0;padding:0;display:grid;gap:16px}
.sd1-steps li{counter-increment:sd1step;display:flex;align-items:center;gap:16px;
  font-size:16px;line-height:24px;color:var(--ink)}
.sd1-steps li::before{content:counter(sd1step);flex:none;width:28px;height:28px;border-radius:99px;
  background:var(--soft);color:var(--red);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center}

@media (max-width:767px){
  .sd1-tab{padding:12px 20px;font-size:16px;line-height:24px}
  .sd1-tab-panel{padding-top:24px}
  .sd1-steps li{align-items:flex-start}
}

/* 11. EMPTY-STATE NOTICE (เห็นเฉพาะคนแก้ไขสินค้าได้) ---------------------- */
.sd1-tabs-empty{padding:24px;border:1px dashed var(--line);border-radius:var(--r);
  background:#fafafa;color:var(--ink-2);font-size:15px;line-height:24px}
.sd1-tabs-empty p{margin:0 0 8px}
.sd1-tabs-empty ul{margin:0 0 8px;padding-left:20px}
.sd1-tabs-empty li{margin-bottom:4px}
.sd1-tabs-empty-note{color:var(--muted);font-size:13px;margin:0}

/* 12. REVIEWS -------------------------------------------------------------- */
.sd1-reviews{display:block}
.sd1-stars{display:inline-flex;gap:1px;font-size:20px;line-height:1}
.sd1-star{color:#DDD}
.sd1-star.is-on{color:#F4B400}
.sd1-rating{display:flex;align-items:center;gap:12px;color:var(--ink)}
.sd1-rating strong{font-size:24px;line-height:36px;font-weight:700}
.sd1-rating span{font-size:18px;line-height:28px}

.sd1-rev-scroll{display:flex;gap:24px;overflow-x:auto;padding:4px 4px 16px}
.sd1-rev{flex:none;width:364px;background:#fff;border:1px solid #EAEEFF;
  box-shadow:var(--shadow);border-radius:10px;padding:40px}
.sd1-rev-top{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid #EAEEFF}
.sd1-rev-ava{flex:none;width:60px;height:60px;border-radius:999px;object-fit:cover;
  border:1px solid #EAEEFF;display:block}
.sd1-rev-ava--blank{background:#003061}
.sd1-rev-id{display:flex;flex-direction:column;gap:4px;min-width:0}
.sd1-rev-id strong{font-size:14px;line-height:22px;font-weight:600;color:#050509}
.sd1-rev-text{margin-top:24px;font-size:16px;line-height:26px;color:#828284}
.sd1-rev-text p{margin:0 0 12px}
.sd1-rev-text :last-child{margin-bottom:0}

@media (max-width:767px){
  .sd1-rev{width:280px;padding:24px}
  .sd1-rev-ava{width:48px;height:48px}
  .sd1-rating strong{font-size:20px;line-height:30px}
  .sd1-rating span{font-size:16px}
}

/* 13. THEME BUTTON RESET --------------------------------------------------- */
/* ธีม (Astra ฯลฯ) ใส่สีพื้น/สีตัวอักษรให้ <button> ทุกตัวรวมถึงแท็บและตัวกรอง
   จึงต้องรีเซ็ตกลับ ไม่งั้นจะกลายเป็นปุ่มสีของธีมตอน hover / active            */
.sd1 button,
.sd1 button:hover,
.sd1 button:focus,
.sd1 button:active,
.sd1 button:visited{
  background-image:none;box-shadow:none;text-decoration:none;text-shadow:none}

.sd1 .sd1-tab,
.sd1 .sd1-tab:hover,
.sd1 .sd1-tab:focus,
.sd1 .sd1-tab:active{
  background:none !important;border-color:transparent;color:var(--ink)}
.sd1 .sd1-tab:hover{color:var(--red) !important}
.sd1 .sd1-tab.is-active{color:var(--red) !important;border-bottom-color:var(--red)}

.sd1 .sd1-cat,
.sd1 .sd1-cat:hover,
.sd1 .sd1-cat:focus,
.sd1 .sd1-cat:active{background:#fff !important;color:var(--ink)}
.sd1 .sd1-cat:hover{background:rgba(227,30,36,.06) !important;color:var(--ink)}
.sd1 .sd1-cat.is-active{background:rgba(227,30,36,.15) !important;color:var(--red) !important}

.sd1 .sd1-page,
.sd1 .sd1-page:hover,
.sd1 .sd1-page:focus,
.sd1 .sd1-page:active{background:#fff !important;color:var(--ink-2)}
.sd1 .sd1-page:hover{border-color:var(--red);color:var(--red) !important}
.sd1 .sd1-page.is-active{background:var(--red) !important;color:#fff !important}

.sd1 .sd1-side-reset,
.sd1 .sd1-side-reset:hover,
.sd1 .sd1-side-reset:focus{background:none !important;color:var(--muted)}
.sd1 .sd1-side-reset:hover{color:var(--red) !important}

.sd1 .sd1-gal-thumbs button,
.sd1 .sd1-gal-thumbs button:hover,
.sd1 .sd1-gal-thumbs button:focus,
.sd1 .sd1-gal-thumbs button:active{background:none !important;padding:0}

.sd1 .sd1-f-go{background:var(--red) !important;color:#fff !important}
.sd1 .sd1-f-go:hover{background:#c2181d !important;color:#fff !important}

/* 14. MARKETPLACE BUTTON STACK -------------------------------------------- */
.sd1-market{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.sd1-market-row{display:flex;gap:16px;flex-wrap:wrap}
.sd1-market-row .sd1-btn{flex:1 1 180px;font-size:16px;line-height:24px}
.sd1-market .sd1-shop{width:100%}
.sd1-shop-ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sd1 .sd1-btn--outline{background:#fff;border-color:var(--red);color:var(--red)}
.sd1 .sd1-btn--outline:hover{background:var(--red);color:#fff}

@media (max-width:767px){
  .sd1-market-row{flex-direction:column}
  .sd1-market-row .sd1-btn{flex:1 1 auto}
}

/* 15. BUTTON SIZING HARDENING --------------------------------------------- */
/* ธีมบางตัวตั้ง svg{width:100%} ทำให้ไอคอนในปุ่มบวมจนดันข้อความตกบรรทัด
   จึงล็อกขนาดไอคอนและความสูงปุ่มไว้ตายตัว                                   */
.sd1 .sd1-btn-ico,
.sd1 .sd1-shop-ico{width:22px !important;height:22px !important;
  min-width:22px;max-width:22px;flex:0 0 22px}

.sd1 .sd1-btn{min-height:51px;padding:12px 24px;gap:8px;
  font-size:16px;line-height:24px;white-space:nowrap;
  align-items:center;justify-content:center}
.sd1 .sd1-shop{min-height:56px;padding:12px 24px;gap:8px;
  font-size:16px;line-height:24px;white-space:nowrap}

.sd1-market-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sd1-market-row .sd1-btn{flex:none;width:100%}

@media (max-width:767px){
  .sd1-market-row{grid-template-columns:1fr}
  .sd1 .sd1-btn,.sd1 .sd1-shop{white-space:normal}
}
.sd1-market-hint{font-size:13px;line-height:20px;color:var(--muted);
  padding:8px 12px;border:1px dashed var(--line);border-radius:var(--r);background:#fafafa}

/* 16. TEXT SELECTION ------------------------------------------------------- */
::selection{color:#fff;background:#0274be}
::-moz-selection{color:#fff;background:#0274be}

/* 17. STANDALONE SPEC TABLE (แท็บที่ 2) ----------------------------------- */
/* ค่าเริ่มต้นครึ่งความกว้าง ปรับได้ในวิดเจ็ต และเต็มความกว้างบนมือถือ */
.sd1-tab-panel > .sd1-spec{max-width:50%}
@media (max-width:1024px){ .sd1-tab-panel > .sd1-spec{max-width:70%} }
@media (max-width:767px){ .sd1-tab-panel > .sd1-spec{max-width:100%} }

/* 18. SPEC TABLE FRAME ----------------------------------------------------- */
/* ธีมตั้ง table{border:0} ทับ และ border-collapse:collapse ทำให้ border-radius
   ไม่ทำงาน จึงต้องใช้ separate + ประกาศเส้นขอบซ้ำด้วย !important            */
.sd1 .sd1-spec{
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid var(--line-soft) !important;
  border-radius:var(--r) !important;
  overflow:hidden;
  background:#fff}

.sd1 .sd1-spec th,
.sd1 .sd1-spec td{
  border:0 !important;
  border-bottom:1px solid var(--line-soft) !important;
  background:#fff}

.sd1 .sd1-spec tr:last-child th,
.sd1 .sd1-spec tr:last-child td{border-bottom:0 !important}

/* มุมโค้งของเซลล์หัวแถวและท้ายแถว เผื่อเบราว์เซอร์ที่ overflow ไม่คลิปตาราง */
.sd1 .sd1-spec tr:first-child th{border-top-left-radius:var(--r)}
.sd1 .sd1-spec tr:first-child td{border-top-right-radius:var(--r)}
.sd1 .sd1-spec tr:last-child th{border-bottom-left-radius:var(--r)}
.sd1 .sd1-spec tr:last-child td{border-bottom-right-radius:var(--r)}

/* 19. SPEC TABLE FRAME — higher specificity ------------------------------- */
table.sd1-spec,
.sd1 table.sd1-spec,
.entry-content table.sd1-spec{
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid #E8E8E8 !important;
  border-radius:8px !important;
  overflow:hidden !important;
  background:#fff !important;
  margin:0 !important}

table.sd1-spec th,
table.sd1-spec td,
.sd1 table.sd1-spec th,
.sd1 table.sd1-spec td,
.entry-content table.sd1-spec th,
.entry-content table.sd1-spec td{
  border:0 !important;
  border-bottom:1px solid #E8E8E8 !important;
  background:#fff !important}

table.sd1-spec tr:last-child th,
table.sd1-spec tr:last-child td,
.sd1 table.sd1-spec tr:last-child th,
.sd1 table.sd1-spec tr:last-child td{border-bottom:0 !important}

/* 20. BREADCRUMB ----------------------------------------------------------- */
.sd1-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:18px;line-height:28px}
.sd1-crumb a{color:#FFF9F8;text-decoration:none;transition:color .15s}
.sd1-crumb a:hover{color:var(--red);text-decoration:underline}
.sd1-crumb > span{color:#FFF9F8}
.sd1-crumb span[aria-current]{color:#fff;font-weight:700}
.sd1-crumb-sep{color:#FFF9F8;opacity:.7}

@media (max-width:767px){
  .sd1-crumb{font-size:14px;line-height:22px;gap:6px}
}

/* 21. BREADCRUMB CHEVRON --------------------------------------------------- */
/* fill="currentColor" ทำให้ไอคอนรับสีจาก .sd1-crumb เปลี่ยนสีข้อความแล้วไอคอนตามทันที */
.sd1-crumb{color:#FFF9F8}
.sd1-crumb-ico{width:9px;height:16px;flex:none;display:block;
  color:currentColor;opacity:.85}