/* ================================
   COMPACT + ELEGANT THEME (REPLACE ALL)
================================ */

/* พื้นฐาน */
.cookie-text{ width:100%; max-width:100%; text-align:start; }

/* หัวข้อ/เนื้อหา (คุกกี้บาร์) */
.cookie-title{ font-size:1.05rem; font-weight:700; margin:0 0 4px; }
.cookie-body{ font-size:.92rem; line-height:1.5; margin:0 0 6px; }

/* ปุ่มคุกกี้ */
.btn-consent{
  border-radius:30px; font-size:14px; padding:8px 16px;
  white-space:nowrap; flex:0 0 auto;
}
.btn-fluid-sm{ width:100%; }

/* กลุ่มปุ่มบน Desktop */
@media (min-width:768px){
  .cookie-buttons{ justify-content:flex-end; align-items:center; gap:10px; flex-wrap:nowrap; flex:0 0 auto; }
  .cookie-text{ flex:1 1 auto; }
  .btn-fluid-sm{ width:auto; }
  .btn-consent{ min-width:8.8rem; }
}

/* มือถือ: ปุ่มลงบรรทัด */
@media (max-width:767.98px){
  .cookie-buttons{ width:100%; }
  .cookie-buttons > .btn{ width:100%; margin-top:.5rem; }
  .cookie-buttons > div{ display:flex; width:100%; gap:.5rem; }
  .cookie-buttons > div .btn{ flex:1; }
  .cookie-title{ font-size:1rem; }
  .cookie-body{ font-size:.9rem; line-height:1.45; }
}

/* คุกกี้บาร์ (ตัวแถบล่าง) */
.footer_papd{
  position:fixed; left:0; bottom:0; width:100%; z-index:1001;
  background:#fff; border:1px solid #fff; border-bottom:none;
  border-radius:10px 10px 0 0; box-shadow:0 -10px 20px rgba(0,0,0,.12);
  padding:8px;
}
.footer_papd .row, .footer_papd .container, .footer_papd .container-fluid{
  margin:0; padding-left:.75rem; padding-right:.75rem;
}

/* Modal คุกกี้: ช่องไฟกระชับ */
#cookieConsentModal .modal-title{ font-size:1rem!important; }
#cookieConsentModal .modal-body > div{ padding-top:.6rem!important; padding-bottom:.6rem!important; border-top:1px solid #dee2e6; }
#cookieConsentModal .modal-body > div:first-child{ border-top:none; }
#cookieConsentModal .modal-footer{ gap:.5rem!important; border-top:none; }

