.desktop-navbar{
display:block;
}

.mobile-only{
display:none;
}

@media(max-width:768px){

.desktop-navbar{
display:none !important;
}

.mobile-only{
display:block !important;
}

}


/* ===============================
   ALAIDEE NAVBAR – LARGE LOGO STYLE
=============================== */
* {
    box-sizing: border-box;
}

body {
  font-family: 'Prompt', sans-serif;
}

/* ===============================
   ALAIDEE NAVBAR – STABLE LARGE LOGO
=============================== */

/* ===============================
   ALAIDEE NAVBAR – PRO VERSION
=============================== */

.navbar.alaidee-navbar {
  height: 68px;
  display: flex;
  align-items: center;
  background: linear-gradient(
      180deg,
      #f2d96b 0%,
      #f2c94c 100%
  ) !important;
  position: relative;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}



/* =====================================
   NAV STRUCTURE – FINAL PRO LAYOUT
===================================== */

/* container เป็น flex หลัก */
.alaidee-navbar .alaidee-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* collapse ต้องกินพื้นที่เต็ม */
.alaidee-navbar .navbar-collapse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

/* ===== LEFT (LOGO) ===== */
.alaidee-navbar .navbar-brand {
    flex: 0 0 auto;
}

/* ===== CENTER ===== */
.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-center .navbar-nav {
    display: flex;
    align-items: center;
    gap: 48px;
}

/* ===== RIGHT ===== */
.nav-right {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}

.nav-right .navbar-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}



.alaidee-center-menu .nav-link {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: 0.2s ease;
}


/* right menu */
.alaidee-right-menu {
  display: flex;
  gap: 36px;
  align-items: center;
}

/* cart */
.cart-icon {
  font-size: 22px;
  position: relative;
}

.cart-badge {
  top: 4px;
  right: -4px;
  font-size: 10px;
}


.alaidee-navbar .nav-link {
  display: inline-block;
  position: relative;
  padding: 0 10px;   /* 🔥 เพิ่ม buffer */
  line-height: 1.2;  /* 🔥 ปรับความสูงตัวอักษร */
}

.alaidee-navbar .nav-link:hover {
  color: #000 !important;
}

.alaidee-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: #000;
  transition: width .25s ease;
}

.alaidee-navbar .nav-link:hover::after {
  width: 100%;
}




.alaidee-navbar .navbar-brand img {
  height: 120px;       /* ขนาดที่คุณชอบ */
  position: relative;
  top: 4px;           /* 🔥 ดันลงให้กลางจริง */
}
/* =========================
   GLOBAL SEARCH BAR
========================= */

.search-zone {
    background: #ffffff;
    padding: 20px 0;
    border-bottom: none;
}

/* ===============================
   PRODUCT TOP SPACING
=============================== */


.search-form {
    display: flex;
    gap: 10px;
}

.search-input {
    flex: 1;
    height: 50px;
    padding: 0 15px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: 0.2s ease;
}

.search-input:focus {
    border-color: var(--ala-yellow);
    outline: none;
}

.search-btn {
    height: 50px;
    padding: 0 25px;
    background: var(--ala-yellow);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.search-btn:hover {
    background: #e0a800;
}

/* =========================
   BREADCRUMB
========================= */

.breadcrumb {
    margin-top: 12px;
    margin-bottom: 18px;
    font-size: 12px;   /* 👈 ลดตรงนี้ */
    color: #6b7280;
}

.breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #f2c94c;
}

.breadcrumb .active {
    color: #1f1f1f;
    font-weight: 600;
}

:root{
  --ala-black:#111111;
  --ala-yellow:#f2c94c;   /* ใช้ตัวนี้เป็นหลัก */
  --ala-green:#1f6b3a;
  --ala-border:#e5e7eb;
  --btn-width: 220px;
  --ala-gap: 18px;
}




/* =========================
   ปรับตัวเลข ในหน้าสินค้า
========================= */

.price{
  color:var(--ala-yellow);
  font-weight:700;
}

.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:500;
  color:var(--ala-green);
}


.product-main-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 0px;
}

.product-main-title .mpn {
    font-weight: 700;
    color: #111;
}

.product-main-title .brand {
    font-weight: 500;
    color: #555;
    margin-left: 8px;
}


.product-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meta-tech {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.meta-row {
    margin-bottom: 8px;
    font-size: 14px;
}

.meta-label {
    color: #888;
    margin-right: 4px;
}


.meta-value {
    color: #111;
}

.meta-value.strong {
    font-size: 18px;
    font-weight: 600;
    color: #000;
}


.meta-row-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 4px;
    align-items: start;
    margin-bottom: 12px;
    font-size: 14px;
}

.meta-left,
.meta-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
}



.meta-row-flex {
    display: flex;
    align-items: center;   /* ⭐ เปลี่ยนเป็น center */
    gap: 30px;
}

.meta-tech {
    flex: 1 1 0%;
    min-width: 0;              /* ⭐ สำคัญมาก */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}


/* =========================
   PRODUCT META INLINE ROW
========================= */

.meta-inline-row {
    display: flex;
    align-items: center;
    gap: 40px;
    font-size: 14px;
    margin-bottom: 14px;
}

.meta-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.meta-item .meta-label {
    color: #9ca3af;
    font-weight: 500;
}

.meta-item .meta-value {
    color: #111;
    font-weight: 600;
}

.meta-item .meta-value.strong {
    font-size: 16px;
}

.tech-text {
    overflow: hidden;
}

/* =========================
   CATEGORY + TECH INLINE
========================= */
.meta-inline-tech {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #444;
    min-width: 0;
}

.tech-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}





.category-tag {
    display: inline-block;
    padding: 4px 12px;
    background: #f0f3f8;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.product-meta-line {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #444;
}

/* ===============================
   AVAILABILITY FLEX VERSION
=============================== */

.availability-row-wrapper {
    margin-bottom: 18px;
}

.availability-card {
    padding: 8px 14px;
    border-radius: 10px;
    min-height: 42px;
}


.availability-text {
    font-size: 50px;
    line-height: 1.2;
}

