/*** Import *****/
@import url("loading-btn.css");
/* @import url("loading-group.css"); */
@import url("H-custom.css");
/*** End ****/
.blog-info-tag span:before {
  content: ",";
  position: absolute;
  bottom: 6px;
  right: 0;
  height: 100%;
  font-size: 16px;
  width: auto;
  padding-right: 5px;
}
.blog-info-tag span {
  position: relative;
  display: inline-block;
  padding-right: 10px;
}
.blog-info-tag span:last-child:before {
  display: none;
}
/* .wpcf7 form .wpcf7-response-output {
  border: 0;
  margin: 0 auto;
  padding: 0;
  font-weight: bold;
  font-size: 12px;
  position: absolute;
  width: 100%;
} */
.wpcf7 form.sent .wpcf7-response-output {
  color: #46b450;
}
.wpcf7 form.invalid .wpcf7-response-output {
  color: red;
}

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    width: 100%;
}

.about-page figure {
  margin: 0;
}

.about-milestones .timeline {
  margin: 0;
}

.about-milestones .timeline__item {
  margin: 0;
}

.timeline__figure {
  display: grid;
  gap: 16px;
}

/* =====================================================================
 *  Timeline alternating left/right theo line đỏ giữa
 *  - Mỗi .timeline__wrap chia 2 cột (dt | dd), wrap chẵn dùng row-reverse
 *  - Item NẰM BÊN TRÁI line đỏ → text/ảnh căn phải (sát line)
 *  - Item NẰM BÊN PHẢI line đỏ → text/ảnh căn trái (sát line)
 *
 *  Wrap lẻ (nth-of-type odd, không reverse):  [dt LEFT | dd RIGHT]
 *  Wrap chẵn (nth-of-type even, reverse):     [dd LEFT | dt RIGHT]
 * ===================================================================== */

/* --- Wrap LẺ: dt ở trái, dd ở phải --- */
.about-milestones .timeline__wrap:nth-of-type(odd) > .timeline__item:first-child {
  text-align: right;
}
.about-milestones .timeline__wrap:nth-of-type(odd) > .timeline__item:last-child {
  text-align: left;
}

/* --- Wrap CHẴN (row-reverse): dd visual ở trái, dt visual ở phải --- */
.about-milestones .timeline__wrap:nth-of-type(even) > .timeline__item:first-child {
  text-align: left;
}
.about-milestones .timeline__wrap:nth-of-type(even) > .timeline__item:last-child {
  text-align: right;
}

/* --- Căn vị trí <img> bên trong .timeline__img (width:100% wrapper) ---
 *  - Item nằm BÊN TRÁI line đỏ → img dồn về PHẢI (sát line)
 *  - Item nằm BÊN PHẢI line đỏ → img dồn về TRÁI (sát line)
 *  Ngoài text-align cho inline <img>, set thêm display:block + margin
 *  cho trường hợp img bị !important hoặc render block.
 */

/* Item RIGHT of red line → img căn trái */
.about-milestones .timeline__wrap:nth-of-type(odd) > .timeline__item:last-child .timeline__img,
.about-milestones .timeline__wrap:nth-of-type(even) > .timeline__item:first-child .timeline__img {
  text-align: left;
}
.about-milestones .timeline__wrap:nth-of-type(odd) > .timeline__item:last-child .timeline__img img,
.about-milestones .timeline__wrap:nth-of-type(even) > .timeline__item:first-child .timeline__img img {
  margin-left: 0;
  margin-right: auto;
}

/* Item LEFT of red line → img căn phải */
.about-milestones .timeline__wrap:nth-of-type(odd) > .timeline__item:first-child .timeline__img,
.about-milestones .timeline__wrap:nth-of-type(even) > .timeline__item:last-child .timeline__img {
  text-align: right;
}
.about-milestones .timeline__wrap:nth-of-type(odd) > .timeline__item:first-child .timeline__img img,
.about-milestones .timeline__wrap:nth-of-type(even) > .timeline__item:last-child .timeline__img img {
  margin-left: auto;
  margin-right: 0;
}

/* .timeline__figure là display:grid → set justify-items để align ô grid */
.about-milestones .timeline__wrap:nth-of-type(odd) > .timeline__item:first-child .timeline__figure,
.about-milestones .timeline__wrap:nth-of-type(even) > .timeline__item:last-child .timeline__figure {
  justify-items: end;
}
.about-milestones .timeline__wrap:nth-of-type(odd) > .timeline__item:last-child .timeline__figure,
.about-milestones .timeline__wrap:nth-of-type(even) > .timeline__item:first-child .timeline__figure {
  justify-items: start;
}

/* Mobile: layout 1 cột, không cần alternating */
@media (max-width: 575.98px) {
  .about-milestones .timeline__wrap > .timeline__item {
    text-align: left !important;
  }
  .about-milestones .timeline__figure,
  .about-milestones .timeline__img {
    margin: 0 !important;
  }
}

/* =====================================================================
 *  Section "Our Team" — slider 2 row × 4 col, ảnh PNG không nền
 *  Card solid: nền đỏ-cream gradient để ảnh nổi bật
 * ===================================================================== */
.about-team {
  position: relative;
}
.about-team .tt-sec {
  text-align: center;
}
.about-team__lead {
  max-width: 720px;
  margin: 1.2rem auto 4rem;
  text-align: center;
  color: #555;
  font-size: 1.6rem;
  line-height: 1.6;
}

/* ----- Slider wrapper + mũi tên ngoài mép ----- */
.about-team__slider {
  position: relative;
  padding: 0 2rem;
}
.about-team__slider .swiper {
  overflow: hidden;
  padding-bottom: 1rem;
}
.about-team__slider .swiper-wrapper {
  /* Cần thiết để swiper-grid 2 row hoạt động */
  align-items: stretch;
}
.about-team__slider .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