/* ScrollUp */
#scrollUp{
  background:#79a206; bottom:7rem; color:#fff; cursor:pointer; display:none;
  font-size:20px; height:45px; width:45px; line-height:39px; position:fixed; right:12px;
  text-align:center; z-index:9999; border-radius:50%; border:2px solid #fff; transition:.3s;
}
@media (max-width:767px){ #scrollUp{ display:none!important; } }

/* สลับแสดง LINE block */
.box_line_footer_mobile{ display:none; }
.box_line_footer_pc{ display:block; }
@media (max-width:600px){
  .box_line_footer_mobile{ display:block; }
  .box_line_footer_pc{ display:none; }
}

/* Widgets footer: ช่องไฟสั้นลง */
@media (max-width:767px){
  .widgets_container.widget_menu,
  .widgets_container{ margin-bottom:10px; }
}

/* เมนู footer */
.footer_menu{ font-size:20px; }
.footer_menu p{ margin-bottom:4px!important; }
.footer_menu a{ line-height:1.4; }

/* โซเชียลใน footer: กระชับ */
.widgets_container .icon{ width:30px!important; }
.widgets_container table td{ padding:3px!important; }

/* Mobile action bar / modal product */
@media (max-width:991px){
  .mobile-action-bar .add-to-cart-btn{ font-size:1.4rem; padding:12px 14px; }
  .slick-slider{ margin-top:15px; }
}
.modal-product-info .info-text .modal-product-title{ font-size:1.25rem; }
.modal-product-info .info-text .modal-product-price{ font-size:1.35rem; }
.quantity-options-modal .option-item .option-label,
.quantity-options-modal .option-item .option-price{ font-size:1.1rem; }

/* Footer ล่างสุด (Copyright) */
.footer_bottom{
  padding:.3rem 0!important;
  background:#fafafa; border-top:0px solid #eee;
}
@media (max-width:767px){ .footer_bottom{ text-align:left; padding:.6rem 0; } }
.copyright-text{ font-size:13.5px; color:#555; margin:0; }
.footer-logo{ width:22px; height:auto; margin-left:6px; opacity:.9; transition:.3s; vertical-align:middle; }
.footer-logo:hover{ opacity:1; transform:scale(1.05); }
.footer-logo-link{ display:inline-flex; align-items:center; }

/* ================================
   Footer LINE Strip (QR desktop / ปุ่ม mobile)
================================ */
.footer-line-row{ background-color:#15b167; padding:.45rem 0; }
.footer-line-text{ font-size:15px; font-weight:600; color:#fff; margin:0; line-height:1.35; }
.footer-line-text span{ font-weight:400; opacity:.9; }

/* QR (Desktop only — default size) */
.footer-line-logo{ max-width:56px; height:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2)); transition:.3s; opacity:.95; }
.footer-line-logo:hover{ opacity:1; transform:scale(1.04); }

/* ปุ่ม LINE (Mobile only) */
.btn-line{
  background:#fff; color:#15b167; font-weight:600; font-size:14px;
  padding:.35rem .9rem; border-radius:999px; text-decoration:none;
  box-shadow:0 2px 4px rgba(0,0,0,.1); transition:.3s;
}
.btn-line:hover{ background:#f8f8f8; transform:translateY(-1px); }

@media (max-width:767px){
  .footer-line-text{ font-size:14px; text-align:center; }
  .footer-line-row{ flex-direction:column; text-align:center; }
  .footer-line-logo{ display:none; } /* ซ่อน QR บนมือถือ */
}

/* Desktop boost for LINE strip (ใหญ่ขึ้นอย่างหรู) */
@media (min-width:992px){
  .footer-line-row{ padding:1rem 0; }
  .footer-line-text{ font-size:18px; line-height:1.45; }
  .footer-line-logo{ max-width:84px; }
}

/* ===== Footer top: กระชับ + ชิดบนทุกคอลัมน์ ===== */
.footer_top{
  padding:10px 10px 10px !important;
  border-top:0 !important; border-bottom:0 !important;
}
/* ชิดบนทั้งแถวและแต่ละคอลัมน์ */
.footer_top .row{ align-items:flex-start !important; }
.footer_top .col-lg-4,
.footer_top .col-md-12,
.footer_top .col-sm-12{ display:flex; align-items:flex-start; }
/* กล่องภายในเริ่มบนสุด */
.footer_top .widgets_container{
  display:flex; flex-direction:column; justify-content:flex-start;
}
/* ลด margin บนหัวข้อ/ย่อหน้าไม่ให้ดันลง */
.footer_top .widgets_container h2{ margin-top:0 !important; margin-bottom:.4rem; }
.footer_top .widgets_container p{ margin-top:.25rem; }

/* ==== FIX: กันปุ่มสั่งซื้อ + รองรับซ่อนบนมือถือ ==== */
:root{ --action-bar-h: 64px; } /* ปรับตามความสูงปุ่มจริงได้ */

@media (max-width:767px){
  /* กันถูกทับด้วยแถบปุ่ม (ถ้าเปิดแสดง) */
  body{ padding-bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom)); }
  .footer_widgets, .footer_bottom, .box_line_footer, .box_line_footer_mobile{
    scroll-margin-bottom: calc(var(--action-bar-h) + 16px);
  }

  /* แถบปุ่มติดล่าง */
  .mobile-action-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    transition: transform .25s ease, opacity .2s ease;
  }

  /* ซ่อนปุ่มเมื่อมีคลาส is-hidden (ใช้ร่วมกับ JS) */
  .mobile-action-bar.is-hidden,
  .action-bar.is-hidden,
  [data-sticky="action-bar"].is-hidden{
    transform: translateY(110%);
    opacity:0; pointer-events:none;
  }

  /* ย้ายคุกกี้บาร์ให้ลอยเหนือปุ่ม */
  #footer_papd.footer_papd{
    bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom));
    z-index:1002;
  }
}