/* ไอคอนกลมจริง */
.icon-circle,
.icon-truck {
    width: 28px;
    height: 28px;
    border-radius: 50%;       /* 🔥 อันนี้ทำให้กลับมากลม */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

/* สีพื้นหลังกล่องสต๊อก */
.stock-high {
    background: rgba(46, 204, 113, 0.05);
}

.stock-high .icon-circle {
    background: transparent;
    color: #f30a0a;
}

.delivery {
    background: transparent;
    border: 1px solid rgba(154, 123, 0, 0.25);
}

.delivery .icon-truck {
    background: transparent;
    color: #9a7b00;
}

.highlight-number {
    font-size: 15px;
    font-weight: 600;
    opacity: 0.85;
  font-weight: 600;
  }


/* ===== จัดตรงหน้าสินค้า ส่วน พร้อมส่ง จัดส่งภายใน ===== */


/* ===ควบคุมแถวของราคา ==== */

.price-line-extended {
    display: grid;
    grid-template-columns: 320px 220px 220px;
    gap: var(--ala-gap);
    align-items: center;
    width: 100%;
}

.price-availability-inline {
    display: contents;
}

.price-left{
    grid-column: 1;
}

.price-availability-inline .availability-pill:nth-child(1) {
    grid-column: 2;
}

.price-availability-inline .availability-pill:nth-child(2) {
    grid-column: 3;
}


.price-availability-inline .availability-pill {
    width: var(--btn-width);
}

.price-line-extended,
.buy-row {
    width: 100%;
        gap: var(--ala-gap);
}

.availability-pill {
    display: flex;              /* ⭐ สำคัญมาก */
    align-items: center;        /* จัดกลางแนวตั้ง */
    justify-content: center;    /* จัดกลางแนวนอน */
    height: 35px;
    padding: 0;   /* ⭐ เอา padding ออก */
    border-radius: 8px;

    font-size: 14px;
    font-weight: 400;

    box-shadow: none;
    border: 0px solid rgba(0,0,0,0.05);
}

.availability-pill strong {
    font-weight: 700;
    font-size: 16px;
    margin: 0 6px;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
}


.availability-pill.stock {
    background: #f4fbf7;   /* เขียวอ่อนกว่าเดิม */
    color: #2e7d32;
}

.availability-pill.delivery {
    background: #fff8e6;   /* เหลืองครีม */
    color: #2e7d32;
}

.line-box{
    display:flex;
    align-items:center;
    gap:15px;
}

.line-qr{
    width:80px;
    border-radius:6px;
}

.line-action{
    display:flex;
    flex-direction:column;
}




html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-section {
    flex: 1;
}


/* ===============================
   BASE BUTTON STRUCTURE
=============================== */

.ala-btn { 
height: 58px; 
width: var(--btn-width); 
border-radius: 14px; 
border: none; 
font-size: 16px; 
font-weight: 600; 
display: flex; /* เปลี่ยนจาก inline-flex */ 
align-items: center; 
justify-content: center; 
gap: 8px; 
cursor: pointer; 
transition: all .18s ease; }


/* ===============================
   GOLD CART BUTTON
=============================== */


.ala-btn-cart{
    background: #f2c94c;
    color: #111;
    border: 1px solid #d4b100;
    box-shadow: none;
}



.ala-btn-cart:hover{
    background: #e6bb38;
    transform: none;
}


.ala-btn-cart:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 #c28f00;
}



/* ===============================
   GREEN BUY BUTTON
=============================== */

.ala-btn-buy{
    background: #2f7f4f;
    color: #fff;
    border: 1px solid #2a6a44;
    box-shadow: none;
}



.ala-btn-buy:hover{
    background: #276b43;
    transform: none;
}

.ala-btn-buy:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 #2a6a44;
}


.buy-row{
    display: grid;
    grid-template-columns: 240px var(--btn-width) var(--btn-width);
    gap: var(--ala-gap);
    align-items: center;
    width: 100%;
}


.buy-box {
    display: flex;
    align-items: flex-start;
    width: 100%;
}


.cta-row {
    display: flex;
    gap: 16px;
    margin-left: auto;   /* ดันปุ่มไปขวาสุด */
    gap: var(--ala-gap);
}





.availability-text {
    white-space: nowrap;
}


.buy-top-row {
    display: flex;
    align-items: center;
    gap: 24px;
}




/* ===============================
   MENU LAYOUT – CLEAN VERSION
=============================== */
/* ===============================
   ALAIDEE NAVBAR – FINAL STABLE
=============================== */

.alaidee-navbar .navbar-nav {
  align-items: center;
}

/* hover */
.alaidee-navbar .nav-link:hover {
  color: #000 !important;
}




.alaidee-navbar .nav-link {
    color: #1f1f1f !important;
    font-weight: 600;
    transition: all .25s ease;
}

.alaidee-navbar .nav-link:hover{
    color:#1f6b3a !important;
}

.alaidee-navbar .nav-link.active{
    color:#1f6b3a !important;
    font-weight:700;
}

.alaidee-navbar .nav-link.active::after{
    width:100%;
    background:#1f6b3a;
}

/* CART */
.cart-icon {
  font-size: 1.2rem;
}

.btn-ala-yellow{
  background: var(--ala-yellow);
  color:#000;
  font-weight:600;
  border:none;
}

.btn-ala-yellow:hover{
  background:#000;
  color:#fff;
}

.btn-ala-green{
  background: var(--ala-green);
  color:#fff;
  border:none;
}


/* ================================
   ภาพซ้ายและฝั่งขวา
================================ */

/*
.main-section-product .row {
    align-items: stretch;
}
*/

.main-product-top-row {
    align-items: stretch;
}


.col-lg-5,
.col-lg-7 {
  display: flex;
}
.product-card {
  flex: 1;
   height:auto;

  display: flex;              /* 🔥 เพิ่ม */
  flex-direction: column;     /* 🔥 เพิ่ม */

  background: #ffffff;
  border-radius: 26px;
  padding: 32px;

  border: 1px solid #ececec;

  box-shadow:
      0 25px 60px rgba(0,0,0,0.06),
      0 8px 20px rgba(0,0,0,0.04);

  position: relative;
  overflow: hidden;

  transition: all .25s ease;
}
.product-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 10px;
  background: linear-gradient(
      90deg,
      #e4c552 0%,
      #f2d96b 50%,
      #e4c552 100%
  );

  border-top-left-radius: 28px;
  border-top-right-radius: 28px;

  z-index: 0;
  box-shadow:
    0 4px 8px rgba(242,201,76,0.25);
}