/* Nút điều hướng — nằm NGOÀI mép trái/phải */
.about-team__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 4.8rem;
  height: 4.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--color-pri, #ed1c24);
  border: 1px solid var(--color-pri, #ed1c24);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(179, 45, 54, .15);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.about-team__nav:hover {
  background: var(--color-pri, #ed1c24);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.about-team__nav--prev { left: -2.4rem; }
.about-team__nav--next { right: -2.4rem; }
.about-team__nav.swiper-button-disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* ----- Card nhân sự — wrapper hồng, text padding-top, ảnh chạm viền ----- */
.team-member {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  height: 100%;
  margin: 0 0 2.4rem;
  background: #fbe9eb;
  border-radius: 1.6rem;
  overflow: hidden;
  cursor: pointer;
}

/* Caption — có padding riêng để text không sát mép.
   Feedback 22/7: padding-bottom đang là 0 nên chức vụ dính sát đáy card, trong
   khi phía trên còn gap .8rem + padding-top 1.4rem = 2.2rem -> nhìn lệch hẳn.
   Đặt padding-bottom = 2.2rem cho khối chữ nằm cân giữa vùng hồng. */
.team-member > figcaption {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.4rem 1.2rem 2.2rem;
  text-align: center;
  background: transparent;
}
.team-member__name {
  /* Feedback 8/9: đổi <strong>/<span> -> <h3>/<p>, phải khử margin mặc định. */
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: .02em;
  line-height: 1.3;
}
.team-member__role {
  margin: 0;
  font-size: 1.2rem;
  color: var(--color-pri, #ed1c24);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

/* Photo — <img> đứng TRƯỚC figcaption (ảnh trên, tên/chức vụ dưới).
   Ảnh headshot JPG -> phủ kín ô vuông, ưu tiên phần đầu/mặt. */
.team-member__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
}
/* figcaption đẩy xuống dưới ảnh, chiếm phần còn lại cho card đều chiều cao */
.team-member > figcaption {
  flex: 1;
}

/* =====================================================================
 *  Team member popup — profile card vertical, avatar tròn, content center
 * ===================================================================== */
/* Feedback 14/8: popup nay là <dialog> nằm TRONG <figcaption>, mở bằng showModal()
   nên trình duyệt vẽ ở top layer — không còn cần position:fixed + overlay tự vẽ,
   và cũng không còn bị transform của AOS/swiper kéo lệch. */
.team-member-popup {
  /* reset mặc định của <dialog> */
  border: 0;
  padding: 2.4rem;
  margin: auto;                 /* căn giữa viewport */
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: visible;
  /* dialog đóng thì trình duyệt tự display:none, không cần [hidden] */
  display: none;
  place-items: center;
  color: inherit;
  text-align: initial;
}
.team-member-popup[open] {
  display: grid;
  animation: teamPopupFadeIn .25s ease;
}
@keyframes teamPopupFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.team-member-popup::backdrop {
  background: rgba(15, 15, 15, .65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Modal card */
.team-member-popup__content {
  position: relative;
  z-index: 1;
  width: min(48rem, 100%);
  max-height: calc(100vh - 4.8rem);
  overflow: auto;
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  animation: teamPopupSlideIn .35s cubic-bezier(.22, 1, .36, 1);
}
@keyframes teamPopupSlideIn {
  from { transform: translateY(16px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* Avatar popup — Feedback 5/9: là thẻ <img> thật, không còn vẽ bằng background-image.
   Giữ nguyên tạo hình cũ: đĩa tròn, viền trắng, ring đỏ. */
.team-member-popup__avatar {
  position: relative;
  display: block;
  width: 13rem;
  height: 13rem;
  margin: 3.6rem auto 0;
  border-radius: 50%;
  background-color: #fbe9eb;
  object-fit: cover;
  object-position: top center;
  border: 4px solid #fff;
  outline: 2px solid var(--color-pri, #ed1c24);
  outline-offset: 4px;
  box-shadow: 0 10px 24px rgba(237, 28, 36, .18);
}
/* Nền hồng fade phía sau avatar — trước là của .team-member-popup__photo */
.team-member-popup__content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 14rem;
  border-radius: 2rem 2rem 0 0;
  background: radial-gradient(ellipse at 50% 0%, #fbe9eb 0%, #fff 70%);
}
.team-member-popup__avatar,
.team-member-popup__body { position: relative; z-index: 1; }

/* Close button — rõ nét, dễ thấy */
.team-member-popup__close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 3;
  width: 3.6rem;
  height: 3.6rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  border: 1px solid #eee;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.team-member-popup__close:hover {
  background: var(--color-pri, #ed1c24);
  color: #fff;
  border-color: var(--color-pri, #ed1c24);
  transform: rotate(90deg);
}

/* Body — center align */
.team-member-popup__body {
  padding: 2rem 3rem 3rem;
  text-align: center;
}

/* Tên + chức vụ trong popup — Feedback 5/9: chữ là HTML thật, không dùng
   content:attr() nữa (bản trước để thẻ rỗng + data-attribute rồi nhờ CSS in ra). */
.team-member-popup__heading {
  margin: 0 0 1.6rem;
}
.team-member-popup__role {
  display: block;
  margin: 0 0 .6rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--color-pri, #ed1c24);
}
.team-member-popup__name {
  display: block;
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
  color: #111;
  line-height: 1.25;
}
.team-member-popup__name a {
  color: inherit;
  text-decoration: none;
}
.team-member-popup__name a:hover {
  color: var(--color-pri, #ed1c24);
}

/* Info list — card stack */
.team-member-popup__info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.team-member-popup__info li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  background: #F9FAFB;
  border-radius: 1rem;
  text-align: left;
  transition: background .2s ease;
}
.team-member-popup__info li:hover {
  background: #fbe9eb;
}
/* Link Call / Email — anchor text (không show full sđt/email) */
.team-member-popup__info li a {
  display: block;
  width: 100%;
  color: var(--color-pri, #ed1c24);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
}
.team-member-popup__info-icon {
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--color-pri, #ed1c24);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.team-member-popup__info-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  margin-bottom: .2rem;
}
.team-member-popup__info-value {
  display: block;
  color: #111;
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}
.team-member-popup__info-value:hover {
  color: var(--color-pri, #ed1c24);
}
.team-member-popup__info li > a {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Wrap label + value bên trong <a> tag */
.team-member-popup__info li {
  position: relative;
}

/* Mobile */
@media (max-width: 575.98px) {
  .team-member-popup { padding: 1.4rem; }
  .team-member-popup__content {
    max-height: calc(100vh - 2.8rem);
    border-radius: 1.6rem;
  }
  .team-member-popup__avatar {
    width: 11rem;
    height: 11rem;
    margin-top: 2.8rem;
    border-width: 3px;
    outline-offset: 3px;
  }
  .team-member-popup__content::before { height: 11.5rem; }
  .team-member-popup__body {
    padding: 1.6rem 2rem 2.4rem;
  }
  .team-member-popup__name { font-size: 1.9rem; }
  .team-member-popup__info-icon {
    width: 3.2rem; height: 3.2rem;
  }
}

/* ----- Responsive ----- */
@media (max-width: 1199.98px) {
  .about-team__nav--prev { left: -1rem; }
  .about-team__nav--next { right: -1rem; }
}
@media (max-width: 767.98px) {
  .about-team__slider { padding: 0 1.6rem; }
  .about-team__nav {
    width: 3.6rem;
    height: 3.6rem;
  }
  .about-team__nav--prev { left: -.4rem; }
  .about-team__nav--next { right: -.4rem; }
}
@media (max-width: 575.98px) {
  .team-member { gap: 1rem; }
  .team-member > figcaption { padding: 1.2rem 1rem 2.2rem; }
  .team-member__name { font-size: 1.3rem; }
  .team-member__role { font-size: 1rem; }
}

/* Feedback 14/8: ở đây từng có một BẢN CŨ của .team-member-popup (position:fixed,
   [hidden], overlay, close 36px...) nằm SAU bản chính nên nó đè hết bản chính —
   sửa bản trên mà không có tác dụng. Đã gỡ.

   Khoá cuộn trang khi popup mở — bám thẳng vào trạng thái thật của <dialog> thay vì
   một class do JS thêm/bớt (sự kiện 'close' của dialog không phải lúc nào cũng bắn,
   class kẹt lại là trang mất cuộn vĩnh viễn). Trình duyệt cũ không hiểu :has() thì
   chỉ là không khoá cuộn, không hỏng gì. */
body:has(dialog.team-member-popup[open]) {
  overflow: hidden;
}

.about-profile-download {
  text-align: center;
}

/* =====================================================================
 *  CTA Partner — <aside> full-width, nền trắng
 *  Layout: content center stack → slider lon full-bleed → border-bottom
 * ===================================================================== */
.cta-partner {
  position: relative;
  padding: 6rem 0 0;
  background: transparent;
  color: #1a1a1a;
  overflow: hidden;
}

.cta-partner__content {
  max-width: 110rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
@media (max-width: 1199.98px) {
  .cta-partner__content { max-width: 92rem; }
}
@media (max-width: 991.98px) {
  .cta-partner__content { max-width: 78rem; }
}

/* .cta-partner__title kế thừa .tt-sec của dự án — không override font */
.cta-partner__title {
  margin: 0;
}
.cta-partner__desc {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.55;
  color: #555;
  max-width: 60ch;
}

/* ----- Slider lon full-bleed, border-bottom = shelf ----- */
.cta-partner__cans-wrap {
  position: relative;
  margin-top: 5rem;
  border-bottom: 2px solid rgba(0, 0, 0, .08);
}
.cta-partner__cans-wrap .splide__track {
  overflow: hidden;
}
.cta-partner__cans-wrap .splide__list {
  align-items: flex-end;
}
.cta-partner__cans-wrap .splide__slide.cta-partner__can {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  width: auto !important;   /* autoWidth — slide tự co theo ảnh */
}
.cta-partner__cans-wrap .cta-partner__can img {
  display: block;
  width: auto;
  height: clamp(16rem, 20vw, 24rem);
  object-fit: contain;
}

/* Stagger nhẹ — lon số chẵn cao hơn 1 chút để tạo nhịp visual */
.cta-partner__cans-wrap .splide__slide:nth-child(even) img {
  height: clamp(18rem, 22vw, 26rem);
}

/* Fade gradient 2 đầu — mask lon hiện/biến mượt */
.cta-partner__cans-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12rem;
  z-index: 2;
  pointer-events: none;
}
.cta-partner__cans-fade--left {
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.cta-partner__cans-fade--right {
  right: 0;
  background: linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

/* Responsive */
@media (max-width: 767.98px) {
  .cta-partner { padding: 4rem 0 0; }
  .cta-partner__cans-wrap { margin-top: 3.2rem; }
  .cta-partner__cans-fade { width: 6rem; }
}
@media (max-width: 575.98px) {
  .cta-partner__desc { font-size: 1.4rem; padding: 0 1.6rem; }
  .cta-partner__cans-wrap .cta-partner__can img { height: 13rem !important; }
  .cta-partner__cans-wrap .splide__slide:nth-child(even) img { height: 15rem !important; }
}

/* Bản rút gọn trên trang danh mục: CHỈ nút download (đã bỏ tiêu đề/mô tả/slide lon).
   Base .cta-partner chỉ có padding-top nên thêm padding-bottom cho cân đối. */
.cta-partner--download {
  padding-bottom: 6rem;
}
@media (max-width: 767.98px) {
  .cta-partner--download { padding-bottom: 4rem; }
}

/* =====================================================================
 *  Accordion shortcode [accordion] / [accordion_item]
 *  Prefix `.mona-acc` để né conflict với .accordion FE template
 * ===================================================================== */
.mona-acc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

.mona-acc__item {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color .2s ease;
}
.mona-acc__item.is-active {
  border-color: var(--color-pri, #ed1c24);
}

.mona-acc__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.mona-acc__header:hover .mona-acc__title {
  color: var(--color-pri, #ed1c24);
}

.mona-acc__title {
  flex: 1;
  font-size: 1rem;
  line-height: 1.4;
}

.mona-acc__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.mona-acc__icon::before,
.mona-acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .25s ease;
}
.mona-acc__icon::before {
  inset: 0 0 0 0;
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.mona-acc__icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.mona-acc__item.is-active .mona-acc__icon::after {
  transform: translateX(-50%) scaleY(0);
}

.mona-acc__content {
  border-top: 1px solid #efefef;
}
.mona-acc__inner {
  padding: 16px 20px;
}

/* =====================================================================
 *  Banner section — overlay style giữ nguyên FE
 *  - Breadcrumb nằm ngay trên H1 (trong cùng .banner__txt)
 *  - H1 + desc center, white
 * ===================================================================== */
.banner-section {
  position: relative;
}

/* =====================================================================
 *  Breadcrumb — Rank Math custom markup
 *    <nav class="breadcrumbs">
 *      <li class="breadcrumbs-item"><a class="breadcrumbs-link" href="">Home</a></li>
 *      <li class="breadcrumbs-item"><a class="breadcrumbs-link" href="">Current</a></li>
 *    </nav>
 *
 *  Note: <li> không có <ul> nên cần reset bullet và bố cục lại bằng flex.
 * ===================================================================== */
nav.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem .8rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: .02em;
}

nav.breadcrumbs .breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Separator ›  giữa các item (không hiện trước item đầu) */
nav.breadcrumbs .breadcrumbs-item + .breadcrumbs-item::before {
  content: "›";
  display: inline-block;
  margin-right: .8rem;
  opacity: .65;
  font-weight: 300;
}

nav.breadcrumbs .breadcrumbs-link,
nav.breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease, text-decoration-color .2s ease;
}
nav.breadcrumbs .breadcrumbs-link:hover,
nav.breadcrumbs a:hover {
  opacity: .85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Item cuối (trang hiện tại) — bold, mờ nhẹ, cắt nếu dài */
nav.breadcrumbs .breadcrumbs-item:last-child .breadcrumbs-link,
nav.breadcrumbs .breadcrumbs-item:last-child > span,
nav.breadcrumbs [aria-current="page"] {
  font-weight: 600;
  opacity: .9;
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Overlay trên banner: chữ trắng --- */
.banner-section nav.breadcrumbs {
  justify-content: center;
  color: #fff;
}
.banner-section nav.breadcrumbs,
.banner-section nav.breadcrumbs a,
.banner-section nav.breadcrumbs .breadcrumbs-link,
.banner-section nav.breadcrumbs .breadcrumbs-item::before,
.banner-section nav.breadcrumbs span {
  color: #fff !important;
}
.banner-section nav.breadcrumbs .breadcrumbs-link:hover {
  opacity: .85;
}

/* --- Trong content (single/page/archive) — căn trái, màu mặc định --- */
.m-postdt nav.breadcrumbs,
.page-article nav.breadcrumbs,
.page-section nav.breadcrumbs {
  justify-content: flex-start;
  color: var(--color-text, #444);
}
.m-postdt nav.breadcrumbs a,
.page-article nav.breadcrumbs a,
.page-section nav.breadcrumbs a {
  color: var(--color-pri, #ed1c24);
}

/* Responsive */
@media (max-width: 575.98px) {
  nav.breadcrumbs {
    font-size: 1.2rem;
    gap: .3rem .6rem;
  }
  nav.breadcrumbs .breadcrumbs-item + .breadcrumbs-item::before {
    margin-right: .5rem;
  }
  nav.breadcrumbs .breadcrumbs-item:last-child .breadcrumbs-link {
    max-width: 22ch;
  }
}

/* Content overlay: center theo cả ngang & dọc */
.banner-section .banner__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-section .banner__content .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.banner-section .banner__txt {
  width: 100%;
  text-align: center;
  color: #fff;
}
.banner-section .banner__txt .banner-header {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.banner-section .banner__txt .banner-header h1.tt-sec {
  margin: 0 0 16px;
  color: #fff;
}
.banner-section .banner__txt .banner-desc {
  margin: 0 auto;
  max-width: 720px;
  line-height: 1.5;
  color: #fff;
}
@media (max-width: 767.98px) {
  .banner-section .breadcrumbs {
    margin-bottom: .8rem;
  }
  .banner-section .banner__txt .banner-desc {
    padding: 0 1rem;
  }
}

/* =====================================================================
 *  Modal "Request a Consultation" — bố cục form 2 cột
 *  Áp dụng cho cả markup fallback và CF7
 * ===================================================================== */
#modalForm .contact-form .form-wrap,
#modalForm .contact-form .wpcf7-form > p {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

/* Mỗi field 1 cột */
#modalForm .contact-form .form-group {
  margin: 0;
}

/* Notes (textarea) + nút submit chiếm full chiều ngang */
#modalForm .contact-form .form-group:has(textarea),
#modalForm .contact-form .form-action,
#modalForm .contact-form .form-group--full {
  grid-column: 1 / -1;
}

/* =====================================================================
 *  Helper class dùng chung — đặt vào bất kỳ .form-group / .form-row nào
 *  để ép field chiếm full chiều ngang (span hết các cột).
 *  HTML: <span class="form-group form-full">[your-field]</span>
 * ===================================================================== */
.form-full,
.form-group.form-full,
.form-row.form-full,
.wpcf7-form .form-full {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Đảm bảo input/select/textarea fill cell */
#modalForm .contact-form .form-input,
#modalForm .contact-form .form-select,
#modalForm .contact-form textarea,
#modalForm .contact-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-submitbtn) {
  width: 100%;
  box-sizing: border-box;
}

#modalForm .contact-form textarea {
  min-height: 110px;
  resize: vertical;
}

/* CF7 reset margin/padding của <p> wrapper khi dùng */
#modalForm .contact-form .wpcf7-form > p {
  margin: 0;
}

/* Hiệu chỉnh nút submit */
#modalForm .contact-form .form-action {
  margin-top: 8px;
}

#modalForm .contact-form .wpcf7-submitbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
}

#modalForm .contact-form .wpcf7-spinner {
  margin-left: 8px;
}

/* Responsive: mobile về 1 cột */
@media (max-width: 640px) {
  #modalForm .contact-form .form-wrap,
  #modalForm .contact-form .wpcf7-form > p {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =====================================================================
 *  Footer Certifications — dải logo chứng nhận dưới logo công ty
 * ===================================================================== */
/* Feedback 22/7: 6 logo chia 2 hàng (3 logo/hàng), logo to hơn trong khung trắng.
   Ảnh nguồn đã cắt bỏ vòng nguyệt quế nên logo choán gần hết khung. */
.footer-left .footer-certs__list {
  list-style: none;
  margin: 2.4rem auto 0;
  padding: 0;
  display: grid;
  /* Cột rộng cố định: .footer-left là flex column, margin auto (để canh giữa)
     làm mất stretch nên 1fr sẽ co về 0 -> phải đặt bề rộng cột tường minh. */
  grid-template-columns: repeat(3, 12.4rem);
  justify-content: center;
  gap: 1.6rem;
}
.footer-left .footer-certs__item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nền trắng bo tròn để logo nổi rõ trên nền footer đỏ */
  background: #fff;
  border-radius: 1.2rem;
  padding: 1rem;
  min-height: 9.4rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.footer-left .footer-certs__item img {
  display: block;
  width: auto;
  height: auto;
  max-height: 7.4rem;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 1199.98px) {
  .footer-left .footer-certs__list { grid-template-columns: repeat(3, 10.8rem); gap: 1.2rem; }
  .footer-left .footer-certs__item { min-height: 8.4rem; padding: 1rem; }
  .footer-left .footer-certs__item img { max-height: 6.2rem; }
}

/* 768–991px: .footer-left chỉ rộng 30% -> phải thu nhỏ để 3 cột không tràn */
@media (max-width: 991.98px) {
  .footer-left .footer-certs__list { grid-template-columns: repeat(3, 6.6rem); gap: .8rem; }
  .footer-left .footer-certs__item { min-height: 6.4rem; padding: .6rem; border-radius: .8rem; }
  .footer-left .footer-certs__item img { max-height: 4.8rem; }
}

/* <768px: .footer-left full width -> quay lại 3 cột co giãn */
@media (max-width: 767.98px) {
  .footer-left .footer-certs__list {
    margin-top: 1.6rem;
    width: 100%;
    max-width: 34rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .footer-left .footer-certs__item {
    min-height: 7.4rem;
    padding: .8rem 1rem;
    border-radius: 1rem;
  }
  .footer-left .footer-certs__item img { max-height: 5.4rem; }
}

/* =====================================================================
 *  Sticky buttons — call sale + back-to-top, góc phải dưới
 * ===================================================================== */
.mona-sticky {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  pointer-events: none;
}

.mona-sticky__btn {
  pointer-events: auto;
  width: 5rem;
  height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-pri, #ed1c24);
  color: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.mona-sticky__btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 24px rgba(237, 28, 36, .35);
  background: #c11820;
}
.mona-sticky__btn img,
.mona-sticky__btn svg {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
  pointer-events: none;
}

/* Tooltip hover hiển thị label */
.mona-sticky__btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 1rem);
  top: 50%;
  transform: translateY(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  padding: .5rem .9rem;
  border-radius: .6rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.mona-sticky__btn[data-tooltip]:hover::before {
  opacity: 1;
}
.mona-sticky__btn[data-tooltip=""]:not([data-tooltip]):hover::before,
.mona-sticky__btn:not([data-tooltip])::before {
  display: none;
}

/* Back-to-top: nhẹ hơn, trắng */
.mona-sticky__btn--top {
  background: #fff;
  color: var(--color-pri, #ed1c24);
  border: 2px solid var(--color-pri, #ed1c24);
}
.mona-sticky__btn--top:hover {
  background: var(--color-pri, #ed1c24);
  color: #fff;
}

/* Ripple animation cho phone (giả phone đang rung) */
.mona-sticky__btn--phone::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-pri, #ed1c24);
  opacity: 0;
  animation: stickyRing 1.6s infinite ease-out;
  pointer-events: none;
}
@keyframes stickyRing {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* Buffer footer để không che chữ. Đặt ở .footer-bottom (không phải .footer) vì
   hàng cuối nay đã dùng nền đỏ — để ở .footer sẽ hở ra một dải trắng dưới đáy. */
.footer-bottom {
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

@media (max-width: 767.98px) {
  .mona-sticky {
    right: 1.2rem;
    bottom: 1.4rem;
    gap: .8rem;
  }
  .mona-sticky__btn {
    width: 4.2rem;
    height: 4.2rem;
  }
  .mona-sticky__btn img,
  .mona-sticky__btn svg {
    width: 2rem;
    height: 2rem;
  }
  /* Nút sticky (phone + back-to-top) fixed ở góc phải dưới -> chừa chỗ để không đè chữ/social hàng cuối footer */
  .footer-bottom {
    padding-bottom: 3rem;
  }
  /* Đẩy hàng cuối (© + social icons) sang trái, tránh vùng nút sticky bên phải (~5.4rem) */
  .footer-bottom_inner {
    padding-right: 6.5rem;
  }
}

/* =====================================================================
 *  Mission / Vision — layout 2 cột (text | image)
 *  - DOM: text TRƯỚC image (SEO chuẩn)
 *  - .is-reverse → CSS đảo flex để image hiện bên trái
 *  Override FE about.css mặc định (display: flex; flex-direction: column)
 * ===================================================================== */
section.about-core-section .mission__wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4rem;
  row-gap: 4rem !important;
}
section.about-core-section.is-reverse .mission__wrap {
  flex-direction: row-reverse !important;
}

section.about-core-section .mission__col {
  flex: 1 1 0 !important;
  min-width: 0;
  width: auto;
  padding-left: 0 !important;
}

section.about-core-section .mission__col--text {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* Force giữ padding-left cho .mission__tt để text đứng SAU icon arrow ::before */
section.about-core-section .mission__col--text .mission__tt {
  position: relative !important;
  padding-left: 4rem !important;
}
@media (max-width: 800px) {
  section.about-core-section .mission__col--text .mission__tt {
    padding-left: 3.2rem !important;
  }
}

section.about-core-section .mission__col--media .mission__figure {
  margin: 0;
}
section.about-core-section .mission__col--media .mission__img {
  display: block;
  width: 100%;
  height: auto;
  /* Nén ảnh để Mission + Vision gọn trong ~1 màn hình (trước 48rem) */
  max-height: 26rem;
  object-fit: cover;
  border-radius: 1.6rem;
}
/* Giảm khoảng cách dưới mỗi mục Mission/Vision cho gọn (utility pb-100 = 10rem) */
section.about-core-section .mission__wrap.pb-100 {
  padding-bottom: 3.2rem !important;
}

/* Mobile: luôn stack 1 cột (text trên, ảnh dưới), bỏ reverse */
@media (max-width: 991.98px) {
  section.about-core-section .mission__wrap,
  section.about-core-section.is-reverse .mission__wrap {
    flex-direction: column !important;
    gap: 2.4rem;
  }
  section.about-core-section .mission__col {
    flex: 1 1 100% !important;
    width: 100%;
  }
}

/* =====================================================================
 *  screen-reader-text — heading ẩn cho a11y + HTML5 outline
 *  Visually hidden nhưng screen reader vẫn đọc.
 * ===================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* =====================================================================
 *  Category / Taxonomy — Featured + All Articles sections
 * ===================================================================== */
.cat-featured__title,
.m-post__title {
  margin: 0 0 4rem;
  font-family: var(--font-sec);
  /* Kế thừa .tt-sec từ FE: font-weight 900, size 6rem, letter-spacing -2% */
}

.cat-featured__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2rem;
}
@media (max-width: 991.98px) {
  .cat-featured__list { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
}
@media (max-width: 575.98px) {
  .cat-featured__list { grid-template-columns: 1fr; }
}

.cat-featured .article-item {
  height: 100%;
}

/* Link title — bỏ underline */
.article-title-link {
  text-decoration: none;
  color: inherit;
}
.article-title-link h3 {
  transition: color .2s ease;
}
.article-title-link:hover h3 {
  color: var(--color-pri, #ed1c24);
}

/* =====================================================================
 *  SHOP page — root categories + filter + product list
 * ===================================================================== */
/* Feedback 22/7: 9 danh mục gốc bỏ ảnh, chuyển thành pill text bo tròn
   (cùng ngôn ngữ với .shop-filters__btn ngay bên dưới). */
.shop-roots__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

.shop-roots__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.shop-roots__item:hover,
.shop-roots__item:focus-visible {
  background: #fbe9eb;
  border-color: var(--color-pri, #ed1c24);
  color: var(--color-pri, #ed1c24);
  transform: translateY(-2px);
}
/* Danh mục đang xem (trang danh mục con cũng highlight cha) */
.shop-roots__item.is-active {
  background: var(--color-pri, #ed1c24);
  border-color: var(--color-pri, #ed1c24);
  color: #fff;
}

.shop-roots__name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 2rem;   /* khớp chiều cao với .shop-filters__btn (44px) */
  color: inherit;
}

@media (max-width: 575.98px) {
  .shop-roots__list { gap: .8rem; }
  .shop-roots__item { padding: .8rem 1.4rem; }
  .shop-roots__name { font-size: 1.1rem; }
}

}

/* Utility padding shorts */
.pt-50 { padding-top: 5rem !important; }
.pb-50 { padding-bottom: 5rem !important; }
.pt-30 { padding-top: 3rem !important; }
.pb-30 { padding-bottom: 3rem !important; }

/* Product list title — giữ UI to bự của .tt-sec, chỉ là <p> thay vì <h2> */
.shop-products__title {
  margin: 0 0 2.4rem;
}

/* =====================================================================
 *  Product list — chỉ override --col-gap (FE tự dùng cho row-gap + width)
 *  Cấu trúc gốc: width: calc(100% / var(--num) - (1 - 1/var(--num)) * var(--col-gap))
 *               row-gap: var(--col-gap)
 * ===================================================================== */
.shop-products .product__list,
.category .product__list,
.category__product .product__list {
  --col-gap: 2.4rem !important;
}
@media (max-width: 1199.98px) {
  .shop-products .product__list,
  .category .product__list,
  .category__product .product__list { --col-gap: 1.6rem !important; }
}
@media (max-width: 575.98px) {
  .shop-products .product__list,
  .category .product__list,
  .category__product .product__list { --col-gap: 1.2rem !important; }
}

/* =====================================================================
 *  Product item — UI dùng chung cho Shop + Category + Brand archive
 *  Scope: .shop-products HOẶC .category .product__list
 * ===================================================================== */
.shop-products .product__item,
.category .product__list .product__item,
.category__product .product__item {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Khung ảnh — borderless, nền #F9FAFB */
.shop-products .product__item .product__img,
.category .product__list .product__item .product__img,
.category__product .product__item .product__img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F9FAFB;
  border: 0;
  border-radius: 1.6rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
}

/* Ảnh: mặc định scale .7 → hover scale .9 */
.shop-products .product__item .product__img img,
.category .product__list .product__item .product__img img,
.category__product .product__item .product__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.7);
  transition: transform .35s ease;
}
.shop-products .product__item:hover .product__img img,
.category .product__list .product__item:hover .product__img img,
.category__product .product__item:hover .product__img img {
  transform: scale(.76) !important;   /* base .7 -> phóng nhẹ ~8% (feedback 22/7) */
}

/* Nút overlay trên card = Quick view (hiện khi hover). KHÔNG ẩn nữa.
   Trước đây ẩn để bỏ "See more"; giờ .product__more là trigger Quick view
   (xem mona-quickview.css: display:flex !important, opacity 0 -> 1 khi hover). */

/* Text */
.shop-products .product__item .product__txt,
.category .product__list .product__item .product__txt,
.category__product .product__item .product__txt {
  text-align: center;
}
.shop-products .product__item .product__label,
.category .product__list .product__item .product__label,
.category__product .product__item .product__label {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 .6rem;
}
.shop-products .product__item .product__desc,
.category .product__list .product__item .product__desc,
.category__product .product__item .product__desc {
  font-size: 1.3rem;
  color: #555;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Filter buttons — clickable category chips */
.shop-filters__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.2rem;
}
.shop-filters__btn {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  background: #fff;
  color: var(--color-pri, #ed1c24);
  border: 2px solid var(--color-pri, #ed1c24);
  border-radius: 999px;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.shop-filters__btn:hover {
  background: #fbe9eb;
  transform: translateY(-2px);
}
.shop-filters__btn.is-active {
  background: var(--color-pri, #ed1c24);
  color: #fff;
}

/* Backward compat (cũ) */
.shop-filters__group { min-width: 22rem; }

/* Product list section title (fake text per spec) */
.shop-products__title {
  text-align: center;
  margin-bottom: 4rem;
}

@media (max-width: 575.98px) {
  .shop-filters__group { min-width: 100%; }
}

/* =====================================================================
 *  Category page — Expand/Collapse description
 *  Nút Download Spec Sheet dùng .btn chuẩn dự án — không cần CSS custom
 * ===================================================================== */
.cat-spec { text-align: center; }

/* Cat description — expand/collapse
 * ---------------------------------------------------------------------
 * Feedback 14/8: chỉ tồn tại DUY NHẤT 1 phiên bản nội dung (.cat-content__full).
 * Trước đây collapsed đổi sang một <div> plain-text 400 ký tự => DOM có 2 bản,
 * bản thu gọn mất hết thẻ định dạng và bị dồn chữ của đoạn/heading phía dưới lên.
 *
 * Nay thu gọn = CLIP bằng max-height + overflow:hidden trên chính khối full:
 *   - nội dung vẫn nguyên vẹn trong HTML (Google quét đủ), không display:none;
 *   - thẻ h2/h3/ul/strong… giữ nguyên, chữ nằm đúng vị trí của nó, mở ra không nhảy;
 *   - phần bị che chỉ là tràn ngoài khung, không xoá khỏi DOM.
 * Chốt theo em (4-5 dòng đầu) thay vì đếm đúng 400 ký tự: cắt theo ký tự sẽ phải
 * đụng vào cấu trúc HTML, còn cắt theo chiều cao thì không.
 */
.cat-content__inner {
  position: relative;
}
.cat-content__full { display: block; }

.cat-content__inner.is-collapsed .cat-content__full {
  /* ~5 dòng: 5 × 1.6em line-height. Dùng em để co giãn theo cỡ chữ của khối. */
  max-height: 8em;
  overflow: hidden;
  /* Mờ dần dòng cuối để thấy rõ là còn nội dung phía dưới */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4em), transparent);
}
/* Khoảng cách trên/dưới của thẻ đầu tiên bị tính vào 8em -> bỏ để đếm đủ 5 dòng chữ */
.cat-content__inner.is-collapsed .cat-content__full > *:first-child { margin-top: 0; }

@media (max-width: 767.98px) {
  /* Dòng ngắn hơn nên cùng 5 dòng vẫn ra ít chữ; nới thêm 1 dòng cho đỡ cụt. */
  .cat-content__inner.is-collapsed .cat-content__full { max-height: 9.6em; }
}

.cat-content__toggle {
  margin-top: 1.6rem;
  cursor: pointer;
}

/* =====================================================================
 *  Single Product page — header structure + 2 cột
 * ===================================================================== */

/* ---------------------------------------------------------------
 *  Header fixed né: section .product có padding-top để breadcrumb
 *  không chui xuống dưới header. FE template push .good__hero 12.8rem
 *  → ta đẩy padding-top lên thẳng section.product để bao cả breadcrumb.
 * --------------------------------------------------------------- */
.p-productdt section.product {
  position: relative;
  padding-top: 10rem;
  padding-bottom: 4rem;
  background: #fafafa;          /* liền màu với .main::before + .juice */
}
@media (max-width: 1199.98px) {
  .p-productdt section.product { padding-top: 8rem; }
}
@media (max-width: 575.98px) {
  .p-productdt section.product { padding-top: 6rem; }
}

/* Breadcrumb canh trái, gap gọn (chỉ trang chi tiết sản phẩm) */
nav.breadcrumbs.product-breadcrumbs,
section.product nav.breadcrumbs {
  justify-content: flex-start;
  text-align: left;
  margin: 0 0 1.2rem;
}

/* Header (chứa h1) — canh trái, sát breadcrumb */
.product-header {
  text-align: left;
  margin: 0 0 2.4rem;
}
.product-header .product_title {
  margin: 0;
  text-align: left;
}

/* Tags trong cột phải — bỏ margin-bottom vì wrapper đã có gap */
.good__info .good__tags,
.summary .good__tags {
  margin-bottom: 0;
}

/* SKU + tags trong cột phải */
.product-sku {
  margin: .8rem 0 0;
  font-size: 1.4rem;
  color: #555;
}
.product-sku strong {
  color: #1a1a1a;
}

/* Override .juice (summary cột phải) — nền nhạt, bỏ padding mặc định */
.good__info .summary.juice,
.summary.juice {
  background: #fafafa;
  padding: 0;
}

/* 2 cột — image trái, info phải (giống FE .good__hero, không padding-top) */
.good__hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  --col-gap: 10.2rem;
  column-gap: var(--col-gap);
  row-gap: 4rem;
  padding-top: 0;       /* đã đẩy lên section.product */
  padding-bottom: 0;
}
@media (max-width: 1536.98px) { .good__hero { --col-gap: 6.2rem; } }
@media (max-width: 1199.98px) { .good__hero { --col-gap: 3.2rem; } }

/* Cột trái: gallery WooCommerce */
.good__hero > .woocommerce-product-gallery,
.good__hero > .images {
  width: 48%;
  margin: 0;
  float: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Cột phải: info */
.good__hero .good__info {
  flex: 1;
  min-width: 0;
}
.good__hero .good__info .summary {
  margin: 0;
  width: 100%;
  max-width: 100%;
  float: none;
}

@media (max-width: 991.98px) {
  .good__hero { flex-direction: column; }
  .good__hero > .woocommerce-product-gallery,
  .good__hero > .images,
  .good__hero .good__info { width: 100%; }
}

/* =====================================================================
 *  Product accordion (.mona-acc-product) — Specs + Description
 *  Prefix riêng để né conflict với .accordion FE
 * ===================================================================== */
.mona-acc-product {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.mona-acc-product__item {
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  transition: border-color .2s ease;
}
.mona-acc-product__item.is-active {
  border-color: var(--color-pri, #ed1c24);
}
.mona-acc-product__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.8rem 2.4rem;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.mona-acc-product__title {
  flex: 1;
  margin: 0;
}
.mona-acc-product__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-pri, #ed1c24);
}
.mona-acc-product__icon::before,
.mona-acc-product__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .25s ease;
}
.mona-acc-product__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.mona-acc-product__icon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.mona-acc-product__item.is-active .mona-acc-product__icon::after {
  transform: translateX(-50%) scaleY(0);
}
.mona-acc-product__content {
  border-top: 1px solid #eee;
}
.mona-acc-product__inner {
  padding: 2rem 2.4rem;
}
.mona-acc-product__content .cat-content__inner,
.mona-acc-product__content article {
  padding: 2rem 2.4rem;
}

/* =====================================================================
 *  Similar Products (aside) — nền TRẮNG, card khớp product list shop/cate
 *  Áp dụng cùng style với .shop-products / .category .product__list
 * ===================================================================== */
aside.similar-products {
  background: #fff;
}

/* Title — gap với slider phía dưới */
.similar-products > .container > .tt-sec,
.similar-products .tt-sec {
  margin: 0 0 4rem;
}
@media (max-width: 991.98px) {
  .similar-products .tt-sec { margin-bottom: 3rem; }
}
@media (max-width: 575.98px) {
  .similar-products .tt-sec { margin-bottom: 2.4rem; }
}

/* Item layout */
.similar-products .product__item {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Khung ảnh — vuông, nền #F9FAFB */
.similar-products .product__item .product__img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F9FAFB;
  border: 0;
  border-radius: 1.6rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
}
.similar-products .product__item .product__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.7);
  transition: transform .35s ease;
}
.similar-products .product__item:hover .product__img img {
  transform: scale(.76) !important;   /* base .7 -> phóng nhẹ ~8% (feedback 22/7) */
}

/* Bỏ "See more" overlay (giống shop/cate) */
.similar-products .product__item .product__more {
  display: none;
}

/* Text */
.similar-products .product__item .product__txt {
  text-align: center;
}
.similar-products .product__item .product__label,
.similar-products .product__item h4.product__label {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 .6rem;
  line-height: 1.3;
}
.similar-products .product__item .product__desc {
  font-size: 1.3rem;
  color: #555;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Trang danh mục SP (leaf): Filter và Product List tách thành 2 <section> riêng
   - .category--filter  : section chứa brand slider + dropdown lọc (đứng trước)
   - .category--products: section chứa tiêu đề "Product List" (text) + lưới SP
   Cả hai vẫn nằm trong 1 <form.mona-post-ajax> nên AJAX lọc/pagination giữ nguyên.
   ========================================================================== */
.category--filter {
  padding-top: 8rem;
  padding-bottom: 0;
}
.category--products {
  padding-top: 3rem;
  padding-bottom: 10rem;
}
@media screen and (max-width: 991.98px) {
  .category--filter { padding-top: 6rem; }
  .category--products { padding-bottom: 6rem; }
}
@media screen and (max-width: 575.98px) {
  .category--filter { padding-top: 4rem; }
}

/* Section filter: brand slider cách dropdown 1 khoảng */
.category--filter .container {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
/* Bỏ justify-content:space-between của .category__filter (trước dùng để đẩy h2 trái / dropdown phải).
   Giờ không còn h2 nên canh dropdown sang phải cho gọn. */
.category--filter .category__filter {
  justify-content: flex-end;
}
@media screen and (max-width: 1199.98px) {
  .category--filter .category__filter {
    justify-content: center;
  }
}

/* "Product List" giờ là text (thẻ <p>), không phải <h2> — canh giữa, cách lưới SP */
.category__title {
  margin: 0 0 4rem;
}
@media screen and (max-width: 991.98px) {
  .category__title { margin-bottom: 2.4rem; }
}

/* Chi tiết blog: TOC đặt TRƯỚC nội dung trong DOM (a11y/SEO) nhưng vẫn hiển thị
   ở cột phải bằng flex order (content trái = order 1, TOC phải = order 2). */
.m-postdt_inner .m-postdt_left { order: 1; }
.m-postdt_inner .m-postdt_right { order: 2; }

/* Certificates (About): content h2+desc đặt TRƯỚC slider trong DOM (spec).
   Desktop giữ visual slider trái / content phải bằng order; mobile content ở trên. */
@media (min-width: 992px) {
  section.cerfificate .cerfificate__content { order: 2; }
}
@media (max-width: 991.98px) {
  section.cerfificate .cerfificate__wrap { flex-direction: column !important; }
}

/* =====================================================================
 *  CTA download (About + Danh mục SP) — feedback 12/8
 * =====================================================================
 * Khách muốn nút và icon có hiệu ứng cho nổi bật / gây chú ý hơn.
 * 3 lớp hiệu ứng chạy cùng 1 chu kỳ 2.8s nên chúng nối tiếp nhau chứ không
 * giật loạn xạ, và ĐỀU DỪNG khi hover để lúc người dùng nhắm bấm thì nút
 * đứng yên:
 *   1. Vòng sáng đỏ lan ra + nhún nhẹ  -> kéo mắt từ xa (0–55% chu kỳ).
 *   2. Vệt sáng quét ngang mặt nút     -> nút trông "bấm được" (35–75%).
 *   3. Icon lon lắc-nảy, mũi tên nhích -> chỉ hành động tải về (0–40% / 55–86%).
 * .btn có sẵn overflow:hidden nên vệt sáng bị cắt gọn trong bo tròn; còn
 * box-shadow vẽ ngoài border-box nên không bị overflow cắt.
 */
.cta-download { display: inline-flex; align-items: center; gap: 1rem; }

.cta-partner--download .btn {
  --btn-padding: 1.5rem 3.2rem;
  /* Chốt bán kính = nửa chiều cao thay vì 222.2rem của base — kết quả hiển thị y hệt
     nhưng khỏi phải nhờ trình duyệt clamp một con số 2222px. */
  --btn-border-radius: 2.9rem;
  border-radius: 2.9rem;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  animation: cta-dl-attention 2.8s ease-out infinite;
}
@media (max-width: 575.98px) {
  .cta-partner--download .btn { --btn-padding: 1.2rem 2rem; font-size: 1.4rem; --btn-border-radius: 2.2rem; border-radius: 2.2rem; }
}

/* Vệt sáng quét ngang. left:0 + translateX theo % BỀ RỘNG CỦA CHÍNH VỆT
   (=40% bề rộng nút) nên chỉ chạy transform, không gây reflow. */
.cta-partner--download .btn::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: 0;
  width: 40%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  animation: cta-dl-shine 2.8s ease-in-out infinite;
}

.cta-partner--download .btn:hover,
.cta-partner--download .btn:focus-visible { animation-play-state: paused; }
.cta-partner--download .btn:hover::after,
.cta-partner--download .btn:focus-visible::after { opacity: 0; animation-play-state: paused; }
.cta-partner--download .btn:hover .cta-download__can,
.cta-partner--download .btn:hover img,
.cta-partner--download .btn:focus-visible .cta-download__can,
.cta-partner--download .btn:focus-visible img { animation-play-state: paused; }

.cta-download__can {
  display: inline-flex;
  transform-origin: 50% 90%;
  animation: cta-can-wiggle 2.8s ease-in-out infinite;
}
.cta-partner--download .btn img {
  animation: cta-dl-arrow 2.8s ease-in-out infinite;
}

@keyframes cta-dl-attention {
  0%        { box-shadow: 0 0 0 0 rgba(237, 28, 36, 0.55); transform: scale(1); }
  55%       { box-shadow: 0 0 0 1.6rem rgba(237, 28, 36, 0); transform: scale(1.035); }
  70%, 100% { box-shadow: 0 0 0 0 rgba(237, 28, 36, 0); transform: scale(1); }
}
@keyframes cta-dl-shine {
  0%, 35%   { transform: translateX(-160%) skewX(-22deg); opacity: 0; }
  40%       { opacity: 1; }
  75%, 100% { transform: translateX(330%) skewX(-22deg); opacity: 0; }
}
@keyframes cta-can-wiggle {
  0%, 46%, 100% { transform: rotate(0) translateY(0) scale(1); }
  6%  { transform: rotate(-14deg) translateY(-3px) scale(1.08); }
  13% { transform: rotate(11deg) translateY(0) scale(1.08); }
  20% { transform: rotate(-8deg) translateY(-2px); }
  27% { transform: rotate(5deg); }
  34% { transform: rotate(-3deg); }
  40% { transform: rotate(0) translateY(0) scale(1); }
}
@keyframes cta-dl-arrow {
  0%, 55%, 100% { transform: translateX(0); }
  63% { transform: translateX(0.5rem); }
  71% { transform: translateX(0); }
  79% { transform: translateX(0.5rem); }
  87% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-partner--download .btn,
  .cta-partner--download .btn::after,
  .cta-partner--download .btn img,
  .cta-download__can { animation: none; }
  .cta-partner--download .btn::after { display: none; }
}

/* =====================================================================
 *  CTA E-Catalogue — nút nổi ghim cố định góc TRÁI (feedback 14/8)
 * =====================================================================
 * Khách: đưa nút "Download Company Profile" (nay đổi nhãn "E-Catalogue")
 * sang bên trái và đóng băng cố định 1 chỗ.
 * Đặt góc trái DƯỚI để đối xứng với cụm .mona-sticky (phải dưới, z-index 999)
 * và không che nội dung giữa trang; z-index 998 = nằm ngay dưới cụm đó.
 * Chỉ trang Về chúng tôi mới có modifier này — CTA spec sheet ở trang danh
 * mục SP vẫn là section inline như cũ.
 */
.cta-partner--float {
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  z-index: 998;
  width: auto;
  max-width: calc(100vw - 4rem);
  margin: 0;
  padding: 0;
  /* wrapper chỉ để định vị -> không nuốt click của nội dung phía sau */
  pointer-events: none;
  /* !!! Base `.cta-partner` có overflow:hidden (hợp lý khi nó là section full-width).
     Ở dạng nổi thì khối này chỉ rộng đúng bằng ô icon (5.8rem) nên overflow:hidden
     CẮT VUÔNG mọi thứ tràn ra: bóng đổ bị xén thành mảng vuông, vòng ring chỉ còn
     4 vệt ở góc — đúng lỗi khách chụp. Bắt buộc mở lại. */
  overflow: visible;
}
.cta-partner--float .container,
.cta-partner--float .cta-partner__content {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------
 * Feedback 14/8 (đợt 2): bộ hiệu ứng cũ (halo + scale + vệt sáng) chồng lên
 * lớp fill trắng `.btn::before` của base -> ra mảng loang trắng/viền lệch.
 * Nay nút nổi chạy cơ chế khác hẳn: mặc định THU GỌN thành ô icon tròn có
 * vòng ring lan ra như nút phone, hover mới BUNG RA lộ chữ.
 * -> tắt sạch halo/scale/vệt sáng và fill trắng trên biến thể --float.
 * Bản inline ở trang danh mục SP không dính, vẫn giữ hiệu ứng cũ.
 * --------------------------------------------------------------------- */
.cta-partner--float .cta-partner__content {
  position: relative;
  display: inline-flex;
}

/* Feedback 7/9: khách muốn nút nổi hiện HẲN chữ "Company Profile", bỏ trạng
   thái thu gọn thành ô icon lon (icon + vòng ring lan ra không còn dùng nữa). */
.cta-partner--float .btn {
  pointer-events: auto;
  --btn-padding: 0 2.4rem;
  --btn-gap: 0;
  gap: 0;                     /* đè .cta-download{gap:1rem} -> khoảng cách chữ/mũi tên dùng margin của con */
  --btn-img-width: 2rem;
  --btn-img-height: 2rem;
  height: 5.8rem;
  max-width: none;
  justify-content: center;
  font-size: 1.6rem;
  --btn-border-radius: 2.9rem; /* = nửa chiều cao -> viên thuốc */
  border-radius: 2.9rem;
  box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .22);
  animation: none;            /* tắt cta-dl-attention (halo + scale) */
  transition: background-color .25s ease, box-shadow .25s ease;
}
/* Icon lon: chỉ ẩn ở biến thể nổi, bản inline trang danh mục SP vẫn giữ. */
.cta-partner--float .cta-download__can { display: none; }
.cta-partner--float .btn > * { flex: 0 0 auto; }

/* Tắt vệt sáng quét + fill trắng hover của base -> nút luôn đỏ đặc, sạch */
.cta-partner--float .btn::after { display: none; }
.cta-partner--float .btn::before { display: none; }
.cta-partner--float .btn:hover,
.cta-partner--float .btn:focus-visible {
  color: #fff;
  border-color: transparent;
  background-color: #c11820;
  box-shadow: 0 .8rem 2rem rgba(237, 28, 36, .35);
}
.cta-partner--float .btn:hover img,
.cta-partner--float .btn:focus-visible img { filter: none; }

/* Chữ + mũi tên luôn hiện (trước đây ép về bề ngang 0, hover mới bung ra). */
.cta-partner--float .cta-download__label {
  max-width: none;
  opacity: 1;
  white-space: nowrap;
}
.cta-partner--float .btn img {
  max-width: 2rem;
  margin-left: 1.2rem;
  opacity: 1;
}

/* Vòng ring tròn lan ra (kiểu nút phone) chỉ hợp khi nút là ô icon tròn —
   nay nút là viên thuốc có chữ nên bỏ hẳn. */
.cta-partner--float .cta-partner__content::before { display: none; }

/* Nút ghim ở đáy màn -> khi cuộn hết trang nó đè lên dòng "© All Right Reserved"
   (góc trái dưới footer). Chừa thêm padding đáy footer riêng cho trang Về chúng tôi. */
.p-about .footer-bottom { padding-bottom: 9rem; }

@media (max-width: 767.98px) {
  .cta-partner--float {
    left: 1.2rem;
    bottom: 1.4rem;
    max-width: calc(100vw - 8rem); /* chừa chỗ cho nút sticky bên phải */
  }
  .cta-partner--float .btn {
    --btn-padding: 0 1.8rem;
    height: 5.2rem;
    font-size: 1.3rem;
    --btn-border-radius: 2.6rem;
    border-radius: 2.6rem;
  }
  .cta-partner--float .btn img { margin-left: .8rem; }
  .p-about .footer-bottom { padding-bottom: 10rem; }
}

/* =====================================================================
 *  BLOG CHI TIẾT · Related Articles -> slider cuộn ngang (feedback 9/9)
 * =====================================================================
 * Trước: .latest-list là lưới flex 3 cột, nhiều bài thì xuống hàng, trang dài.
 * Nay bọc trong Swiper (.js-related__slider, init ở SwiperModule.js) — số bài
 * không giới hạn, admin chọn qua field ACF "Chọn bài viết liên quan".
 * post-detail.css KHÔNG có style cho .swiper-navigation/.swiper-pagination nên
 * nút điều hướng + dots viết ở đây.
 */
.post-related .latest-slider {
  position: relative;
  margin-top: 4rem;
}
/* Slide cao bằng nhau: Swiper set height:100%, đổi sang auto để card stretch. */
.post-related .latest-slider .swiper-slide {
  height: auto;
  display: flex;
}
.post-related .latest-slider .swiper-slide > .article-item {
  width: 100%;
}

.post-related .latest-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 3.2rem;
}
.post-related .latest-action .swiper-navigation {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.post-related .latest-action .swiper-navigation > div {
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, opacity .25s ease;
}
.post-related .latest-action .swiper-navigation > div img {
  width: 1.6rem;
  height: auto;
}
/* icon_nav_left.svg là mũi tên TRÁI -> nút next lật ngang lại. */
.post-related .latest-action .swiper-navigation > .next img {
  transform: scaleX(-1);
}
.post-related .latest-action .swiper-navigation > div:hover {
  background: var(--color-pri, #ed1c24);
  border-color: var(--color-pri, #ed1c24);
}
.post-related .latest-action .swiper-navigation > div:hover img {
  filter: brightness(0) invert(1);
}
.post-related .latest-action .swiper-navigation > .next:hover img {
  filter: brightness(0) invert(1);
  transform: scaleX(-1);
}
.post-related .latest-action .swiper-navigation > div.swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}

.post-related .latest-action .swiper-pagination {
  position: static;
  display: flex;
  align-items: center;
  gap: .8rem;
  width: auto;
}
.post-related .latest-action .swiper-pagination .swiper-pagination-bullet {
  width: .9rem;
  height: .9rem;
  margin: 0;
  opacity: 1;
  background: #d9d9d9;
  transition: width .25s ease, background-color .25s ease;
}
.post-related .latest-action .swiper-pagination .swiper-pagination-bullet-active {
  width: 2.4rem;
  border-radius: 99px;
  background: var(--color-pri, #ed1c24);
}

/* Feedback 9/9 (đợt 2): khách muốn 2 nút mũi tên nằm 2 BÊN slider, ngang tầm
   ảnh card, chứ không rớt xuống dưới cùng hàng với dots.
   Từ 1200px trở lên mới đủ chỗ nhét nút ra ngoài mép container (container
   121.6rem, viewport >= 1200 còn dư mỗi bên); nhỏ hơn thì giữ nguyên kiểu cũ
   (nút + dots xếp dưới) cho khỏi đè lên ảnh. */
@media (min-width: 1200px) {
  .post-related .latest-action { gap: 0; }
  .post-related .latest-action .swiper-navigation { display: contents; }
  .post-related .latest-slider .swiper-navigation > div {
    position: absolute;
    top: 30%;                 /* ngang tầm ảnh card, không phải giữa cả card */
    margin-top: -2.2rem;      /* = nửa chiều cao nút */
    z-index: 3;
    box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .12);
  }
  /* 1200–1279px: container đã chạm mép, đẩy nút ra ngoài sẽ bị cắt -> nằm đè
     nhẹ vào mép card. Từ 1280px trở lên mới đủ chỗ cho nút ra hẳn bên ngoài. */
  .post-related .latest-slider .swiper-navigation > .prev { left: .8rem; }
  .post-related .latest-slider .swiper-navigation > .next { right: .8rem; }
}
@media (min-width: 1280px) {
  .post-related .latest-slider .swiper-navigation > .prev { left: -2.2rem; }
  .post-related .latest-slider .swiper-navigation > .next { right: -2.2rem; }
}

@media (max-width: 767.98px) {
  .post-related .latest-slider { margin-top: 2.4rem; }
  .post-related .latest-action { margin-top: 2.4rem; gap: 1.6rem; }
  .post-related .latest-action .swiper-navigation > div { width: 3.8rem; height: 3.8rem; }
}

/* =====================================================================
 *  ABOUT · đoạn văn dưới bản đồ thế giới (feedback 9/9)
 * =====================================================================
 * .global__desc đang chạy full bề ngang container (124.8rem) -> 2 đoạn text
 * kéo dài gần hết màn, khó đọc. Khách muốn co lại vào vùng trung tâm.
 * Chỉ đặt max-width + căn giữa, không đụng font/row-gap của about.css.
 */
.about-sapo .global__desc {
  max-width: 92rem;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
 *  Footer: 1 <nav> gộp 2 menu (display:contents giữ nguyên 2 cột)
 * ===================================================================== */
.footer-nav { display: contents; }
.footer-domestic__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: opacity .25s ease; }
/* Feedback 22/7: hover cũ đổi sang var(--color-pri) = ĐỎ, trùng đúng nền footer
   -> chữ biến mất. Footer nền đỏ nên hover giữ chữ trắng, chỉ mờ nhẹ + đậm gạch chân. */
.footer-domestic__link:hover,
.footer-domestic__link:focus-visible {
  color: #fff;
  opacity: .78;
  text-decoration-thickness: 2px;
}

/* =====================================================================
 *  FOOTER · gộp hàng cuối vào khối đỏ (feedback 14/8)
 * =====================================================================
 * Trước: .footer-top và .footer-mid nền đỏ, riêng .footer-bottom (© + social
 * + QR/Alibaba) không có nền -> lòi ra một dải TRẮNG ở đáy trang. Khách muốn
 * gộp lên trên. Cho .footer-bottom dùng chung nền đỏ + đường kẻ mảnh phân
 * cách giống cách .footer-mid tách khỏi .footer-top.
 *
 * Nội dung không phải sửa ảnh: icon social là SVG "đĩa trắng + glyph đỏ",
 * đặt trên nền đỏ thành huy hiệu trắng — đúng concept nút GO TO MAP ở trên.
 * 2 ảnh Alibaba/QR cũng là thẻ nền trắng sẵn nên nổi tốt trên đỏ.
 * Chỉ dòng "© All Right Reserved" là phải đổi (base để #4d4d4d -> chìm).
 */
.footer-bottom {
  background: var(--color-pri);
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, .3);
  padding-top: 3.2rem;
}
.footer-bottom .footer-cpr { color: rgba(255, 255, 255, .92); }

/* Icon social: 4 file SVG không đồng bộ — chỉ icon_fb.svg có circle fill="white",
   3 file còn lại circle trong suốt chỉ có stroke đỏ nên đặt lên nền đỏ là mất tăm.
   Vẽ đĩa trắng bằng CSS cho cả 4 (đường kính khớp đúng circle r=29.25 + stroke 1.5
   của SVG) -> đồng bộ, và cùng concept với nút GO TO MAP phía trên. */
.footer-bottom .footer-social_item > * {
  background: #fff;
  border-radius: 50%;
}

/* .footer-mid trước chừa 10rem dưới đáy vì bên dưới là dải trắng; nay liền một
   khối nên rút lại cho cân với padding của .footer-bottom, khỏi hụt hẫng. */
.footer-mid { padding-bottom: 5.4rem; }
@media (max-width: 991.98px) { .footer-mid { padding-bottom: 4rem; } }
@media (max-width: 575.98px) { .footer-mid { padding-bottom: 3.2rem; } }

/* =====================================================================
 *  Trang chủ — Top banner (hero) hiển thị FULL 1 trang (100vh)
 * ===================================================================== */
.hero-section,
.hero {
  aspect-ratio: auto !important;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
}

/* =====================================================================
 *  OUR SERVICES — 3 card dịch vụ RIÊNG (khác 9 ô categories), FULL-WIDTH
 *  Cả card là <a> click được; hover lift + zoom ảnh + mũi tên "Learn more"
 * ===================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.8rem;
  max-width: 121.6rem;   /* bằng các section khác -> hết hẹp */
  margin: 3.8rem auto 0;
  padding: 0 1.6rem;
  width: 100%;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 1.6rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
  border-color: var(--color-pri, #ed1c24);
}
.service-card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.service-card:hover .service-card__img img { transform: scale(1.06); }
.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  padding: 2.4rem 2.2rem 2.6rem;
}
.service-card__title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  transition: color .25s ease;
}
.service-card:hover .service-card__title { color: var(--color-pri, #ed1c24); }
.service-card__desc {
  margin: 0;
  flex: 1;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #666;
}
.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: .6rem;
  color: var(--color-pri, #ed1c24);
  font-weight: 600;
  font-size: 1.4rem;
}
.service-card__more img {
  width: 2rem;
  height: auto;
  transition: transform .3s ease;
}
.service-card:hover .service-card__more img { transform: translateX(4px); }

@media (max-width: 991px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (feedback 7/9): 3 card xếp dọc -> trang quá dài. Đổi sang CUỘN NGANG
   (scroll-snap, không cần JS/swiper), card rộng 82% để lộ mép card kế tiếp
   làm gợi ý vuốt; mô tả clamp 4 dòng cho các card cao bằng nhau. */
@media (max-width: 600px) {
  .service-grid {
    display: flex;
    grid-template-columns: none;
    gap: 1.6rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.6rem;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .25) transparent;
  }
  .service-grid::-webkit-scrollbar { height: 4px; }
  .service-grid::-webkit-scrollbar-track { background: rgba(0, 0, 0, .07); border-radius: 99px; }
  .service-grid::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .28); border-radius: 99px; }
  .service-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .service-card:hover { transform: none; }
  .service-card__body { padding: 1.8rem 1.6rem 2rem; }
  .service-card__title { font-size: 1.8rem; }
  .service-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
}



/* =====================================================================
 *  OUR BRANDS carousel — port từ about.html/about.css để dùng ở TRANG CHỦ
 *  (main slider + 2 sub 2 bên + thumb nav). JS: SwiperModule js-brand.
 * ===================================================================== */
    transform: translateY(0); }
  50% {
    transform: translateY(-20px); } }

.award {
  overflow: hidden; }
  .award__swiper {
    margin-top: 6rem; }
    .award__swiper .swiper {
      overflow: visible; }
    .award__swiper .swiper-slide {
      width: calc(100% / 3);
      transform: scale(0.85);
      transition: 0.4s ease;
      min-width: 24rem; }
      .award__swiper .swiper-slide-active {
        transform: scale(1); }
    @media screen and (max-width: 575.98px) {
      .award__swiper {
        margin-top: 4rem; } }
  .award__img {
    display: flex;
    align-items: center;
    justify-content: center; }
    .award__img img {
      width: 100%;
      height: auto; }

.brand {
  overflow: hidden;
  position: relative; }
  .brand::before {
    position: absolute;
    content: "";
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
    background-image: url("/template/assets/images/about/brand-bg.png"); }
  .brand__slider {
    width: 56%; }
    .brand__slider .brand__item {
      display: flex;
      align-items: center; }
      @media screen and (max-width: 575.98px) {
        .brand__slider .brand__item {
          row-gap: 3.2rem;
          flex-direction: column; } }
    @media screen and (max-width: 1199.98px) {
      .brand__slider {
        width: 65%; } }
    @media screen and (max-width: 1024.98px) {
      .brand__slider {
        width: 100%;
        padding: 0 1.6rem; } }
  .brand__item {
    display: flex;
    align-items: center; }
  .brand__img {
    width: 50%;
    display: flex;
    align-items: start;
    justify-content: start; }
    @media screen and (max-width: 1199.98px) {
      .brand__img {
        width: 40%; } }
    @media screen and (max-width: 575.98px) {
      .brand__img {
        width: 100%;
        justify-content: center;
        align-items: center; }
        .brand__img img {
          max-width: 30rem;
          height: auto; } }
  .brand__content {
    width: 50%;
    font-family: var(--font-sec); }
    .brand__content .mona-content {
      margin-top: 2.4rem;
      color: var(--color-black); }
    @media screen and (max-width: 1199.98px) {
      .brand__content {
        width: 60%; } }
    @media screen and (max-width: 575.98px) {
      .brand__content {
        width: 100%; } }
  .brand__wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 6rem; }
    @media screen and (max-width: 575.98px) {
      .brand__wrap {
        margin-top: 4rem; } }
  .brand__sub {
    width: 17%;
    display: flex;
    align-items: end;
    overflow: hidden; }
    .brand__sub .swiper-wrapper {
      align-items: end; }
    .brand__sub .swiper-slide {
      width: 100%;
      transition: 0.4s ease;
      opacity: 0 !important; }
      .brand__sub .swiper-slide-active {
        opacity: 1 !important; }
    .brand__sub.js-brandsup2 {
      width: 15%; }
      .brand__sub.js-brandsup2 .brand__img {
        justify-content: end; }
        .brand__sub.js-brandsup2 .brand__img img {
          max-width: 22.8rem; }
    .brand__sub .brand__img {
      width: 100%;
      flex-shrink: 0;
      cursor: pointer; }
      .brand__sub .brand__img img {
        width: 100%;
        max-width: 25.2rem;
        height: auto; }
    @media screen and (max-width: 1024.98px) {
      .brand__sub {
        display: none; } }
  .brand__thumb {
    margin-top: 10rem;
    width: 80%;
    margin-right: auto;
    margin-left: auto; }
    .brand__thumb .swiper {
      overflow: visible;
      max-width: max-content; }
      .brand__thumb .swiper::before {
        position: absolute;
        content: "";
        width: calc(100% - 9.4rem);
        height: 1px;
        background: #d9d9d9;
        top: 4.7rem;
        left: 50%;
        transform: translateX(-50%); }
    .brand__thumb .swiper-slide {
      width: fit-content; }
      .brand__thumb .swiper-slide-thumb-active .brand__img,
      .brand__thumb .swiper-slide-thumb-active .brand__content {
        opacity: 1; }
      .brand__thumb .swiper-slide-thumb-active .brand__item::after {
        display: none; }
      .brand__thumb .swiper-slide:first-child .brand__item::after {
        width: 50%;
        left: 50%; }
      .brand__thumb .swiper-slide:last-child .brand__item::after {
        width: 50%;
        left: 0; }
    .brand__thumb .brand__item {
      row-gap: 1.8rem;
      flex-direction: column;
      min-width: 9.4rem;
      position: relative; }
      .brand__thumb .brand__item::before {
        position: absolute;
        content: "";
        width: 1.2rem;
        height: 1.2rem;
        background: #d9d9d9;
        border-radius: 50%;
        top: 4.2rem; }
    .brand__thumb .brand__img {
      opacity: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background: var(--color-pri);
      width: 9.4rem;
      height: 9.4rem;
      border-radius: 50%;
      transition: 0.4s ease; }
      .brand__thumb .brand__img img {
        max-width: 4.8rem;
        height: auto; }
    .brand__thumb .brand__content {
      opacity: 0;
      width: 100%;
      padding: 1.2rem;
      border-radius: 0.8rem;
      background: var(--color-pri);
      position: relative;
      transition: 0.4s ease; }
      .brand__thumb .brand__content::before {
        top: -0.8rem;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        content: "";
        width: 1.6rem;
        height: 0.8rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url("/template/assets/images/about/arr1.svg"); }
      .brand__thumb .brand__content .tt-32 {
        font-size: 1.4rem;
        font-weight: 400;
        color: var(--color-white);
        text-align: center; }
    @media screen and (max-width: 1024.98px) {
      .brand__thumb {
        width: 100%;
        padding: 0 1.6rem; } }
    @media screen and (max-width: 575.98px) {
      .brand__thumb {
        display: none; } }

/* =====================================================================
 *  WHY CHOOSE US — dời miếng kiwi (decora--3) ra khỏi text
 * ===================================================================== */
/* Kiwi (decora--3) trước ở left:28% đè lên đoạn mô tả -> dời ra lề trái, xuống thấp.
   ĐÃ THAY: xem mục "WHY CHOOSE US — feedback 22/7" ở cuối file (lề trái lại chồng
   lên decora--4 nên dời tiếp sang góc dưới phải). Giữ rule cũ ở đây chỉ để tra cứu. */

/* =====================================================================
 *  HEADER MOBILE — panel nav nằm TRONG <header> (feedback 22/7)
 * =====================================================================
 * header.php đã chuyển .overlay-header + .header-mobile vào trong <header>.
 * Vấn đề: CSS gốc dùng `.header.is-active { transform: translateX(32rem) }`
 * để đẩy thanh header sang phải khi mở menu. Một phần tử có `transform`
 * trở thành containing block cho con `position: fixed` -> .header-mobile
 * (fixed) sẽ bị đẩy theo 32rem và tụt khỏi màn hình.
 * Cách xử lý: bỏ transform trên chính <header>, chuyển hiệu ứng đẩy sang
 * ruột thanh header (::before = viên nền trắng + .container) -> hiệu ứng
 * nhìn y hệt, mà panel fixed vẫn neo theo viewport.
 */
.header.is-active {
  transform: none; }

.header > .container {
  transition: transform ease 0.4s; }

.header.is-active > .container {
  transform: translateX(32rem); }

.header.is-active::before {
  transform: translateX(calc(-50% + 32rem)); }

/* =====================================================================
 *  HERO BANNER TRANG CHỦ — mobile không cắt ảnh (feedback 22/7)
 * =====================================================================
 * CSS gốc: .hero { aspect-ratio: 151.2/68.8; min-height: 30rem; } + object-fit:cover.
 * Trên điện thoại 390px, aspect-ratio cho ra 177px nhưng min-height ép lên 300px
 * -> khung 390x300 (1.3:1) trong khi ảnh 2:1 -> cover xén mất ~35% bề ngang.
 * Xử lý: dưới 768px bỏ min-height, khung chạy theo tỉ lệ ảnh THẬT do PHP truyền
 * vào --hero-ratio-mb (ảnh mobile đầu tiên, chưa có thì ảnh desktop đầu tiên).
 */
@media (max-width: 767.98px) {
  .hero {
    aspect-ratio: var(--hero-ratio-mb, 151.2/68.8);
    min-height: 0;
  }
}

/* <picture> phải chiếm trọn .hero__img, nếu không <img width:100%> sẽ bám theo
   bề rộng shrink-to-fit của thẻ picture (inline) và vỡ layout slider. */
.hero__slider .swiper-slide .hero__img picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* =====================================================================
 *  TRANG CHỦ · OUR PRODUCTS (9 ô danh mục) — feedback 22/7
 * =====================================================================
 * Base ở template/assets/css/home.css (.own__product ...). Đây là lớp override.
 *  1. Khoảng cách giữa các ô gần nhau hơn: --sp 5rem -> 2.4rem
 *     (--sp vừa là column-gap vừa nằm trong công thức width của slide,
 *      giảm gap => ô rộng ra => lon có thêm chỗ để to lên).
 *  2. Bỏ hiệu ứng cũ (hover thu nhỏ scale .95), thay bằng phóng to 20%.
 *  3. Ảnh lon to hơn: max-height 20rem -> 25rem.
 *  4. Điện thoại: thu nhỏ ô theo tỉ lệ (kèm slidesPerView trong SwiperModule.js).
 */

/* --- 1. Ô gần nhau hơn --- */
.own__product .swiper {
  --sp: 2.4rem;
}

/* --- 3. Lon to hơn + chừa chỗ cho hiệu ứng phóng to --- */
.own__product .swiper-slide .product__img {
  /* Base để align-items:start (lon dính mép trên). Đổi sang end + min-height:
     lon nằm sát tên danh mục, phần trống dồn lên trên làm chỗ cho zoom nở LÊN,
     nhờ vậy phóng to không đè chữ và không bị cắt. */
  align-items: end;
  min-height: 30rem;
}
.own__product .swiper-slide .product__img img {
  max-height: 25rem;
  transform-origin: center bottom;
}

/* --- 2. Hover: bỏ nghiêng, đổi thành phóng to 20% ---
   Hiệu ứng nghiêng đến từ mona-quickview.css:
       .product__item:hover .product__img img { transform: rotate(-30deg) scale(.9) !important }
   Rule đó cố ý áp toàn site cho CARD SẢN PHẨM (archive / danh mục / similar products),
   nhưng lọt sang cả 9 ô DANH MỤC ở trang chủ — vốn không phải card sản phẩm.
   Vì rule kia có !important nên override ở đây cũng phải !important. */
.own__product .swiper-slide .product__item:hover .product__img img {
  transform: scale(1.2) !important;
}
/* Thiết bị cảm ứng: bỏ hover (hover trên mobile hay bị "dính" sau khi chạm) */
@media (hover: none) {
  .own__product .swiper-slide .product__item:hover .product__img img {
    transform: none !important;
  }
}

/* --- 4. Thu nhỏ theo tỉ lệ ở tablet / điện thoại --- */
@media (max-width: 991.98px) {
  .own__product .swiper-slide .product__img { min-height: 22rem; }
  .own__product .swiper-slide .product__img img { max-height: 18rem; }
  .own__product .swiper-slide .product__item { padding: 2.4rem 0.4rem; }
}

@media (max-width: 575.98px) {
  .own__product .swiper-slide .product__img { min-height: 15rem; }
  .own__product .swiper-slide .product__img img { max-height: 12.5rem; }
  .own__product .swiper-slide .product__item { padding: 1.6rem 0.4rem; border-radius: 1.6rem; }
  .own__product .swiper-slide .product__label { font-size: 1.6rem; }
  .own__product .swiper-slide .product__desc { font-size: 1.2rem; }
}

/* =====================================================================
 *  TRANG CHỦ · WHY CHOOSE US — feedback 22/7
 * =====================================================================
 * 1. Bỏ accordion .us__list (đã xoá ở home-template.php) -> .us__pc là khối
 *    DUY NHẤT, phải hiển thị ở MỌI khổ màn hình (home.css đang display:none
 *    dưới 993px vì trước đó mobile dùng accordion).
 * 2. Di chuột vào dòng nào -> dòng đó đậm/sáng (JS ở TabModule.js bắn click).
 * 3. Tách 2 miếng hoa quả đang chồng lên nhau ở góc dưới trái.
 */

/* --- 1. Bố cục mobile (feedback 7/9): .us ở home.css là grid 2 cột, các con
       gán cứng grid-row (tt-desc:2, btn:3, us__pc:1/span 3). Dưới 993px grid
       rút còn 1 cột nhưng grid-row vẫn giữ -> tiêu đề / mô tả / nút CTA bị
       .us__pc phủ chồng lên nhau (lệch hẳn bố cục).
       Chuyển .us sang flex column ở mobile => grid-row bị vô hiệu, thứ tự
       hiển thị: tiêu đề -> mô tả -> danh sách lý do (chip) -> nội dung tab ->
       nút CTA (dùng order vì DOM đang là tt-sec, tt-desc, btn, us__pc). --- */
@media (max-width: 992px) {
  .us {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
  .us > .tt-sec,
  .us > .tt-desc,
  .us > .btn,
  .us__pc {
    grid-row: auto;
    grid-column: auto;
  }
  .us > .tt-sec { margin-bottom: 0; }
  .us > .tt-desc { max-width: 100%; }
  .us__pc {
    order: 2;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 2rem;
  }
  .us > .btn {
    order: 3;
    align-self: flex-start;
  }

  /* Danh sách lý do: xếp dọc 9 dòng quá dài -> đổi thành chip cuộn theo hàng */
  .us__pc .us__head {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.8rem;
    width: 100%;
    margin-top: 0;
    text-align: left;
  }
  .us__pc .us__head::before { display: none; }
  .us__pc .us__head .tabBtn {
    flex: 0 0 auto;
    padding: 0.8rem 1.6rem;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-sec);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.3;
    letter-spacing: -0.02rem;
    color: #fff;
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    transition: .3s ease;
  }
  .us__pc .us__head .tabBtn.is-active {
    background: #ffc85a;
    border-color: #ffc85a;
    color: #e2231a;
    font-weight: 800;
  }

  .us__pc .us__txt { display: block; width: 100%; }
  .us__pc .us__txt .tabPanel { display: none; }
  .us__pc .us__txt .tabPanel.is-open {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .us__pc .us__txt .mona-content { color: #fff; }
  .us__pc .us__txt .mona-content p { margin: 0; }
  .us__pc .us__txt .mona-content img {
    width: 100%;
    border-radius: 1.6rem;
  }
}
@media (max-width: 575.98px) {
  .us { gap: 1.6rem; }
  .us__pc .us__head { gap: 0.6rem; }
  .us__pc .us__head .tabBtn { font-size: 1.2rem; padding: 0.7rem 1.2rem; }
  .us > .btn { align-self: stretch; justify-content: center; }
}

/* --- 2. Nhấn mạnh dòng đang chọn (hover/active) ở desktop --- */
/* Feedback 7/9: nhãn lý do luôn IN HOA bất kể admin gõ thường/hoa ("Free sample"
   lệch hẳn so với các dòng còn lại). home.css chỉ set uppercase trong media
   >=993px nên để rule này ngoài media cho chắc ở mọi khổ màn hình. */
.us__pc .us__head .tabBtn { text-transform: uppercase; }
.us__pc .us__head .tabBtn:hover { opacity: 1; }
.us__pc .us__head .tabBtn.is-active { font-weight: 800; }

/* --- 3. decora--3 (miếng chanh nhỏ) đang chồng lên decora--4 (miếng cam lớn,
       left:2% bottom:6%) ở góc dưới trái -> dời sang góc dưới phải cho trống chỗ. */
.us .decora--3 {
  left: unset !important;
  right: 5% !important;
  bottom: 6% !important;
  top: unset !important;
}

/* =====================================================================
 *  ABOUT · cụm ảnh nhà máy + logo A&B (.sec-img) — feedback 22/7 → 12/8
 * =====================================================================
 * Lịch sử: ab.png cũ (3024x2012) có logo A&B chiếm ~85% bề ngang bức ảnh,
 * nên để width:100% thì logo phình ~1240px ("to quá"), mà bóp về container
 * thì hở 2 dải trắng 2 bên ("trống 2 bên"). Từng chữa tạm bằng max-width
 * 112rem + mask fade 2 mép.
 *
 * 12/8: khách gửi bản dựng lại của chính bức ảnh — khung rộng hơn, lùi xa
 * hơn, logo chỉ còn ~52% bề ngang, có thêm trời + nhà máy 2 bên, mép trên
 * và mép dưới tự fade trắng. Đây đúng là bản "fix triệt để" đã đề xuất, nên
 * bỏ hết mask/max-width, trả về tràn viền 100% như base CSS (about.css).
 * File: template/assets/images/about/ab.jpg (2400x1310, tỉ lệ 1.83:1).
 * Màn 1470px -> ảnh 1470x802, logo ~765px: vừa tràn viền, vừa không to.
 *
 * Feedback 14/8: base about.css kéo .mission lên -15rem để chữ nằm trên vùng
 * trắng ở đáy ảnh. Nhưng ảnh mới gần như KÍN NỘI DUNG tới đáy (quét pixel:
 * còn chi tiết tới ~97% chiều cao, chỉ ~3% cuối mới trắng hẳn) -> chữ MISSION
 * và ảnh VISION đè thẳng lên nhà máy. Hạ độ chồng về sát 0, chỉ chừa đúng
 * phần trắng để 2 cụm vẫn dính liền mạch chứ không hở khoảng trống.
 */
.about-page .sec-img + .mission { margin-top: -1rem; }
@media (max-width: 767.98px) {
  .about-page .sec-img + .mission { margin-top: 0; }
}

/* =====================================================================
 *  BLOG / EVENT — bo góc thumbnail đồng bộ với trang chủ (feedback 22/7)
 * =====================================================================
 * Trang chủ: .blog__img a { border-radius: 2.4rem }.
 * Trang Blog/Event: card Featured (.blog__img a) đã bo sẵn 2.4rem, nhưng
 * lưới bài (.article-img) chỉ có overflow:hidden, KHÔNG bo góc -> lệch concept.
 * Bo cho .article-img ở mọi nơi dùng card bài viết (blog, event, category,
 * tag, search, bài liên quan) để thống nhất.
 */
/* Feedback 7/9: bo góc mỗi .article-img (ảnh) trong khi .article-item (card
   trắng, có box-shadow) vẫn vuông góc -> lộ 4 góc trắng thừa quanh ảnh: 2 góc
   trên là góc card, 2 góc dưới là nền card lòi ra chỗ ảnh bo vào.
   Sửa: bo góc CHÍNH CARD + overflow hidden, ảnh chỉ bo 2 góc TRÊN cho khớp mép
   card, 2 góc dưới để vuông vì nó dính liền phần nội dung trắng bên dưới. */
.article-item {
  background: #fff;
  border-radius: 2.4rem;
  overflow: hidden;
}
.article-img {
  border-radius: 2.4rem 2.4rem 0 0;
}

/* Card Featured ở trang Blog/Event là <div class="blog__img"><img> (KHÔNG có <a>
   bọc như ngoài trang chủ) nên rule gốc .blog__img a{border-radius} không ăn
   -> ảnh vuông góc. Bo trực tiếp trên wrapper. */
.blog__img {
  border-radius: 2.4rem;
  overflow: hidden;
}
.blog__img > img {
  border-radius: inherit;
}

@media (max-width: 767.98px) {
  .article-item { border-radius: 1.6rem; }
  .article-img { border-radius: 1.6rem 1.6rem 0 0; }
  .blog__img { border-radius: 1.6rem; }
}

/* =====================================================================
 *  DANH MỤC SP (có con) — tách H2 khỏi khối slide (feedback 22/7)
 * =====================================================================
 * Trước: <div class="product__list"> bọc CẢ .product__content (h2 + mô tả + nút)
 * lẫn .product__slider -> đọc code thì H2 của danh mục con nằm trong "danh sách
 * sản phẩm". Nay wrapper hàng ngang đổi tên .product__row, .product__content là
 * <header>. Port lại toàn bộ style của .product__list (product.css) sang .product__row.
 */
.product .product__row {
  --width: 28.5%;
  --col-gap: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 4rem;
  column-gap: var(--col-gap);
}
@media (min-width: 1241px) { .product .product__row { margin-left: 3%; } }
@media (max-width: 1240px) { .product .product__row { margin-left: 4%; } }
@media (max-width: 991.98px) { .product .product__row { --width: 32.5%; margin-left: 0; } }

/* =====================================================================
 *  CHI TIẾT SP — slider ảnh nhiều hình (feedback 22/7)
 * =====================================================================
 * 2 nút mũi tên nằm TRONG khung ảnh, sát mép trái/phải, canh giữa theo chiều dọc.
 * (Markup: .good__slider-nav đặt bên trong .swiper — xem product-image.php.)
 * .good__slider gốc là flex ROW chỉ chứa .swiper; nay có thêm pagination nên
 * chuyển sang cột + align-items:stretch, nếu để 'start' thì .swiper co theo nội
 * dung = tổng bề rộng mọi slide (~9600px) và vỡ layout.
 */
.good__slider--multi {
  flex-direction: column;
  align-items: stretch;
}
.good__slider--multi .swiper {
  position: relative;
  width: 100%;
  min-width: 0;
}

.good__slider .good__slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.2rem;
  z-index: 3;
  pointer-events: none;
}
.good__slider .good__slider-nav .prev,
.good__slider .good__slider-nav .next {
  pointer-events: auto;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, .92);
  cursor: pointer;
}
.good__slider .good__slider-nav .prev img,
.good__slider .good__slider-nav .next img {
  width: 1.8rem;
  height: 1.8rem;
}

.good__slider--multi .good__slider-pagination {
  justify-content: center;
  margin-top: 1.6rem;
}

@media (max-width: 767.98px) {
  /* productdt.css ẩn .swiper-navigation dưới 768px — ở đây vẫn cần nút bấm */
  .good__slider .good__slider-nav { display: flex; padding: 0 .6rem; }
  .good__slider .good__slider-nav .prev,
  .good__slider .good__slider-nav .next { width: 3.6rem; height: 3.6rem; }
  .good__slider .good__slider-nav .prev img,
  .good__slider .good__slider-nav .next img { width: 1.5rem; height: 1.5rem; }
}

/* =====================================================================
 *  CHI TIẾT SP — swatch Flavour: bỏ hiệu ứng "phình to" khi chọn
 * =====================================================================
 * productdt.css (bản FE gốc) đổi width/height của swatch đang chọn từ
 * 5.6rem -> 7.2rem. Đổi kích thước THẬT nên cả hàng bị reflow, các swatch
 * bên cạnh nhảy chỗ -> nhìn giật. Giữ nguyên kích thước, chỉ nhấn mạnh
 * bằng vòng đỏ + opacity như cũ.
 */
.p-productdt.woocommerce .product form.cart .variations td ul[aria-label="Flavour"] li.selected,
.woo-variation-swatches .variable-items-wrapper ul[aria-label="Flavour"] li.selected,
ul[aria-label="Flavour"] li.variable-item.selected {
  width: 5.6rem !important;
  height: 5.6rem !important;
  /* Khai báo lại phần nhấn mạnh cho chắc, không phụ thuộc rule gốc */
  opacity: 1 !important;
  box-shadow: 0 0 0 3px var(--color-pri, #ed1c24) !important;
}

/* =====================================================================
 *  CHI TIẾT SP — swatch KHÔNG chọn được: phải nhìn ra ngay
 * =====================================================================
 * Feedback 4/9: "một số cái click có active một số cái thì không, nếu có
 * hết hàng hay lỗi thì cũng để status rõ chút".
 * Plugin woo-variation-swatches gắn sẵn 2 class nhưng mặc định chỉ làm mờ
 * rất nhẹ, nhìn gần như y hệt ô bấm được:
 *   .disabled  = tổ hợp vị + size đó không có biến thể
 *   .no-stock  = có biến thể nhưng hết hàng
 * Cho nó xám + dấu × nhỏ ở giữa + con trỏ cấm để khỏi bấm hoài không hiểu vì sao.
 */
.p-productdt .variable-items-wrapper li.variable-item.disabled,
.p-productdt .variable-items-wrapper li.variable-item.no-stock {
  position: relative;
  opacity: .45 !important;
  filter: grayscale(1);
  cursor: not-allowed !important;
  box-shadow: none !important;
}
/* Dấu × nhỏ đè giữa ô — gọn, không bị cắt kể cả khi swatch bo tròn overflow:hidden */
.p-productdt .variable-items-wrapper li.variable-item.disabled::after,
.p-productdt .variable-items-wrapper li.variable-item.no-stock::after {
  content: "\00d7";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 400;
  color: #8a8a8a;
  pointer-events: none;
}
/* Hover vào thì hiện lý do (plugin đã gắn sẵn data-wvstooltip*) */
.p-productdt .variable-items-wrapper li.variable-item.disabled:hover,
.p-productdt .variable-items-wrapper li.variable-item.no-stock:hover {
  opacity: .45 !important;
}

/* =====================================================================
 *  VỀ CHÚNG TÔI · SCROLL CUE — "Scroll down to explore"
 * =====================================================================
 * Feedback 22/7: làm hiệu ứng chuyển động lên xuống như tandobeverage.com,
 * nhưng thay mũi tên bằng vector LON NƯỚC chồng lên cụm text.
 *
 * Markup: partials/global/banner.php (chỉ render ở template Về chúng tôi)
 *   <a class="scroll-cue" href="#about-sapo">
 *     <span class="scroll-cue__can"><svg/></span>
 *     <span class="scroll-cue__text">Scroll down to explore</span>
 *   </a>
 *
 * Lon absolute + z-index cao hơn text -> "chồng lên"; keyframes chỉ dịch
 * translateY nên không reflow. Đáy banner là gradient trắng (.banner__img::after)
 * nên chữ dùng màu đỏ thương hiệu cho đủ tương phản.
 */
.banner .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  z-index: 2;
  transform: translateX(-50%);
  display: block;
  padding-top: 6rem;        /* chừa chỗ cho lon phía trên cụm text */
  text-align: center;
  text-decoration: none;
  line-height: 1;
  color: var(--color-pri, #ed1c24);   /* lon dùng currentColor -> đổi màu ở đây */
  transition: opacity .3s ease;
}
.banner .scroll-cue:hover {
  opacity: .85;
}

.banner .scroll-cue__can {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;               /* trên cụm text */
  width: 3.6rem;            /* svg 244x416 -> cao ~6.1rem */
  margin-left: -1.8rem;
  pointer-events: none;
  animation: monaScrollCanBob 2s ease-in-out infinite;
}
.banner .scroll-cue__can svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Biến thể khi A&B upload icon riêng (Cài đặt Theme > Scroll down): khung rộng hơn
   và fit theo chiều cao để ảnh tỉ lệ nào cũng cân, không bị bóp méo. */
.banner .scroll-cue__can--img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 6rem;
  height: 6.1rem;
  margin-left: -3rem;
}
.banner .scroll-cue__can img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.banner .scroll-cue__text {
  position: relative;
  z-index: 0;
  display: block;
  font-family: var(--font-sec, inherit);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}

/* Lon rơi xuống đè lên đầu chữ rồi nhấc lên — biên độ nhỏ để chữ vẫn đọc được */
@keyframes monaScrollCanBob {
  0%, 100% { transform: translateY(-.5rem); }
  50%      { transform: translateY(1.2rem); }
}

@media (max-width: 767.98px) {
  .banner .scroll-cue {
    bottom: 1.4rem;
    padding-top: 4.8rem;
  }
  .banner .scroll-cue__can {
    width: 2.8rem;
    margin-left: -1.4rem;
  }
  .banner .scroll-cue__can--img {
    width: 4.6rem;
    height: 4.8rem;
    margin-left: -2.3rem;
  }
  .banner .scroll-cue__text {
    font-size: 1.1rem;
    letter-spacing: .12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner .scroll-cue__can { animation: none; }
}

/* =====================================================================
 *  TRANG CHỦ · ABOUT US — dời cụm lon/chai sang trái cho cân giữa
 * =====================================================================
 * Feedback 27/6 (nhắc lại 11/8): cụm chai Watermelon + lon Mango dính sát mép
 * phải, bị cắt và lệch hẳn khỏi khoảng trống bên phải cột chữ.
 * CSS gốc (template/assets/css/home.css): từ 993px .intro__img là
 * position:absolute; right:0; width:75%; justify-content:end -> ảnh luôn ép về
 * mép phải của .intro__wrap.
 * Xử lý: từ 1250px (khi .intro__wrap đã dùng container căn giữa) cho khung ảnh
 * bắt đầu đúng chỗ cột chữ kết thúc (53.2rem = max-width của .tt-sec/.mona-content)
 * và kéo tới mép phải, rồi justify-content:center -> ảnh nằm CHÍNH GIỮA khoảng
 * trống còn lại, tự đúng ở mọi bề rộng màn hình. Dịch cả khung (không dùng
 * transform/padding) để các decora nước/lá bên trong đi theo, giữ nguyên bố cục.
 * Dưới 1250px giữ nguyên như cũ vì cột chữ đã sát ảnh, dời thêm sẽ đè lên chữ.
 */
@media screen and (min-width: 1250px) {
  .intro__img {
    left: 53.2rem;
    right: 0;
    width: auto;
    justify-content: center;
  }
}

/* =====================================================================
 *  CHI TIẾT SP — cụm đầu trang gọn trong 1 màn + Flavour thu nhỏ (feedback 9/9)
 * =====================================================================
 * 1. Flavour: 16 vị x swatch 5.6rem + gap 2rem = 7 ô/hàng -> 3 dòng, cụm trải
 *    rộng gần hết cột phải. Khách muốn "thu lại 1 cụm nhỏ, gần nhau hơn, 2 dòng"
 *    -> grid 8 cột x 4rem, gap 1rem (tổng bề ngang 39rem) => đúng 2 dòng.
 *    Selector phải có `li.variable-item` mới thắng rule `li { width: 5.6rem
 *    !important }` của productdt.css (cùng !important thì rule cụ thể hơn thắng).
 * 2. Tên SP + ảnh + thông tin bên phải: gom lại vừa 1 màn (đo trên viewport
 *    1440x723: đáy nút CONTACT US từ 978px -> ~720px).
 *    Chỉ áp desktop (>=992px), mobile giữ nguyên nhịp cũ.
 */
.p-productdt.woocommerce .product form.cart .variations td ul[aria-label="Flavour"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, 4rem);
  justify-content: start;
  gap: 1rem;
  max-width: 39rem;
}
@media (min-width: 768px) {
  .p-productdt.woocommerce .product form.cart .variations td ul[aria-label="Flavour"] {
    grid-template-columns: repeat(8, 4rem);
  }
}
.p-productdt.woocommerce .product form.cart .variations td ul[aria-label="Flavour"] li.variable-item,
.p-productdt.woocommerce .product form.cart .variations td ul[aria-label="Flavour"] li.variable-item.selected {
  width: 4rem !important;
  height: 4rem !important;
}

@media (min-width: 992px) {
  .p-productdt .product.type-product { padding-top: 4rem; }
  .p-productdt .product-header { margin-bottom: 1.6rem; }
  .p-productdt .good__info .summary { row-gap: 2rem; }

  /* Ảnh lon: giới hạn chiều cao rồi canh giữa slide. MatchHeightModule tự tính
     lại min-height của .good__slider theo .good__can nên không cần sửa JS. */
  .p-productdt .good__slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .p-productdt .good__can > img {
    max-height: 40rem;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  .p-productdt .variations tr { margin-top: 1.6rem; }
  .p-productdt .variations th { padding-bottom: 1rem; }
  .p-productdt .single_variation_wrap { margin-top: 1.6rem; }
  .p-productdt.woocommerce .product form.cart .variations td ul[aria-label="Available sizes"] { gap: 1.6rem; }
}
@media (min-width: 1201px) {
  .p-productdt .product_title { font-size: 4rem; }
}