@media (min-width:768px){
  body{ padding-bottom:0; }
  #footer_papd.footer_papd{ bottom:0; }
}

/* ===== Center LINE button on mobile ===== */
@media (max-width: 767px){
  .footer-line-row .col-sm-6{ text-align:center !important; }
  .btn-line{ display:inline-flex; margin:.4rem auto 0; }
}

/* จบธีม */


/* ===== Mobile: จัดส่วนข้อมูลใน footer ให้อยู่กลางหน้าพอดี ===== */
@media (max-width: 767px){
  /* แถว footer ชิดกลาง */
  .footer_top .row{
    justify-content: center !important;
  }

  /* ให้แต่ละคอลัมน์จัดวางจากกึ่งกลาง */
  .footer_top .col-lg-4,
  .footer_top .col-md-12,
  .footer_top .col-sm-12{
    display: flex;
    align-items: center;      /* แนวตั้งชิดกลาง */
    justify-content: center;  /* แนวนอนชิดกลาง */
  }

  /* กล่องเนื้อหาภายในคอลัมน์ */
  .footer_top .widgets_container{
    display: flex;
    flex-direction: column;
    align-items: center;       /* จัดคอนเทนต์ให้อยู่กลาง */
    text-align: center;        /* ตัวอักษรกลาง */
    width: 100%;
  }

  /* ย่อหน้าต่าง ๆ ให้กลางด้วย */
  .footer_top .widgets_container p,
  .footer_top .widgets_container .footer_menu p{
    text-align: center;
  }

  /* ตารางไอคอนโซเชียลให้กลาง */
  .footer_top .widgets_container table{
    margin-left: auto;
    margin-right: auto;
  }
}



/* ปุ่มย่อ/ขยาย (มือถือ) — เรียบ หรู */
.footer-toggle{
  width:100%;
  text-align:left;
  background:#f7f7f7;
  border-radius:10px;
  padding:.5rem .75rem;
  font-weight:700;
  font-size:18px;
  color:#222;
  border:1px solid #e8e8e8;
}
.footer-toggle:focus{ box-shadow:none; }

/* ไอคอนหมุนตามสถานะ aria-expanded */
.footer-toggle .toggle-icon{ transition:transform .2s ease; }
.footer-toggle[aria-expanded="true"] .toggle-icon{ transform:rotate(180deg); }

/* เดสก์ท็อป ใช้หัวข้อ H2 ปกติ */
@media (min-width: 992px){
  .footer-toggle{ display:none; }
}