.alaidee-breadcrumb {
  margin-bottom: 14px;
  color: #6b7280;
}


.product-card h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

.product-card table {
  margin-bottom: 0;
}

.product-card ul {
  padding-left: 18px;
}

.spec-info-wrapper .product-card{
  padding: 26px 28px;  /* ลดจาก 32px */
}
.spec-info-wrapper .product-card{
  min-height: 420px;
}
.product-card h4{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 24px;
  position: relative;
}

.product-card h4::after{
  content:"";
  display:block;
  width: 60px;
  height: 3px;
  background: var(--ala-yellow);
  margin-top: 10px;
  border-radius: 4px;
}
.product-card table th{
  font-weight:600;
  color:#111;
}

.product-card table td{
  color:#444;
}




/* ===== Image Area ===== */
.product-image-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-product-image {
  max-height: 520px;
  width: 100%;
  object-fit: contain;
}

.thumb-row {
  margin-top: 18px;
}

.main-section-product {
  background: #f3f4f6;
  padding-top: 20px;
  padding-bottom: 40px;
}



.product-image-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* column เป็น flex */
.col-lg-5,
.col-lg-7 {
  display: flex;
}

.spec-card,
.info-card{

    margin-top:10px;
}


/* ==================================
   ALAIDEE FOOTER
================================== */

.alaidee-footer{
    background:#f2c94c;
    color:#222;
    padding:25px 0 10px;
    font-size:14px;
}

/* หัวข้อ */

.alaidee-footer h6{
    color:#111;
    font-size:18px;
    font-weight:700;
    margin-bottom:12px;
}

/* คอลัมน์ */

.footer-col{
    position:relative;
    padding-bottom:15px;
}

/* เส้นแบ่ง */

.footer-col{
    border-right:1px solid rgba(0,0,0,.12);
    padding-left:20px;
    min-height:180px;
}

.footer-col:last-child{
    border-right:none;
}

.footer-col:first-child{
    border-left:1px solid rgba(0,0,0,.12);
}
/* คำอธิบายบริษัท */

.footer-about{
    font-size:13px;
    line-height:1.6;
    color:#333;
    margin-bottom:12px;
}

/* รายการ */

.alaidee-footer ul{
    padding-left:0;
    margin:0;
}

.alaidee-footer li{
    list-style:none;
    margin-bottom:6px;
    font-size:14px;
}

/* ลิงก์ */

.footer-link{
    color:#222;
    text-decoration:none;
}

.footer-link:hover{
    color:#000;
    text-decoration:underline;
}

/* ติดต่อ */

.line-contact-box{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:8px;
}

.footer-line-qr{
    width:80px;
    border-radius:8px;
}

