.btn{min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue-900);color:#fff;box-shadow:0 8px 18px rgba(10,61,120,.15)}
.btn-primary:hover{background:var(--blue-950)}
.btn-line{background:var(--green);color:#fff;box-shadow:0 8px 18px rgba(6,199,85,.16)}
.btn-line:hover{background:#05b34b}
.btn-secondary{background:#fff;color:var(--blue-900);border-color:#b8cad8}
.text-link{display:inline-flex;width:max-content;margin-top:10px;color:var(--blue-700);font-weight:800;border-bottom:1px solid #9fc2dd}

.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.benefit-grid article{position:relative;min-height:180px;padding:28px 24px 24px;background:#fff;border:1px solid #e0e8ef;border-radius:16px;box-shadow:0 8px 20px rgba(15,58,98,.055);transition:transform .18s,box-shadow .18s,border-color .18s}
.benefit-grid article:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:#cbdce9}
.feature-no{display:grid;place-items:center;width:38px;height:38px;margin-bottom:18px;border-radius:50%;background:var(--blue-100);color:var(--blue-900);font-size:.76rem;font-weight:900}
.benefit-grid h3{margin-bottom:8px;font-size:1.05rem}
.benefit-grid p{margin:0;color:var(--muted);font-size:.9rem}


.order-section{background:#fff}
.order-service-note{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;
  margin:-10px auto 24px;
}
.order-service-note span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 16px;border-radius:999px;
  background:linear-gradient(180deg,#eff7ff,#ffffff);
  border:1px solid #cfe0ee;color:var(--blue-900);
  font-size:.88rem;font-weight:800;box-shadow:0 6px 14px rgba(15,58,98,.06);
}
.order-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.order-card{
  position:relative;min-width:0;overflow:hidden;background:#fff;
  border:1px solid #dce6ee;border-radius:22px;
  box-shadow:0 14px 32px rgba(15,58,98,.08);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.order-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,58,98,.13);border-color:#c7d8e6}
.order-card.featured{border:2px solid var(--gold-500)}
.order-card.value{border:2px solid #9ec0db}
.order-card.theme-bulk{border:2px solid #174882;animation:bulkGlowPulse 1.9s ease-in-out infinite}
.order-card.theme-best{background:linear-gradient(180deg,#fffdf7 0%,#ffffff 14%)}
.order-card.theme-smart{background:linear-gradient(180deg,#f4fbff 0%,#ffffff 15%)}
.order-card.theme-bulk{background:linear-gradient(180deg,#eef5ff 0%,#ffffff 18%)}
.card-ribbon{
  position:absolute;top:14px;right:14px;z-index:3;padding:8px 12px;border-radius:999px;
  background:#fff7df;border:1px solid #e3c45c;color:#7d5a09;
  font-size:.72rem;font-weight:900;box-shadow:0 6px 16px rgba(117,89,14,.12)
}
.order-card.theme-best .card-ribbon{
  background:linear-gradient(180deg,#ffcc57,#e0a721);border-color:#d39b12;color:#fff;
}
.order-card.theme-smart .card-ribbon{
  background:linear-gradient(180deg,#2f84d7,#175bb2);border-color:#175bb2;color:#fff;
}
.order-card.theme-bulk .card-ribbon{
  background:linear-gradient(180deg,#143f7c,#0d2d58);border-color:#0d2d58;color:#fff;
  animation:bulkRibbonPulse 1.9s ease-in-out infinite;
}
.order-visual{
  position:relative;height:238px;padding:14px;
  background:linear-gradient(180deg,#f9fcfe,#eef6fb);
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e3ebf1;
}
.order-visual::before{
  content:"";position:absolute;left:0;right:0;top:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 5%,rgba(255,255,255,.92) 58%,rgba(255,255,255,0) 100%);
  z-index:1;pointer-events:none;
}
.order-visual img{position:relative;z-index:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.order-body{padding:23px 21px 22px;text-align:center}
.order-kicker{
  display:inline-flex;align-items:center;justify-content:center;min-height:30px;
  padding:0 12px;border-radius:999px;background:#f3f8fc;border:1px solid #d8e4ee;
  color:var(--blue-900);font-size:.78rem;font-weight:900;
}
.order-card.theme-best .order-kicker{background:#fff8e3;border-color:#edd07b;color:#8a6100}
.order-card.theme-smart .order-kicker{background:#edf6ff;border-color:#bbd7f1;color:#1a5eaf}
.order-card.theme-bulk .order-kicker{background:#edf2fb;border-color:#b5c7e2;color:#143f7c}
.order-body h3{margin:10px 0 2px;font-size:1.42rem}
.price{margin:10px 0 8px;color:var(--blue-950);font-size:2.2rem;line-height:1;font-weight:900}
.price-note{
  min-height:24px;margin-bottom:10px;color:#b27f0c;
  font-size:.86rem;font-weight:800;line-height:1.45;
}
.order-card.theme-smart .price-note{color:#1f67bb}
.order-card.theme-bulk .price-note{color:#174882;font-size:.95rem;font-weight:900}
.order-body p{min-height:72px;margin-bottom:14px;color:var(--muted);font-size:.88rem;line-height:1.65}
.order-benefits{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0 0 16px;
}
.order-benefits span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:0 10px;border-radius:999px;
  background:#f6fafc;border:1px solid #d8e4ed;color:#557188;
  font-size:.76rem;font-weight:800;
}
.btn-order{width:100%;background:var(--blue-900);color:#fff;border-color:var(--blue-900);border-radius:12px}
.theme-best .btn-order{background:linear-gradient(180deg,#e8b63a,#c89111);border-color:#c89111}
.theme-smart .btn-order{background:linear-gradient(180deg,#2d7fd3,#165cb4);border-color:#165cb4}
.theme-bulk .btn-order{background:linear-gradient(180deg,#173f7a,#0d2e59);border-color:#0d2e59;animation:bulkButtonPulse 1.9s ease-in-out infinite}
.order-note{margin:22px auto 0;max-width:1000px;text-align:center;color:#758496;font-size:.82rem}



/* =========================================================
   12-BOTTLE CARD EMPHASIS
   ========================================================= */
@keyframes bulkGlowPulse{
  0%,100%{
    box-shadow:
      0 18px 40px rgba(15,58,98,.13),
      0 0 0 0 rgba(24,92,180,.00),
      0 0 0 0 rgba(230,177,35,.00);
    border-color:#174882;
  }
  35%{
    box-shadow:
      0 20px 44px rgba(15,58,98,.16),
      0 0 0 6px rgba(24,92,180,.10),
      0 0 28px 2px rgba(230,177,35,.18);
    border-color:#1f67bb;
  }
  70%{
    box-shadow:
      0 22px 50px rgba(15,58,98,.18),
      0 0 0 10px rgba(24,92,180,.00),
      0 0 34px 4px rgba(230,177,35,.14);
    border-color:#d5a11d;
  }
}
@keyframes bulkRibbonPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 8px 18px rgba(12,35,62,.18);
  }
  50%{
    transform:scale(1.06);
    box-shadow:0 10px 24px rgba(12,35,62,.24),0 0 18px rgba(230,177,35,.26);
  }
}
@keyframes bulkButtonPulse{
  0%,100%{
    box-shadow:0 10px 22px rgba(13,46,89,.18);
    transform:translateY(0);
  }
  50%{
    box-shadow:0 14px 28px rgba(13,46,89,.24),0 0 18px rgba(230,177,35,.20);
    transform:translateY(-1px);
  }
}

.faq-section{background:#f6f9fc}
.faq-section .container{max-width:1060px}
.faq-heading{max-width:760px!important;margin:0 auto 36px!important;text-align:center}
.faq-heading:after{content:"";display:block;width:54px;height:3px;background:var(--gold-500);border-radius:99px;margin:18px auto 0}
.faq-search-wrap{position:relative;max-width:680px;margin:24px auto 0}
.faq-search-wrap input{width:100%;height:54px;padding:0 50px 0 18px;border:1px solid #c8d8e4;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 6px 16px rgba(15,58,98,.06);font:inherit;font-size:16px;line-height:1.2;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.faq-search-wrap input:focus{border-color:#7fa9ca;outline:3px solid rgba(60,141,204,.18);outline-offset:2px}
.faq-search-wrap span{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#7690a6;pointer-events:none}
.faq-item[hidden],.faq-item.is-filtered-out{display:none!important}
.faq-grid{display:grid;grid-template-columns:1fr;gap:10px}
.faq-item{overflow:hidden;background:#fff;border:1px solid #dce6ee;border-radius:14px;box-shadow:0 5px 14px rgba(15,58,98,.045)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 48px 18px 20px;position:relative;color:#274c6e;font-weight:800}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";position:absolute;right:20px;top:12px;font-size:1.45rem;color:#6d8499;font-weight:400}
.faq-item[open]{border-color:#bfd3e2}
.faq-item[open] summary{background:#f7fbfe;color:var(--blue-900)}
.faq-item[open] summary:after{content:"−"}
.faq-item>div{padding:0 20px 20px;color:#657689;font-size:.92rem}
.faq-empty{padding:26px 0;text-align:center;color:var(--muted)}
.faq-cta{margin-top:28px;padding:24px 26px;border-radius:18px;background:var(--blue-100);display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-cta div{display:flex;flex-direction:column}
.faq-cta strong{color:var(--blue-950);font-size:1.05rem}
.faq-cta span{color:var(--muted);font-size:.9rem}

.contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-card{padding:18px 20px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.06);color:#fff;display:flex;flex-direction:column;transition:.2s}
.contact-card:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}
.contact-card span{font-size:.75rem;color:#bfd2e5}
.contact-card strong{font-size:1.05rem;margin-top:3px}

.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:18px}
.modal.is-open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,24,48,.76)}
.modal-panel{position:relative;width:min(100%,480px);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;padding:30px;box-shadow:0 28px 80px rgba(0,0,0,.32)}
.modal-close{position:absolute;top:13px;right:13px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;color:#41566c;font-size:1.3rem}
.modal-panel h2{padding-right:44px;margin-bottom:5px}
.modal-panel>p{color:var(--muted)}
#modalQr{width:220px;height:220px;margin:15px auto;border:1px solid var(--line);border-radius:10px;padding:6px}
.modal-help{text-align:center;font-size:.84rem}
.modal textarea{width:100%;height:118px;resize:none;padding:12px;border:1px solid #c8d5df;border-radius:10px;background:#f8fafc;color:#42566b;font-size:.82rem}
.modal-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
body.modal-open{overflow:hidden}


/* ==========================================
   CONTACT SOCIAL DOCK — single source of truth
   ========================================== */
.social-dock{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);
  z-index:120;display:flex;flex-direction:column;align-items:center;gap:10px;
  pointer-events:none;
}
.social-dock-toggle{
  display:none;width:52px;height:52px;min-width:52px;max-width:52px;
  padding:0;border:0;border-radius:50%;background:var(--blue-900);color:#fff;
  box-shadow:0 8px 24px rgba(12,45,80,.22);font-weight:800;pointer-events:auto;
}
.social-dock-toggle-open{font-size:.67rem}
.social-dock-toggle-close{display:none;font-size:1.5rem;line-height:1}
.social-dock-links{
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:auto;
}
.social-dock-item{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;min-width:56px;max-width:56px;flex:0 0 56px;
  aspect-ratio:1/1;padding:0;border-radius:50%;color:#fff;
  box-shadow:0 10px 24px rgba(12,35,62,.18);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  overflow:visible;background:#fff;
}
.social-dock-item:hover{transform:translateX(-4px);box-shadow:0 14px 28px rgba(12,35,62,.24);filter:brightness(1.02)}
.social-icon{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:#fff;font-family:Arial,Tahoma,sans-serif;font-weight:900;line-height:1;
  text-align:center;
}
.social-icon svg{display:block;width:28px;height:28px}
.social-icon-line{font-size:.88rem;letter-spacing:.02em;font-weight:800}
.social-icon-facebook svg{width:20px;height:20px}
.social-icon-image{padding:0}
.social-icon-img{display:block;width:100%;height:100%;object-fit:contain}
.social-dock-item--image{
  width:56px;height:56px;min-width:56px;max-width:56px;flex-basis:56px;
  border-radius:0;background:transparent;box-shadow:none;overflow:visible;
}
.social-dock-item--image:hover{transform:translateX(-4px) scale(1.035);box-shadow:none;filter:none}
.social-dock-item--image .social-label{right:68px}
.social-label{
  position:absolute;right:68px;top:50%;transform:translateY(-50%);
  padding:7px 10px;border-radius:8px;background:#17334f;color:#fff;
  font-size:.76rem;font-weight:800;white-space:nowrap;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .16s ease;
}
.social-dock-item:hover .social-label,.social-dock-item:focus-visible .social-label{opacity:1;visibility:visible}
.social-facebook{background:#1877f2}
.social-line{background:#06c755}
.social-shopee,.social-tiktok,.social-phone{background:transparent}

/* FAQ rich content */
.faq-answer p{margin:0 0 12px}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer ul{margin:8px 0 14px;padding-left:1.35rem}
.faq-answer li{margin:5px 0}
.faq-note{margin-top:14px!important;padding:10px 12px;border-left:3px solid var(--gold-500);background:#fbf7ec;color:#58697a;font-size:.85rem}
.faq-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.faq-compare>div{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.faq-compare strong{color:var(--blue-950)}

/* =========================================================
   HERO PHONE CTA — prominent, responsive and accessible
   ========================================================= */
.hero-phone-cta{
  position:relative;
  isolation:isolate;
  flex:0 0 auto;
  min-height:52px;
  min-width:218px;
  padding:7px 18px 7px 12px;
  border:1px solid #bd2839;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(180deg,#ed5a67 0%,#d53b4b 52%,#bf2d3e 100%);
  color:#fff;
  box-shadow:0 10px 24px rgba(191,45,62,.24),0 0 0 0 rgba(213,59,75,.34);
  text-decoration:none;
  white-space:nowrap;
  overflow:visible;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  animation:heroPhonePulse 1.8s ease-in-out infinite;
}
.hero-phone-cta::before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border:2px solid rgba(213,59,75,.30);
  border-radius:inherit;
  opacity:.65;
  animation:heroPhoneHalo 1.8s ease-out infinite;
}
.hero-phone-cta:hover{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.04);
  box-shadow:0 14px 30px rgba(191,45,62,.30),0 0 0 5px rgba(213,59,75,.10);
}
.hero-phone-cta:active{transform:translateY(0) scale(.99)}
.hero-phone-cta:focus-visible{outline:3px solid rgba(213,59,75,.28);outline-offset:4px}
.hero-phone-cta-icon{
  width:36px;height:36px;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;color:#c83243;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 4px 10px rgba(96,14,27,.16);
  animation:heroPhoneRing 1.8s ease-in-out infinite;
  transform-origin:center;
}
.hero-phone-cta-icon svg{display:block;width:20px;height:20px}
.hero-phone-cta-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.12}
.hero-phone-cta-text strong{font-size:.78rem;font-weight:700;letter-spacing:.01em;color:#fff}
.hero-phone-cta-text b{margin-top:2px;font-size:1rem;font-weight:900;letter-spacing:.015em;color:#fff}
@keyframes heroPhonePulse{
  0%,100%{box-shadow:0 10px 24px rgba(191,45,62,.24),0 0 0 0 rgba(213,59,75,.30)}
  50%{box-shadow:0 12px 28px rgba(191,45,62,.30),0 0 0 7px rgba(213,59,75,0)}
}
@keyframes heroPhoneHalo{
  0%{transform:scale(.98);opacity:.65}
  70%,100%{transform:scale(1.08);opacity:0}
}
@keyframes heroPhoneRing{
  0%,58%,100%{transform:rotate(0)}
  64%{transform:rotate(-8deg)}
  70%{transform:rotate(8deg)}
  76%{transform:rotate(-5deg)}
  82%{transform:rotate(5deg)}
  88%{transform:rotate(0)}
}