/* ===== Footer: "ข้อมูล" (มือถือ) กว้างเท่าข้อความ + อยู่กึ่งกลาง ===== */
@media (max-width: 991.98px){
  /* ครอบเฉพาะคอลัมน์ "ข้อมูล" เพื่อไม่ให้กระทบส่วนอื่น */
  .footer-info-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;     /* จัดศูนย์แนวตั้งของภายใน */
    text-align:center;      /* ข้อความกึ่งกลาง */
  }

  /* ปุ่ม toggle: กว้างเท่าข้อความ และอยู่กลาง */
  .footer-info-wrap .footer-toggle{
    /* ให้กว้างเท่าคอนเทนต์ */
    width:auto;             /* สำคัญ: ไม่เต็มความกว้าง */
    margin:0 auto .5rem;    /* จัดกึ่งกลางแนวนอน */

    border-radius:10px;
    padding:.45rem .9rem;
    font-weight:700;
    font-size:18px;
    color:#222;
  
  }
  .footer-info-wrap .footer-toggle:focus{ box-shadow:none; }
  .footer-info-wrap .footer-toggle .toggle-icon{ transition:transform .2s ease; }
  .footer-info-wrap .footer-toggle[aria-expanded="true"] .toggle-icon{ transform:rotate(180deg); }

  /* กล่องเมนูภายใน: กว้างเท่าข้อความ และกึ่งกลาง */
  #footerInfoMenu{
    text-align:center;
  }
  #footerInfoMenu .footer_menu{
    display:inline-block;   /* ทำให้กว้างเท่าคอนเทนต์ */
    margin:0 auto;          /* จัดกลาง */
    text-align:center;      /* ให้บรรทัดในเมนูกลางด้วย */
  }
  #footerInfoMenu .footer_menu p{
    margin:.2rem 0;         /* กระชับระยะบรรทัด */
  }
}

/* เดสก์ท็อป: ใช้หัวข้อ H2 ตามเดิม, ซ่อนปุ่ม toggle */
@media (min-width: 992px){
  .footer-info-wrap .footer-toggle{ display:none; }
}

 .hide-important { display: none !important; }
  .cookie-banner{
    position: fixed; inset-inline: 12px; bottom: 12px;
    z-index: 1090; /* เหนือ footer/แถบอื่นๆ */
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    padding: 12px;
    max-width: 960px;
    margin-inline: auto;
  }
  .cookie-inner{ display:flex; align-items: flex-start; gap:16px; }
  .cookie-text{ flex:1 1 auto; }
  .cookie-title{ font-weight: 700; margin:0 0 4px; font-size:16px; }
  .cookie-body{ margin:0; line-height:1.6; font-size:14px; color:#333; }
  .cookie-link{ text-decoration: underline; }
  .cookie-actions{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
  .cookie-btn-accept{
    border: 1px solid #005825;
    background: #005825;
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
  }
  .cookie-btn-accept:focus{ outline: 3px solid rgba(0,88,37,.25); outline-offset: 2px; }

/* มือถือ: ปุ่มอยู่กลางจอ ไม่เต็มความกว้าง + ฟอนต์ใหญ่ขึ้น */
@media (max-width: 767.98px){
  .cookie-inner{
    flex-direction: column;
    gap: 10px;
    align-items: center; /* จัดให้อยู่ตรงกลางแนวนอน */
    text-align: center;
  }

  .cookie-actions{
    width: auto;            /* ไม่เต็มจอ */
    align-self: center;     /* ปุ่มอยู่ตรงกลางกล่อง */
  }

  .cookie-btn-accept{
    width: auto;            /* กว้างตามเนื้อหา */
    font-size: 17px;        /* ฟอนต์ใหญ่ขึ้นนิดนึง */
    padding: 10px 24px;     /* ระยะขอบกำลังพอดีมือ */
    border-radius: 999px;
  }
}

  /* เดสก์ท็อป: ปุ่มชิดขวากลางกล่อง + ตัวอักษรใหญ่ขึ้น */
@media (min-width: 768px){
  .cookie-inner{
    align-items: center;         /* จัดแนวแนวตั้งให้กึ่งกลาง */
  }
  .cookie-actions{
    margin-left: auto;           /* ดันกล่องปุ่มไปชิดขวา */
  }
  .cookie-btn-accept{
    font-size: 16px;             /* ขยายขนาดตัวอักษร */
    padding: 10px 20px;          /* เพิ่มระยะขอบปุ่มให้ดูพอดี */
  }
}


@media (hover: hover) and (min-width: 768px){
  .cookie-btn-accept{
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .cookie-btn-accept:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
  }
}

/* ปุ่ม toggle ใน footer (ใช้สไตล์เดียวกับส่วนนโยบาย) */
.footer-toggle.company-toggle .toggle-icon{
  transition: transform .2s ease;
}
.footer-toggle.company-toggle[aria-expanded="true"] .toggle-icon{
  transform: rotate(180deg);
}

/* ปุ่ม toggle บริษัท */
.footer-toggle.company-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #212529;
  cursor: pointer;
  transition: color .2s ease;
}
.footer-toggle.company-toggle:hover {
  color: #005825;
}

/* หมุนลูกศรตอนกาง */
.footer-toggle.company-toggle .toggle-icon {
  transition: transform .25s ease;
}
.footer-toggle.company-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}

