/* DP Tâm Đan — green pharma theme */
:root {
  --bg: #F2F5F4;
  --bg-elev: #FFFFFF;
  --line: #E7ECEA;
  --text: #18211E;
  --text-dim: #4A5C54;
  --text-mute: #5A6B64;
  --accent: #119A5B;
  --accent-rgb: 17, 154, 91;
  --accent-2: #0C7A47;
  --font-sans: 'Be Vietnam Pro', sans-serif;
  --font-serif: 'Fraunces', serif;
  --font-mono: ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #cdd8d3; border-radius: 8px; }

@keyframes tdpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.mono { font-family: var(--font-mono); }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.section-pad { padding: 56px 0; }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; color: var(--accent-2); display: inline-block; margin-bottom: 8px; }
.h-section { font-family: var(--font-serif); font-weight: 600; font-size: 28px; margin: 0; color: #0C3A26; }
.lead { font-size: 15px; line-height: 1.7; color: var(--text-dim); }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; border: 1.5px solid #C7E6D5; background: #fff; color: var(--accent-2); text-decoration: none; font-size: 14px; font-weight: 700; }
.btn-accent, .btn.btn-accent { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.news-row { display: grid; grid-template-columns: 100px 140px 1fr 24px; gap: 20px; padding: 20px 8px; border-bottom: 1px solid var(--line); align-items: center; text-decoration: none; color: inherit; }
.news-row:hover { background: #F7FAF8; }
@media (max-width: 700px) {
  .news-row { grid-template-columns: 70px 1fr 24px; gap: 12px; }
  .news-row span:nth-child(2) { display: none; }
}

/* Header nav dropdown */
.td-navwrap:hover .td-dropdown { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }

/* ===== Header: menu hamburger cho mobile ===== */
.td-hamburger { display: none; }
@media (max-width: 900px) {
  .td-header-nav { display: none !important; }
  .td-cart-label { display: none !important; }
  .td-hamburger { display: flex !important; }

  /* Thanh tiện ích trên cùng: chữ nhỏ lại, câu slogan được xuống dòng thay vì mất chữ,
     email hiện lại cạnh hotline */
  .td-top-bar { font-size: 10.5px; }
  .td-top-bar-inner { row-gap: 4px; }
  .td-top-quote { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; flex: 1 1 100% !important; text-align: center !important; }
  .td-quote-sub { display: block; margin-top: 2px; }
  .td-top-right { flex: 1 1 100% !important; justify-content: center !important; gap: 10px; }

  /* Hàng header chính: logo chiếm trọn 1 dòng riêng; dòng dưới: hamburger bên trái,
     giỏ hàng + nút đối tác dồn sát mép phải */
  .td-header-row { flex-wrap: wrap; row-gap: 10px; }
  .td-logo-link { order: 1; flex: 1 1 100%; }
  .td-header-nav { order: 2; }
  .td-hamburger { order: 3; margin-left: 0 !important; }
  #site-cart-button { order: 4; margin-left: auto !important; }
  .td-partner-btn { order: 5; margin-left: 0 !important; }
}
.td-mobile-panel { display: none; flex-direction: column; background: #fff; border-top: 1px solid var(--line); padding: 6px 20px 14px; }
.td-mobile-panel.is-open { display: flex; }
.td-mobile-panel .td-mobile-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 2px; text-decoration: none; color: #2A3531; font-weight: 700; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.td-mobile-submenu { display: none; flex-direction: column; padding: 0 0 6px 12px; }
.td-mobile-submenu.is-open { display: flex; }
.td-mobile-toggle-icon { transition: transform .2s ease; flex-shrink: 0; }
.td-mobile-toggle-icon.is-open { transform: rotate(180deg); }

/* ===== An toàn mobile cho toàn bộ lưới inline-style dựng bằng page-builder =====
   Các trang (CMS pages + settings home/footer/contact HTML) đều dùng
   grid-template-columns cố định, không có breakpoint riêng -> ép về 1 cột
   dưới 700px để tránh bể layout trên điện thoại. */
@media (max-width: 700px) {
  [style*="grid-template-columns:"] { grid-template-columns: 1fr !important; }
  [style*="display: flex"], [style*="display:flex"] { flex-wrap: wrap !important; }
  /* Canh giữa chỉ áp cho khối được đánh dấu riêng (vd. tiêu đề section "Xem tất cả ›"),
     KHÔNG áp chung cho mọi flex space-between — vì phần lớn là dạng list-row
     (tên trái / số-badge phải) cần giữ canh trái-phải như thiết kế gốc. */
  .td-center-wrap { justify-content: center !important; text-align: center !important; }

  /* Danh sách bullet dạng icon-tròn + chữ (vd. ✓ Cơ sở vật chất...) dùng
     align-items:flex-start — không được bể dòng ngay sau rule ở trên, nếu không
     icon sẽ trơ trọi 1 mình khi chữ dài, chữ rớt xuống dòng riêng. Icon cần
     đứng chung dòng với chữ, chữ tự xuống dòng bên trong khi cần. */
  [style*="align-items: flex-start"] { flex-wrap: nowrap !important; }

  /* Ảnh đội ngũ (trang Về Tâm Đan): bỏ viền khung trên mobile theo yêu cầu */
  .td-team-photo-box { border: none !important; }
}

/* Đoạn mô tả / nội dung: căn đều 2 lề (không áp cho span/label ngắn 1 dòng vì không ảnh hưởng) */
p { text-align: justify; }

/* Nội dung bài viết Tin tức: giữ căn đều nhưng dòng CUỐI đoạn thì căn trái — tránh chữ bị giãn
   cách quá xa khi dòng cuối có ít từ (lỗi kinh điển của text-align:justify). Chỉ áp cho khu vực
   bài viết (.post-content), không đụng các đoạn mô tả khác trên site. */
.post-content p { text-align-last: left; }

/* Đoạn có chứa link (VD "Nguồn: ...") bỏ hẳn canh đều — link đủ ngắn để tự xuống dòng riêng
   (không cần ngắt giữa ký tự) nên overflow-wrap không cứu được: trình duyệt đẩy nguyên link
   xuống dòng dưới, để lại vài chữ đứng trước bị justify kéo giãn ra cho đủ chiều rộng dòng. Cách
   chắc ăn là tắt justify cho toàn đoạn có link, không riêng dòng chứa link. */
.post-content p:has(a) { text-align: left; }
.post-content p a { overflow-wrap: anywhere; word-break: break-word; }

/* Trên mobile, dòng chứa được ít từ hơn nên justify càng dễ bị giãn cách xấu khi gặp từ dài
   (VD tên hóa chất "Myristoyl/palmitoyl") — tắt hẳn canh đều trên màn hình hẹp, giữ nguyên
   justify trên desktop/tablet. */
@media (max-width: 640px) {
  .post-content p { text-align: left; }
}

/* Bảng trong nội dung bài viết (WordPress hay dùng <table> để xếp nhiều ảnh cạnh nhau thành 1
   hàng) — mất cột đều/viền vì đã lọc sạch style inline gắn cứng, bù lại bằng CSS chuẩn: cột đều
   nhau, ảnh full-width trong ô, co xuống 1 cột trên mobile để không tràn ngang. */
.post-content table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 20px 0; }
.post-content table td { padding: 6px; vertical-align: top; }
.post-content table img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .post-content table, .post-content table tbody, .post-content table tr, .post-content table td { display: block; width: 100%; }
}

/* Video nhúng (YouTube...) trong nội dung bài viết — co responsive theo bề rộng, giữ tỉ lệ 16:9
   thay vì tràn ngang trên màn hình nhỏ do width/height cứng gốc từ WordPress. */
.post-content iframe { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; margin: 20px 0; }

/* Trang chi tiết sản phẩm: cột ảnh 440px cố định -> xếp dọc dưới 860px */
@media (max-width: 860px) {
  .pd-gallery-grid { grid-template-columns: 1fr !important; }
}

/* Tab "Thông tin chi tiết": nhãn 220px cố định + giá trị flex:1 dễ bị bóp thành
   cột hẹp 1 chữ/dòng vì từ tiếng Việt ngắn (không đủ dài để ép cả dòng xuống dưới).
   Ép hẳn sang xếp dọc trên mobile để không phụ thuộc co giãn. */
@media (max-width: 700px) {
  .pd-attr-row { flex-direction: column; gap: 4px !important; }
  .pd-attr-label { flex: none !important; }
}

/* Nút nổi Zalo/gọi điện: thu nhỏ + lùi vào trên điện thoại để đỡ đè lên nội dung */
@media (max-width: 480px) {
  .td-float-stack { right: 12px !important; bottom: 14px !important; gap: 8px !important; }
  .td-float-btn { width: 46px !important; height: 46px !important; font-size: 11px !important; }
}

/* ===== Thêm vào giỏ hàng: hiệu ứng "nhảy" icon giỏ + thông báo nổi =====
   Trước đó chỉ đổi chữ trên nút, khách dễ hiểu lầm là bấm không có tác dụng. */
@keyframes tdCartBump {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.22); }
  55%      { transform: scale(0.92); }
}
.td-cart-bump { animation: tdCartBump 0.5s ease; }

#td-cart-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  background: #0C3A26;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(12, 58, 38, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 500;
  white-space: nowrap;
}
#td-cart-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 480px) {
  #td-cart-toast { font-size: 12.5px; padding: 10px 18px; white-space: normal; text-align: center; max-width: calc(100vw - 40px); }
}