.line-contact-action{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.line-contact-action small{
    font-size:12px;
    color:#111;
    font-weight:600;
}

/* เส้นบน copyright */

.alaidee-footer .border-top{
    border-color:rgba(0,0,0,.15)!important;
    margin-top:15px;
    padding-top:10px;
    font-size:13px;
}


.footer-col:first-child{
    border-left:1px solid rgba(0,0,0,.15);
    padding-left:20px;
}

.alaidee-footer .row{
    align-items:stretch;
}

.footer-check{
    color:#046e04;
    font-weight:700;
    margin-right:6px;
}
.footer-phone,
.footer-line{

    color:#144daf;
    font-weight:700;
    font-size:18px;

    text-decoration:none !important;

}

.footer-line{

    color:#009D3A;

}

.footer-phone:hover,
.footer-line:hover{

    text-decoration:none !important;

    opacity:.85;

}



/* ===============================
   ALAIDEE LAYOUT SYSTEM
=============================== */

:root{
  --site-max-width:1500px;
}

.alaidee-container{
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.main-section {
  padding-top: 5px;
  padding-bottom: 60px;
}

.main-section-sm {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ===============================
   PRODUCT PAGE STYLE
=============================== */

.product-wrap {
  background: #fff;
  border-radius: 18px;
}

.product-title {
  font-size: 1.7rem;
  font-weight: 700;
}

.meta-label {
  color: #9ca3af;
}

.meta-value {
  color: #374151;
}

.main-product-image {
  max-height: 520px;
  width: 100%;
  object-fit: contain;
  padding: 0;          /* 🔥 เอา padding ออก */
  border: none;        /* 🔥 เอา border ออก */
  border-radius: 0;    /* 🔥 เอา radius ออก */
}
.product-thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
}


.price-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 12px 14px;
    border-radius: 16px;

    background: linear-gradient(180deg,#fffdf6,#fff6d9);
    border: 1px solid rgba(242,201,76,0.25);

    height: 80px;   /* ⭐ ทำให้สูงใกล้ปุ่ม */
}

.price-main {
    font-size: 35px;
    font-weight: 800;
    color: #c7a300;
    line-height: 1;
    text-align: center;
}

.price-vat {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    opacity: .85;
    margin-top: -2px;   /* 🔥 ดึงให้ชิดขึ้น */
    text-align: center;
}


.price-block {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 18px;
}

.price-main .currency {
    font-size: 26px;
    font-weight: 700;
    margin-right: 6px;
    vertical-align: top;
}




.price-block {
  margin-bottom: 24px;
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
}



/* =========================
   QTY MODERN – PROFESSIONAL
========================= */

.qty-modern {
    display: flex;
    align-items: center;
    height: 58px;
    border: 1px solid #e2e2e2;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    width: 170px;
}

/* ปุ่ม - + */
.qty-modern .qty-btn {
    width: 50px;
    height: 100%;
    border: none;
    background: #f7f7f7;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}

.qty-modern .qty-btn:hover {
    background: #f2c94c;
    color: #000;
}

/* ช่องตัวเลข */
.qty-input-modern {
    width: 70px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    outline: none;
    background: #fff;
}

/* เอาลูกศรขึ้นลงออก */
.qty-input-modern::-webkit-outer-spin-button,
.qty-input-modern::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-input-modern {
    -moz-appearance: textfield;
}



/* ===============================
   PRICE TIER UNDER QTY
=============================== */

.tier-wrapper {
    margin-top: 0px;
    width: calc(
        240px + var(--ala-gap) + var(--btn-width)
    );
        max-width: 100%;
}


.tier-header-new {
    padding: 16px 20px;
    font-weight: 700;
    background: linear-gradient(90deg,#fff9e6,#fff4cc);
    border-bottom: 1px solid #e5e5e5;
    text-align: center; 
}

.tier-col-header {
    display: grid;
    grid-template-columns: 1fr 160px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    border-bottom: 1px solid #ececec;
    background: #fafafa;
}

.tier-box-new {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

/* Rows */
.tier-row-new {
    display: grid;
    grid-template-columns: 1fr 160px;
    padding: 6px 20px;  
    border-bottom: 1px solid #ececec;
}


.tier-row-new:last-child {
    border-bottom: none;
}


.tier-price {
    text-align: right;
    font-weight: 700;
    font-size: 14px; 
    color: var(--ala-green);
    font-variant-numeric: tabular-nums;
}

.tier-row-new:hover {
    background: #fafafa;
}

.tier-qty {
    text-align: left;
    font-variant-numeric: tabular-nums;
    font-weight: 600;  
    font-size: 14px;    
}



/* แถวแรกเป็น best tier */
.tier-row-new:first-child {
    background: linear-gradient(90deg,#fffbe6,#fff4cc);
    font-weight: 700;
}

/* ===============================
   TIER + TRUST SIDE BY SIDE
=============================== */
.tier-trust-row{
    display: flex;
    align-items: flex-start;   /* 🔥 สำคัญมาก */
    gap: 30px;
    margin-top: 12px;
}

.cta-and-trust {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-top: 20px;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.badge-icon {
  width: 28px;
  height: 28px;
  background: #f2d66b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
     box-shadow:
  0 30px 60px rgba(0,0,0,0.08),
  0 10px 25px rgba(0,0,0,0.06);
}

/* ===============================
   TRUST PANEL – PRODUCT PAGE
=============================== */

.trust-panel{
    padding: 22px 24px;
    margin-top: 0 !important;
    border-radius: 18px;
    width: var(--btn-width);
    max-width: var(--btn-width);
    background: linear-gradient(
        180deg,
        #fff8dc 0%,
        #fff2bf 100%
    );

    border: 1px solid rgba(242,201,76,0.35);
 margin-top: 0px;   /* ลอง 30 ก่อน */
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow:
        0 20px 40px rgba(0,0,0,0.05),
        0 6px 16px rgba(0,0,0,0.04);
}

/* แถวแต่ละรายการ */
.trust-item{
    display: flex;
    align-items: center;
    gap: 14px;

    font-size: 15px;
    font-weight: 500;
    color: #1f1f1f;
     white-space: nowrap;   /* ⭐ ห้ามตัดบรรทัด */
}

/* ไอคอนกลม */
.trust-icon{
    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--ala-green);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 14px;

    box-shadow:
        0 6px 14px rgba(31,107,58,0.25);
}

.trust-wrapper{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 18px;   /* ใช้ gap เดียวกับปุ่ม */
}



/* ===============================
   RELATED PRODUCTS
================================ */

.related-card{
    background:#fff;
    border-radius:26px;
    padding:20px 24px;
}

.related-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all .2s ease;
}

.related-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.related-img-wrap {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.related-img-wrap img {
    max-height: 100px;
    object-fit: contain;
}

.related-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    min-height: 38px;
}

.related-price {
    color: #1f6b3a;
    font-weight: 700;
    font-size: 15px;
}



.related-card h4::after {
  display: block;
  margin: 12px auto 0;
}

.related-item img{

    width:100%;

    height:120px;

    object-fit:contain;

    display:block;

}


/* ===============================
   PRODUCT TRUST BADGES
================================ */

.badge-icon i {
    color: #2e7d32; /* เขียวเข้ม */
    font-size: 14px;
}




.product-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.product-card ul li {
    display: grid;
    grid-template-columns: 180px 1fr;
    padding: 6px 0;          /* ลดจาก 10px */
    border-bottom: 1px solid #eee;
    font-size: 14px;         /* ลดนิดเดียวพอ */
    line-height: 1.4;        /* คุมความแน่น */
}


.product-card ul li:last-child {
    border-bottom: none;
}

.product-card ul li strong {
    font-weight: 600;
    color: #111;
}

.search-input::placeholder {
    font-size: 14px;      /* บังคับให้เหมือนกัน */
    font-weight: 400;
    color: #6b7280;       /* สีเทาแบบ professional */
    opacity: 1;           /* 🔥 สำคัญมาก */
}





.category-card-modern {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: all 0.25s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.category-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.category-image {
    height: 180px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-image img {
    max-height: 140px;
    max-width: 90%;
    object-fit: contain;
}

.sub-list-modern a {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
    text-decoration: none;
}

.sub-list-modern a:hover {
    color: #f2c94c;
}


.ala-alert {
    padding: 14px 18px;
    border-radius: 10px;
    font-weight: 500;
    margin-bottom: 20px;
}

.ala-alert-error {
    background: #fff3f3;
    border-left: 5px solid #e53935;
    color: #c62828;
}

.ala-alert-success {
    background: #fffbea;
    border-left: 5px solid #f2c94c;
    color: #333;
}

.ala-alert-warning {
    background: #fff8e1;
    border-left: 5px solid #f2c94c;
    color: #444;
}


.search-suggest-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: calc(100% - 110px); /* หักปุ่ม Search */
    background: #fff;
    border-radius: 10px;
    z-index: 999999;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.suggest-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.15s ease;
}

.suggest-item:hover {
    background: #f2f2f2;
}

.search-wrapper {
    position: relative;   /* ⭐ เพิ่มอันนี้ */
    overflow: visible;    /* ⭐ สำคัญมาก */
}

.search-wrapper .search-suggest-box {
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    border-radius: 16px;
}

.cart-icon {
    font-size: 20px;
}

.cart-badge {
    position: absolute;
    top: 6px;
    right: 0px;
    background: #ff3b3b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 50px;
    line-height: 1;
    min-width: 18px;
    text-align: center;
}

.navbar,
.search-zone {
  border-bottom: none !important;
}


.search-form {
    display: flex;
    gap: 10px;
    position: relative;   /* ⭐ เพิ่มบรรทัดนี้ */
}


.sku-line {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

.sku-line .meta-label {
    font-weight: 500;
}

.sku-line .meta-value {
    font-weight: 600;
    color: #444;
}

.related-link{
    text-decoration: none !important;
    color: inherit;
}

.related-link:hover{
    text-decoration: none !important;
}

.related-link,
.related-link:hover,
.related-link:focus,
.related-link:active{
    text-decoration: none !important;
}

/* 🔥 ตัวนี้สำคัญสุด */
.related-link *{
    text-decoration: none !important;
}
.text-muted.small {
    min-height: 42px;   /* 🔥 เพิ่มจาก 38 เป็น 42 */

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    line-height: 1.4;
}
.related-price,
.text-danger.small {
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   SEARCH PRODUCT IMAGE
========================= */

.product-img-box{

    height:140px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;
}

.product-img-box img{

    max-width:100%;

    max-height:120px;

    width:auto !important;

    height:auto !important;

    object-fit:contain;

    display:block;

    margin:auto;
}

/* SALES SUPPORT */

.sales-card{
    position:absolute;
    top:-20px;
    right:-25px;
    cursor:pointer;

    z-index:100;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-decoration:none;
    text-align:center;
}

.sales-card:hover{
    transform:translateY(-2px);
}

.sales-avatar-wrap{
    position:relative;
}

.sales-avatar{
    width:72px;
    height:72px;

    border-radius:50%;
    object-fit:cover;

    border:3px solid #f2c94c;

    box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.sales-online{
    position:absolute;

    right:2px;
    bottom:2px;

    width:16px;
    height:16px;

    background:#41c84a;

    border-radius:50%;
    border:2px solid #fff;

    animation:onlinePulse 2s infinite;
}

.sales-name{
    margin-top:6px;
    font-size:14px;
    font-weight:700;
    color:#111;
}

.sales-chat{

    margin-top:6px;

    background:#00c300;

    color:#fff;

    font-size:12px;
    font-weight:500;

    padding:7px 14px;

    border-radius:20px;

    white-space:nowrap;

    box-shadow:0 5px 15px rgba(0,195,0,.25);
}



.cart-icon-img{
    width:45px;
    height:45px;
    object-fit:contain;
    display:block;
}

.mobile-cart .cart-icon-img{
    width:40px;
    height:40px;
}

.cart-icon{
    position:relative;
}


/* =========================
   PAGINATION
========================= */

.pagination{
    gap:6px;
}

.pagination .page-link{
    border:none;
    border-radius:10px;
    min-width:42px;
    text-align:center;

    color:#333;
    font-weight:500;

    background:#fff;

    box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.pagination .page-link:hover{
    background:#ffe08a;
    color:#111;
}

.pagination .active .page-link{
    background:#f2c94c;
    color:#111;
    font-weight:700;
}

.pagination .disabled .page-link{
    background:#f8f8f8;
    color:#999;
}


/* ===================================
   ALAIDEE MOBILE BOTTOM NAV PRO
=================================== */

/* ===================================
   MOBILE BOTTOM NAV - TEXT ONLY
=================================== */

.mobile-bottom-nav{

    position:fixed;
    left:0;
    right:0;
    bottom:0;

    height:30px;

    background:#fff;

    border-top:1px solid #ececec;

    display:flex;
    align-items:center;
    justify-content:space-evenly;

    z-index:9999;

    box-shadow:0 -3px 12px rgba(0,0,0,.05);

}

.mobile-bottom-nav a{

    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    color:#666;

    font-size:14px;

    font-weight:600;

    transition:.2s;

    height:100%;

}

.mobile-bottom-nav a:hover{

    color:#1F2A44;

}

.mobile-bottom-nav a.active{

    color:#1F2A44;

    font-weight:700;

    position:relative;

}

.mobile-bottom-nav a.active::after{

    content:"";

    position:absolute;

    bottom:6px;

    left:50%;

    transform:translateX(-50%);

    width:34px;

    height:3px;

    background:#f2c94c;

    border-radius:999px;

}

@media(min-width:769px){

.mobile-bottom-nav{

display:none;

}

}



@media(min-width:769px){

.mobile-bottom-nav{

display:none;

}

}






@keyframes onlinePulse{

    0%{
        box-shadow:0 0 0 0 rgba(65,200,74,.7);
    }

    70%{
        box-shadow:0 0 0 10px rgba(65,200,74,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(65,200,74,0);
    }
}









/* =====================================================
   ALAIDEE MOBILE SYSTEM (CLEAN)
===================================================== */

@media (max-width:768px){



    /* mobile cart icon */

.nav-right{
display:flex !important;
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
}

.nav-right .nav-link{
font-size:22px;
}

.cart-badge{
top:-4px;
right:-8px;
}

/* ================= NAVBAR ================= */

.alaidee-navbar .alaidee-container{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:68px;
    padding-left:0;
    padding-right:0;
}

/* hamburger */
.navbar-toggler{
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
}

/* logo center */
.navbar-brand{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin:0;
}

/* logo size */
.navbar-brand img{
    height:52px !important;
}



/* ================= MOBILE MENU ================= */

.navbar-collapse{
    position:absolute;
    top:68px;
    left:0;
    right:0;

    background:#ffffff;

    padding:16px 20px;

    box-shadow:0 20px 40px rgba(0,0,0,0.15);

    z-index:999;
}

/* menu vertical */

.nav-center .navbar-nav,
.nav-right .navbar-nav{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
}

.navbar-nav .nav-link{
    width:100%;
    padding:14px 0;
    border-bottom:1px solid #f1f1f1;
}

/* ================= SEARCH BAR ================= */

.search-zone{
    position:sticky;
    top:68px;
    z-index:999;

    background:#ffffff;

    box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.search-form{
    display:flex;
    gap:8px;
}

.search-input{
    flex:1;
    height:42px;
    font-size:16px;
}

.search-btn{
    height:42px;
    padding:0 16px;
}

/* ================= PRODUCT MOBILE ================= */

.product-card{
    padding:35px 6px 6px 6px;
   
}


.product-img-box{

    width:100%;

    height:120px;

    margin-top:20px !important;

    display:flex;
    justify-content:center;
    align-items:center;
}


}

.product-card h6{
    font-size:12px;
margin-bottom:2px;
}

.product-card .price{
    font-size:14px;
}

/* ================= CTA ================= */

.cta-row{
    flex-direction:column;
}

.ala-btn{
    height:64px;
    font-size:18px;
}

/* ================= PRICE ================= */

.price-line-extended{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

/* ================= STOCK ================= */

.availability-row-wrapper{
    flex-direction:column;
}





@media(max-width:768px){

.nav-right .nav-link{
font-size:22px;
}

.cart-badge{
top:-4px;
right:-8px;
}
}

/* MOBILE TOPBAR */

.mobile-topbar{
display:none;
}

@media(max-width:768px){

.mobile-topbar{
display:flex;
align-items:center;
gap:10px;

background:#f2c94c;

padding:8px 10px;

position:fixed;
top:0;
left:0;
right:0;   /* ⭐ เพิ่ม */
width:100%; /* ⭐ เพิ่ม */

z-index:9999;
}

body{
padding-top:66px;
}


/* logo */

.mobile-logo img{
height:50px;
width:auto;
}

/* search */

.mobile-search{
flex:1;
}

.mobile-search form{
     display:flex;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
}

.mobile-search input{

    flex:1;

    border:2px solid transparent;
    border:none;

    border-radius:20px 0 0 20px;

    padding:8px 12px;

    font-size:16px;
     -webkit-appearance:none;
    appearance:none;
}

.mobile-search input:focus{

    outline:none;

    border-color:#f2c94c;

    box-shadow:none;
}
}


.mobile-search button{

width:40px;

border:none;

background:#fff;

border-radius:0 20px 20px 0;

font-size:16px;

}

/* filter icon */

.mobile-filter{
font-size:20px;
}


.mobile-cart{
font-size:22px;
position:relative;
}

.mobile-cart a{
text-decoration:none;
color:#333;
}
/* hide old navbar on mobile */





/* MOBILE ONLY */

.mobile-only{
display:none;
}

@media(max-width:768px){

.mobile-only{
display:block;
}

}
.mobile-logo{
display:block;
}

@media (max-width:768px){

.navbar-brand{
display:none !important;
}

}
@media (max-width:768px){

.navbar-brand,
.navbar-brand img{
display:none !important;
}

}

@media (max-width:768px){

.alaidee-navbar{
display:none !important;
}

}

@media (max-width:768px){

.search-zone{
    display:none !important;
    position:static !important; /* 🔥 ตัด sticky ทิ้ง */
    
}

}


@media (max-width:768px){

.breadcrumb{
    font-size: 11px !important;   /* จาก 10 → 11 อ่านง่ายขึ้น */
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    line-height: 1.5;
    padding-left: 2px;
}

}

/* กันยาวเกิน */
.breadcrumb{
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ซ่อน scrollbar */
.breadcrumb::-webkit-scrollbar{
    display:none;
}

/* ===============================
   PRODUCT MOBILE COMPACT (PRO)
=============================== */
@media (max-width:768px){

/* 🔹 การ์ดเล็กลง */
.product-card{
    padding: 12px !important;
    border-radius: 16px;
}

/* 🔹 รูปหลัก */
.main-product-image{
      max-height:150px !important;
    margin-top:5px !important;
    object-fit: contain;
    margin-bottom: 6px;
}

/* 🔹 row thumbnail */
.thumb-row{
    margin-top: 6px !important;
    gap: 6px !important;
}

.product-thumb{
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

/* 🔹 text ใต้รูป */
.product-image-area h6{
    font-size: 12px !important;
    margin-bottom: 4px !important;
}

/* 🔹 ปุ่มใต้รูป */
.image-action-buttons{
    margin-top: 5px !important;
    gap: 5px !important;
}

.image-action-buttons .btn{
    font-size: 13px;
    padding: 8px;
    border-radius: 10px;
}

/* 🔹 ลดช่องว่างรวม */
.product-image-area{
    margin-top: -6px;
}

}

@media (max-width:768px){

.product-card{
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

}

/* ===============================
   PRODUCT MOBILE PRO LAYOUT
=============================== */
@media (max-width:768px){


/* 🔹 PRICE */
.price-main{
    font-size: 24px !important; /* ลดจากเดิม */
}

.price-vat{
    font-size: 12px;
}

/* 🔹 STOCK + DELIVERY */
.price-availability-inline{
    margin-top: 6px;
    gap: 6px;
}

.availability-pill{
    font-size: 12px;
    padding: 4px 8px;
}

/* 🔹 BUY BOX */
.buy-row{
    gap: 8px;
}

/* qty */
.qty-modern{
    height: 42px;
}

.qty-input-modern{
    width: 50px;
    font-size: 14px;
}

/* ปุ่ม */
.ala-btn{
    height: 44px;
    font-size: 14px;
    border-radius: 10px;
}

/* 🔹 TIER TABLE */
.tier-box-new{
    padding: 10px;
}

.tier-header-new{
    font-size: 14px;
    padding: 6px;
}

.tier-row-new{
    font-size: 13px;
    padding: 6px 0;
}

/* 🔹 TRUST PANEL */
.trust-panel{
    margin-top: 10px;
}

.trust-item{
    font-size: 13px;
    gap: 6px;
}

/* 🔹 ลด spacing ทั้งบล็อก */
.product-card{
    margin-bottom: 1px;
}

}

@media (max-width:768px){

.price-line-extended{
    display:flex !important;
    flex-direction:column;
    gap:10px;
}

.price-left{
    width:100%;
    height:auto;
    padding:14px;
}

.price-availability-inline{
    display:flex !important;
    gap:8px;
    width:100%;
}

.availability-pill{
    flex:1;
}

}





@media (max-width:768px){

/* 🔥 TITLE */

.product-main-title{
    display:flex;
    flex-direction:row !important;   /* 🔥 บังคับให้อยู่บรรทัดเดียว */
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    order:1;                /* 🔥 ห้ามตกบรรทัด */
}

.product-main-title .brand{
    font-size:14px;
    color:#666;
    white-space:nowrap;
}

}

/* 🔥 META GRID */
.meta-inline-row{
    display:flex !important;     /* 🔥 เปลี่ยนจาก grid → flex */
    grid-template-columns: 1fr 1fr;
    gap: 12px; 
    font-size:13px;
    margin-bottom:10px;
    order:2;
}

/* แต่ละ item */
.meta-item{
    display:flex;
    flex-direction: row; 
    gap:4px;
}
/* label */
.meta-label{
    font-size:11px;
    color:#9ca3af;
}

/* value */
.meta-value{
    font-size:13px;
    font-weight:600;
    color:#111;
}

/* 🔥 category */
.category-tag{
    font-size:12px;
    padding:4px 10px;
}


@media (max-width:768px){


/* 🔥 จัดให้อยู่ใต้ title ชัด */
.tech-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    margin-top:4px;
    
}

}


@media (max-width:768px){

/* 🔥 เปลี่ยน container ให้ควบคุมลำดับได้ */
.product-info-wrap{
    display:flex;
    flex-direction:column;
}
}

@media (max-width:768px){

/* 🔥 เปลี่ยนเป็น horizontal scroll */
.related-row{
    display:flex !important;
    overflow-x:auto;
    gap:10px;
    padding-bottom:6px;

    scroll-snap-type: x mandatory;
}

/* 🔥 ซ่อน scrollbar */
.related-row::-webkit-scrollbar{
    display:none;
}

/* 🔥 1 แถว = 4 ชิ้น */
.related-row > div{
    flex: 0 0 25%;   /* 👈 4 ช่อง */
    max-width: 25%;

    scroll-snap-align: start;
}

/* 🔥 การ์ดเล็กลงให้พอดีมือถือ */
.related-item{
    padding:10px 6px;
}

/* 🔥 รูป */
.related-img-wrap{
    height:70px;
}

.related-img-wrap img{
    max-height:60px;
}

/* 🔥 title */
.related-title{
    font-size:12px;
    min-height:30px;
}

/* 🔥 ราคา */
.related-price{
    font-size:13px;
}

/* 🔥 ปุ่ม */
.related-add-cart{
    font-size:11px;
    padding:6px;
}

}

@media (max-width:768px){

.product-info-wrap{
    display:flex;
    flex-direction:column;
}

/* TITLE */
.product-main-title{
    order:1;
}

/* 🔥 ตัวที่คุณต้องการ */
.product-short-desc{
    order:2;
    margin-top: -2px;     /* 🔥 ดันขึ้น */
    margin-bottom: 6px;
}

/* META */
.meta-inline-row{
    order:3;
}

/* CATEGORY */
.meta-inline-tech{
    order:4;
}

}

@media (max-width:768px){


/* 🔥 ตัวแก้จริง */
.meta-inline-row .sku-item{
     flex: 0 0 auto !important;
    width: auto !important;
}

}

@media (max-width:768px){

/* ใช้ flex คุม layout */
.meta-inline-row{
    display:flex;
    flex-wrap: nowrap !important;
    gap:6px 12px;
}

/* บรรทัดแรก */
.meta-inline-row .meta-item:nth-child(1),
.meta-inline-row .meta-item:nth-child(2){
    flex: 0 0 auto;
}



/* กัน margin เพี้ยน */
.meta-inline-row .meta-item{
    margin:0;
}

}

@media (max-width:768px){

.meta-inline-row{
    display:flex !important;
    gap:6px 12px;
}


/* หมวดหมู่มาอยู่แถวเดียวกับ SKU */
.meta-inline-row .category-item{
    flex: 0 0 auto !important;
}

}

.meta-inline-row{
    display:flex !important;
    gap:8px 16px;
}

/* ป้องกันโดนบีบ */
.meta-inline-row .category-item{
    margin-left: 10px;
}

@media (max-width:768px){

.meta-inline-row{
    display:flex !important;
    gap:6px 12px;
}

.meta-inline-row .sku-item,
.meta-inline-row .category-item{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* กันติดกันเกินไป */
.meta-inline-row .category-item{
    margin-left: 6px;
}

}

@media (max-width:768px){

/* 🔥 กล่องราคาเล็กลง */
.price-left{
    padding: 8px 10px !important;
    border-radius: 12px;
}

/* 🔥 ตัวเลขราคา */
.price-main{
    font-size: 20px !important;
}

/* 🔥 VAT */
.price-vat{
    font-size: 10px;
}

/* 🔥 ลดความสูงรวม */
.price-left{
    height: auto !important;
}

}

/* ===== MOBILE BUY ROW FIX ===== */
@media (max-width:768px){

.buy-row.mobile-3col{
    display: grid !important;
    grid-template-columns: 90px 1fr 1fr !important;
    gap: 8px;
    width: 100%;
}

/* กัน bootstrap มายุ่ง */
.buy-row.mobile-3col > *{
    min-width: 0;
}

/* qty */
.qty-modern{
    width: 100%;
    height: 42px;
}

/* ปุ่ม */
.ala-btn{
    height: 42px;
    font-size: 13px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* สี */
.ala-btn-cart{
    background: #f2c94c;
    border-radius: 10px;
}

.ala-btn-buy{
    border-radius: 10px;
}

}

@media (max-width:768px){

.meta-inline-tech{
    display:flex !important;
    flex-direction:row !important;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
}

.meta-inline-tech .meta-item{
    white-space: nowrap;
    font-size:12px;
}

}

@media (max-width:768px){

/* 🔥 ตัดความกว้าง fix ของปุ่ม */
.ala-btn{
    width: 100% !important;
}

/* 🔥 ปรับ grid ใหม่ให้บาลานซ์ */
.buy-row.mobile-3col{
    grid-template-columns: 80px 95px 1fr !important;
}

/* 🔥 ลด padding ปุ่ม cart */
.ala-btn-cart{
    padding: 0 10px;
}

/* 🔥 ทำให้คำไม่ดันปุ่ม */
.ala-btn-cart span{
    display:none;   /* ซ่อน icon ถ้าล้น */
}

/* 🔥 ลด font */
.ala-btn{
    font-size:13px;
}
.buy-row.mobile-3col{
    grid-template-columns: 70px 95px 95px !important;
}
}
@media (max-width:768px){

.ala-btn-cart,
.ala-btn-buy{
    width:95px !important;
    flex: 0 0 auto !important;
}

.buy-row.mobile-3col{
    grid-template-columns: 135px 95px 95px !important;
}

}

@media (max-width:768px){

/* ===== WRAPPER ===== */
.tier-trust-row{
    gap:10px;
}

/* ===== TIER TABLE ===== */
.tier-wrapper{
    width: 100% !important;
    max-width: 240px;   /* 👈 อย่าเล็กเกิน */
}

/* กล่อง */
.tier-box-new{
    font-size: 12px;   /* ✅ ขนาดที่อ่านได้ */
}

/* header */
.tier-header-new{
    font-size: 13px;
    padding: 6px;
}

/* column header */
.tier-col-header{
    font-size: 11px;
    padding: 8px 10px;
}

/* row */
.tier-row-new{
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 1fr auto;  /* 👈 fix layout */
    align-items: center;
}

/* qty */
.tier-qty{
    font-size: 12px;
    white-space: nowrap;   /* 👈 ห้ามแตก */
}

/* price */
.tier-price{
    font-size: 12px;
    white-space: nowrap;
}
}

@media (max-width:768px){

.trust-panel{
    display:none;
}

.tier-wrapper{
    max-width:100% !important;
}

}
@media (max-width:768px){

/* ตัด margin ของ buy */
.buy-box{
    margin-bottom: 6px !important;
}

/* ดึง tier ขึ้น */
.tier-trust-row{
    margin-top: 0 !important;
}

/* ดึง wrapper ขึ้นอีก */
.tier-wrapper{
    margin-top: 0 !important;
}
.row.g-4{
    --bs-gutter-y: 1px !important;   /* จาก ~24px → 8px */
}


/* 🔥 ดึง availability ขึ้น */
.price-availability-inline{
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

/* 🔥 ดึงปุ่มขึ้น */
.buy-box{
    margin-top: 0 !important;
}

/* 🔥 ลดช่องว่างทั้งหมดระหว่าง block นี้ */
.price-block{
    margin-bottom: 4px !important;
}

.alaidee-breadcrumb{
    font-size: 11px !important;   /* เดิม ~11-12 */
    line-height: 1.3;
}

.alaidee-breadcrumb a{
    font-size: 11px !important;
}
}

@media (max-width:768px){

.price-main{
    color: #1e40af !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

}
@media (max-width:768px){

.related-row{
    display:flex !important;
    overflow-x:auto;
    gap:12px;
    padding-bottom:10px;
}

.related-row .col-6{
    flex: 0 0 33.333%;   /* 👈 3 ชิ้นพอดี */
    max-width:33.333%;
}

}
@media (max-width:768px){
.related-item:hover{
    transform: none !important;
    box-shadow: none !important;
}
}
.related-item{
    box-shadow: none !important;
}
@media (max-width:768px){
  .sales-card{
        top: 5px !important;
        right:-8px !important;
    }

    .sales-avatar{
        width:42px !important;
        height:42px !important;
        border-width:2px !important;
    }

    .sales-online{
        width:10px !important;
        height:10px !important;
    }

    .sales-name{
        font-size:10px !important;
        margin-top:3px !important;
    }

    .sales-chat{
        font-size:9px !important;
        padding:3px 8px !important;
        margin-top:3px !important;
    }


    .product-main-title{
        font-size:22px !important;
        line-height:1.1 !important;
        margin-bottom:4px !important;
    }


    .meta-label{
        font-size:10px !important;
        color:#999 !important;
    }

    .meta-value{
        font-size:11px !important;
        font-weight:600 !important;
    }

  .search-page{

    padding-top:8px !important;
}
}


/* =========================
   PROMO BAR
========================= */

.promo-bar-wrap{
    position:absolute;
    top:-15px;
    left:0;

    display:flex;
    align-items:flex-start;

    z-index:50;
}

.promo-discount{
    position:relative;
}

.promo-discount img{
    height:60px;
    display:block;
}

.discount-percent{

    position:absolute;

    right:20px;
    top:50%;

    transform:translateY(-60%);

    color:#fff;

    font-size:14px;
    font-weight:800;

    line-height:1;
}
.promo-free{
    position:relative;
    margin-left:0px;
    display:flex;
    top:0;
}

.promo-free img{
    height:60px;
    display:block;
}
@media (max-width:768px){

    .promo-free{
        margin-left:-38px !important;
    }

}
.detail-promo-row{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:-8px;

    margin-bottom:20px;
}

.detail-discount,
.detail-free{
    position:relative;
}

.detail-discount img,
.detail-free img{

    height:100px;

    width:auto;

    display:block;
}

.detail-discount-percent{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-60%);

    color:#fff;

    font-size:15px;

    font-weight:800;
}

/* =========================
   PRODUCT SHORT DESCRIPTION
========================= */

.product-short-desc{

    border:1px solid #e5e7eb;

    border-radius:10px;

    padding:10px 14px;

    margin:10px 0 14px;

    background:#fafafa;

    align-items:flex-start;

    gap:10px;
}

.product-short-desc i{

    color:#666;

    margin-top:3px;

    flex-shrink:0;
}

.tech-text-wrap{

    flex:1;

    min-width:0;
}

.short-th,
.short-en{

    font-size:15px;

    line-height:1.7;

    color:#444;

    word-break:break-word;
}




@media(max-width:768px){

    .detail-discount img,
    .detail-free img{
        height:46px;
    }

    .detail-discount-percent{
        font-size:14px;
        right:16px;
    }

}
/* =========================
   MOBILE CATEGORY FLOAT
========================= */

@media (max-width:768px){

    .cat-item img{
        transition:.4s;
    }

    .cat-item:nth-child(odd) img{
        animation:float1 4s ease-in-out infinite;
    }

    .cat-item:nth-child(even) img{
        animation:float2 4s ease-in-out infinite;
    }

@media (max-width:768px){

    .product-short-desc{

        padding:8px 10px;

        margin:6px 0 8px;

        border-radius:8px;

        gap:8px;
    }

    .product-short-desc i{

        font-size:13px;

        margin-top:2px;
    }

    .short-en,
    .short-th{

        font-size:13px;

        line-height:1.55;
    }

  .promo-discount img{
        height:58px !important;
    }

    .promo-free img{
        height:58px !important;
    }
    .discount-percent{
        font-size:11px !important;
        right:16px !important;
    }

}

.promo-free{
        margin-left:-5px !important;
    }





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

    @keyframes float2{
        0%,100%{
            transform:translateY(0);
        }
        50%{
            transform:translateY(4px);
        }
    }



}