/* ปุ่ม toggle บนมือถือ: กว้างเท่าเนื้อหา + จัดกึ่งกลาง */
#companyBlock { /* เฉพาะมือถือให้จัดกึ่งกลางทั้งบล็อก */
  /* เดสก์ท็อปไม่กระทบ */
}
@media (max-width: 991.98px){
  #companyBlock { text-align: center; }
  .company-toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    font-size: 18px;
    font-weight: 700;
    padding: 6px 12px;
    margin: 0 auto;          /* กึ่งกลางตามเนื้อหา */
    cursor: pointer;
    color: #212529;
    transition: color .2s ease;
  }
  .company-toggle:hover { color: #005825; }

  .company-addr { margin-top: 8px; }
  .company-addr[hidden]{ display: none !important; } /* ซ่อนด้วย JS */
}

/* ลูกศรหมุนเมื่อเปิด */
.company-toggle .toggle-icon{ transition: transform .25s ease; }
.company-toggle.is-open .toggle-icon{ transform: rotate(180deg); }
/* ปุ่ม toggle ใช้ร่วมกัน */
.footer-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  color: #212529;
  transition: color .2s ease;
}


/* ไอคอนลูกศรหมุนเมื่อเปิด */
.footer-toggle .toggle-icon{ transition: transform .25s ease; }
.footer-toggle[aria-expanded="true"] .toggle-icon{ transform: rotate(180deg); }

/* มือถือ: ปุ่มกึ่งกลาง กว้างเท่าข้อความ */
@media (max-width: 991.98px){
  #policyBlock, #companyBlock{ text-align:center; }

  .footer-toggle{
    font-size: 18px;
    padding: 6px 12px;
    margin: 0 auto;     /* กึ่งกลาง */
  }

  /* ซ่อน panel ด้วย hidden (JS) */
  .policy-menu[hidden],
  .company-addr[hidden]{ display:none !important; }

  /* เว้นระยะบนเนื้อหาเมื่อกาง */
  .policy-menu, .company-addr{ margin-top: 8px; }
}

/* ===== Mobile: เอาเส้นกรอบ/เงาออก + ให้พื้นหลังใสเหมือนบล็อกที่อยู่บริษัท ===== */
@media (max-width: 991.98px){
  /* กล่องหัวข้อทั้งสอง */
  #policyBlock,
  #companyBlock {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* คอนเทนต์ด้านใน */
  #policyBlock .widgets_container,
  #companyBlock .widgets_container,
  #policyMenu,
  #companyAddr {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* ลิสต์ลิงก์นโยบาย: เก็บระยะให้อ่านง่าย */
  #policyMenu .footer_menu p {
    margin-bottom: .35rem !important;
  }
}

/* ===== แก้ไอคอนไม่หมุน: ใช้ aria-expanded กับ .company-toggle โดยตรง ===== */
.company-toggle .toggle-icon { transition: transform .25s ease; }
.company-toggle[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }

/* (สำรอง) ใช้ร่วมกับปุ่มแบบ .footer-toggle ด้วย ถ้ามี */
.footer-toggle[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }