/* ==========================================================================
   Romar - Trang chi tiết sản phẩm (PDP)
   Custom CSS riêng cho san-pham-chi-tiet.html — mọi class dùng prefix "pdp-"
   Dữ liệu màu / font / khoảng cách lấy từ Figma (file dt5I7wF6S9aoBL4810OvMM, node 95:1119)
   ========================================================================== */

:root{
  --pdp-teal-900: #005d6f;   /* Romar Colour heading, đường viền chip */
  --pdp-teal-800: #0e6678;   /* rating text, star fill */
  --pdp-teal-700: #0c5260;   /* giá, thông tin phụ */
  --pdp-teal-band: #b0d3cc;  /* nền dải review */
  --pdp-gold: #ebac01;       /* avatar review */
  --pdp-ink: #111111;
  --pdp-white: #ffffff;
  --pdp-border: #dfe7e8;
}

.pdp-body{
  font-family: "Anuphan", "Segoe UI", Arial, sans-serif;
  color: var(--pdp-ink);
  background: #fff;
}

/* ---------- Header / navbar ---------- */
.pdp-topbar{
  background: #fff;
  border-bottom: 1px solid var(--pdp-border);
}
.pdp-logo img{ height: 56px; width: auto; }
.pdp-nav .nav-link{
  color: var(--pdp-teal-900);
  font-weight: 600;
  font-size: .95rem;
  padding: .5rem .9rem;
}
.pdp-nav .nav-link:hover{ color: var(--pdp-teal-800); }
.pdp-icon-btn{
  color: var(--pdp-teal-900);
  font-size: 1.25rem;
  padding: .25rem .5rem;
  border: none;
  background: transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.pdp-icon-btn:hover{ color: var(--pdp-teal-800); }

/* ---------- Khung trang: nội dung 1200px ở 1440px (Figma 95:1119: x 120 -> 1320) ---------- */
.pdp-container{
  width: 100%;
  max-width: 1224px;          /* 1200 + 2 x 12px padding gutter Bootstrap */
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 992px){
  .pdp-container{ padding: 0 12px; }
}
.pdp-main{ padding-top: 24px; padding-bottom: 64px; }
@media (min-width: 992px){
  .pdp-main{ padding-top: 84px; padding-bottom: 107px; }   /* header 108 -> ảnh 192; tab kết thúc -> dải review 107px */
}
/* Gỡ float/width 48% + margin mặc định của woocommerce-layout.css cho cột
   .summary - layout 2 cột do lưới Bootstrap (.row/.col-lg-6) đảm nhận. */
.woocommerce .pdp-main div.product div.summary{
  float: none;
  width: 100%;
  margin-bottom: 0;
}

/* ---------- Bố cục (single-product.php .pdp-layout) ----------
   Desktop: 2 cột. Trái = khung ảnh BÁM THEO khi cuộn (sticky) + "Thường mua kèm
   với" dồn xuống đáy cột; phải = thông tin + tab mô tả cuộn bình thường. Cột trái
   cao bằng cột phải -> khung ảnh đi theo tới khi gặp khối mua kèm (= hết cột
   phải) thì dừng. Dưới 992px: 2 cột "tan" ra, xếp ảnh -> thông tin -> mua kèm -> tab. */
.pdp-layout{ display: flex; flex-direction: column; }
.pdp-col-left,
.pdp-col-right,
.pdp-gallery-area{ display: contents; }
.pdp-gallery-wrap{ order: 1; }
.pdp-layout .summary{ order: 2; margin-top: 24px; }
.pdp-fbt-wrap{ order: 3; margin-top: 40px; }
.pdp-tabs-wrap{ order: 4; margin-top: 24px; }
@media (min-width: 992px){
  .pdp-layout{ flex-direction: row; align-items: stretch; gap: 24px; }
  .pdp-col-left,
  .pdp-col-right{ display: flex; flex-direction: column; flex: 0 0 calc(50% - 12px); min-width: 0; }
  .pdp-layout .summary{ margin-top: 0; }
  /* Cả cột trái (khung ảnh + "Thường mua kèm với" ngay dưới) BÁM THEO cùng nhau
     khi cuộn; dừng khi hết chiều cao cột phải (thông tin + tab mô tả). */
  .pdp-gallery-area{ display: block; }
  .pdp-col-left{
    position: sticky;
    top: 24px;                  /* header desktop không cố định */
    align-self: flex-start;
  }
  body.admin-bar .pdp-col-left{ top: 56px; }   /* thanh admin WordPress 32px */
  /* mua kèm cách ảnh 46px (Figma 681 -> 727) */
  .pdp-fbt-wrap{ margin-top: 46px; padding-top: 0; }
  .pdp-tabs-wrap{ margin-top: 46px; }
  /* Figma: chữ tab thấp hơn tiêu đề "Thường mua kèm" 13px, gạch chân y 777,
     đoạn mô tả y 790 (padding thay margin để không bị gộp với margin 46px) */
  .pdp-tabs-wrap{ padding-top: 13px; }
  .pdp-tabs-wrap .pdp-tabs{ margin-top: 0; }
}

/* ---------- Gallery: thumbs 78px + gap 24 + ảnh chính 486px ---------- */
.pdp-gallery{
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.pdp-gallery-main{
  flex: 1 1 auto;
  margin-top: 3px;              /* ảnh chính y 195, thumbnail đầu y 192 */
  min-width: 0;
  aspect-ratio: 1/1;
  border-radius: 5px;
  overflow: hidden;
  background: #f5f7f7;
}
.pdp-gallery-main img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
/* Hover phóng nhẹ ảnh chính - CÙNG mức scale/thời gian với thẻ sản phẩm (style.css). */
.pdp-gallery-main:hover img{ transform: scale(1.045); }
@media (prefers-reduced-motion: reduce){
  .pdp-gallery-main img{ transition: none; }
  .pdp-gallery-main:hover img{ transform: none; }
}
.pdp-thumb-list{
  flex: 0 0 78px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 486px;
  overflow-y: auto;
  scrollbar-width: none;
}
.pdp-thumb-list::-webkit-scrollbar{ display: none; }
.pdp-thumb{
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 5px;
  overflow: hidden;
  border: 0;
  background: #f5f7f7;
  padding: 0;
  cursor: pointer;
  transition: opacity .15s ease;
}
.pdp-thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover{ opacity: .85; }
.pdp-thumb:focus-visible{ outline: 2px solid var(--pdp-teal-900); outline-offset: 2px; }

@media (max-width: 767.98px){
  .pdp-gallery{ flex-direction: column-reverse; gap: 12px; }
  .pdp-gallery-main{ width: 100%; }
  .pdp-thumb-list{ flex: 0 0 auto; flex-direction: row; gap: 12px; max-height: none; max-width: 100%; overflow-x: auto; }
  .pdp-thumb{ width: 64px; height: 64px; }
}

/* ---------- Cột thông tin ---------- */
.summary p{ margin: 0; }
.pdp-category{
  color: var(--pdp-teal-900);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: -2px;
}
.pdp-title{
  color: #005e71;
  font-weight: 600;
  font-size: 40px;
  line-height: 36px;
  margin: 0 0 8px;
}
.pdp-rating{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  color: var(--pdp-teal-800);
}
.pdp-rating-stars{ display: inline-flex; gap: 2px; line-height: 1; }
.pdp-rating-stars .bi{ color: #ebac01; font-size: 13.5px; }
.pdp-rating-text{ font-size: 12px; font-weight: 600; line-height: 14px; }

.pdp-spec{ margin-bottom: 19px; }
.pdp-spec-label{
  color: var(--pdp-teal-900);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 2px !important;
}
.pdp-chip{
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-width: 204px;
  min-height: 57px;
  border: 1px solid #005c6f;
  border-radius: 5px;
  padding: 6px 12px;
  background: #fff;
}
.pdp-chip-swatch{
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 5px;
  border: 2px solid var(--pdp-teal-800);
  background: linear-gradient(180deg, #d794bd 0%, #ebc55a 100%);
}
.pdp-chip-label{
  color: #005c6f;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  max-width: 132px;
}

.pdp-usage{
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: -1px;
  margin-bottom: 50px;          /* thẻ (537) -> dòng giá (587); gộp margin với .pdp-spec */
}
.pdp-usage-card{
  width: 205px;
  height: 129px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #005c6f;
  border-radius: 5px;
  text-align: center;
  color: #005c6f;
}
.pdp-usage-big{ font-weight: 600; font-size: 32px; line-height: 20px; padding-top: 6px; }
.pdp-usage-sub{ font-weight: 400; font-size: 16px; line-height: 20px; }
@media (max-width: 575.98px){
  .pdp-usage{ gap: 16px; }
  .pdp-usage-card{ width: calc(50% - 8px); height: 112px; }
  .pdp-usage-big{ font-size: 26px; }
}

.pdp-price-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pdp-price-label,
.pdp-price{
  color: var(--pdp-teal-700);
  font-weight: 700;
  font-size: 21px;
  line-height: 38px;
}
.pdp-price .woocommerce-Price-amount{ font-weight: 700; }

.woocommerce .pdp-main div.product form.pdp-cart-form{ margin: 0; }
.pdp-btn-cart{
  display: block;
  width: 100%;
  height: 50px;
  background: #005c6f;
  color: #fff;
  border: 0;
  border-radius: 25px;
  font-weight: 600;
  font-size: 24px;
  line-height: 50px;
  padding: 0 24px;
  text-align: center;
  transition: background-color .15s ease;
}
.pdp-btn-cart:hover{ background: var(--pdp-teal-800); color: #fff; }
.pdp-btn-cart:focus-visible{ outline: 2px solid var(--pdp-teal-900); outline-offset: 3px; }
@media (max-width: 575.98px){
  .pdp-title{ font-size: 30px; line-height: 34px; }
  .pdp-btn-cart{ font-size: 20px; }
}

/* ---------- Thường mua kèm với: tiêu đề trái, danh sách cuộn dọc (x 528) ---------- */
.pdp-fbt{
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.pdp-fbt-title{
  flex: 1 1 auto;
  margin: 0;
  color: var(--pdp-teal-700);
  font-weight: 500;
  font-size: 21px;
  line-height: 38px;
}
.pdp-fbt-list{
  flex: 0 0 180px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-height: 548px;            /* ngang chiều cao khối tab bên phải -> cuộn dọc */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pdp-teal-800) transparent;
}
.pdp-fbt-thumb{
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 5px;
  background: #d9d9d9;
  margin-bottom: 1px;
}
/* Ảnh card trọn vẹn (không cắt vuông) theo Figma 199:2677 / 462:2198: rộng 68/78
   = 87%, lệch trái 7/78 = 9%, sát mép trên - chai/hộp cao gần hết khung. */
.pdp-fbt-thumb img{
  display: block;
  width: 87%;
  height: auto;
  margin: 1px 0 0 9%;
  border-radius: 5px;
}
.pdp-fbt-badge{
  position: absolute;
  right: -2px;
  bottom: -3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pdp-teal-800);
  border: 1px solid #fff;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-fbt-name,
.pdp-fbt-price{
  margin: 0;
  color: var(--pdp-teal-800);
  font-size: 16px;
  font-weight: 400;
}
.pdp-fbt-name{ line-height: 21px; padding-top: 5px; }   /* Figma: dòng tên cao 31px - giữ khoảng trên, tên dài xuống dòng không bị thưa */
.pdp-fbt-price{ line-height: 21px; }
.pdp-fbt-link{
  display: inline-block;
  margin-top: 2px;
  color: #fe8170;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp-fbt-link:hover{ color: #e8604d; }
@media (max-width: 991.98px){
  .pdp-fbt{ flex-direction: column; gap: 12px; }
  .pdp-fbt-list{ flex: 0 0 auto; flex-direction: row; gap: 24px; max-height: none; max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .pdp-fbt-item{ flex: 0 0 160px; }
}

/* ---------- Tabs: tổng quan / thành phần / chứng nhận ---------- */
.pdp-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 38px;
  margin: 13px 0 11px;
  padding: 0;
  list-style: none;
}
.pdp-tabs .nav-link{
  color: #000;
  font-weight: 400;
  font-size: 21px;
  line-height: 36px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
.pdp-tabs .nav-link:hover{ color: var(--pdp-teal-700); }
.pdp-tabs .nav-link.active{
  color: #000;
  font-weight: 500;
  border-bottom-color: var(--pdp-teal-700);
}
.pdp-overview-text{
  max-width: 545px;
  font-size: 20px;
  line-height: 29px;
  color: #000;
}
.pdp-overview-text p{ margin: 0; }
.pdp-overview-text strong,
.pdp-overview-text b{ font-weight: 600; }
@media (max-width: 575.98px){
  .pdp-tabs{ flex-wrap: nowrap; gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .pdp-tabs::-webkit-scrollbar{ display: none; }
  .pdp-tabs .nav-link{ font-size: 16px; white-space: nowrap; }
  .pdp-overview-text{ font-size: 17px; line-height: 26px; }
}

/* ---------- Dải review (nền #b0d3cc, cao 346px) + hình tròn vàng trang trí ---------- */
.pdp-review-band{
  position: relative;
  isolation: isolate;
  padding: 20px 0 23px;         /* ảnh 303 + 20 + 23 = dải cao 346px */
  margin-bottom: 80px;
}
.pdp-review-band::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pdp-teal-band);
}
/* Hình tròn 132px #ebac01 nằm DƯỚI dải nền (chỉ lộ nửa dưới), cách mép phải 54px */
.pdp-review-band::after{
  content: "";
  position: absolute;
  z-index: -2;
  right: 54px;
  bottom: -66px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: #ebac01;
}
.pdp-review-summary{
  width: 327px;
  max-width: 100%;
  margin: 51px 0 0 83px;        /* sao ở y 1453, x 222 (cột bắt đầu x 120) */
  text-align: center;
}
.pdp-review-stars{
  display: flex;
  justify-content: center;
  gap: 9.7px;
  margin-bottom: 25px;
}
.pdp-review-stars svg{
  width: 48.6px;
  height: 48.6px;
  fill: #f4ca58;
  stroke: var(--pdp-teal-800);
  stroke-width: .6;
  stroke-linejoin: round;
}
.pdp-review-title{
  margin: 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 29px;
  color: #000;
}
.pdp-review-photo{
  width: 100%;
  aspect-ratio: 282/303;
  overflow: hidden;
  background: #eee;
}
.pdp-review-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991.98px){
  .pdp-review-band{ padding: 32px 0; }
  .pdp-review-summary{ margin: 0 auto; }
  .pdp-review-band::after{ width: 88px; height: 88px; bottom: -44px; right: 16px; }
}

/* ---------- Footer ---------- */
.pdp-footer{
  background: var(--pdp-teal-900);
  color: #fff;
}
.pdp-footer h6{
  color:#fff;
  font-weight:700;
  margin-bottom:1rem;
}
.pdp-footer a{
  color: #d7e9ea;
  text-decoration:none;
  display:block;
  margin-bottom:.5rem;
  font-size:.95rem;
}
.pdp-footer a:hover{ color:#fff; text-decoration:underline; }
.pdp-footer .pdp-footer-small{
  font-size:.85rem;
  color:#cfe3e4;
}
.pdp-footer .pdp-newsletter input{
  border-radius: 25px 0 0 25px;
  border:none;
  padding:.6rem 1rem;
}
.pdp-footer .pdp-newsletter button{
  border-radius: 0 25px 25px 0;
  background:#fff;
  color: var(--pdp-teal-900);
  border:none;
  font-weight:600;
  padding:.6rem 1.2rem;
}
.pdp-social-icon{
  width:38px;
  height:38px;
  border-radius:50%;
  background: rgba(255,255,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  margin-right:.6rem;
}


/* ---------- Bảng Grouped Product (add-to-cart/grouped.php) - san-pham-chi-tiet.html
   bản tĩnh gốc CHƯA từng có ca Grouped Product để tham chiếu markup pixel-perfect
   (xem docs/ke-hoach-chuyen-wordpress.md Phase 4/6) - chỉ chỉnh nhẹ font/màu cho
   khớp phần còn lại của trang, giữ nguyên bảng chuẩn Woo. ---------- */
.pdp-grouped-table{ width:100%; }
.pdp-grouped-table label{ font-weight:600; color: var(--pdp-teal-900); }
.pdp-grouped-table td{ padding:.6rem .5rem; vertical-align:middle; }

/* ---------- Desktop: tên sản phẩm "Thường mua kèm" 1 dòng như Figma (199:2658) -
   cột danh sách rộng tới sát cột tab (x 528 -> 732). ---------- */
@media (min-width: 992px){
  /* Ẩn thanh cuộn (Figma không có) - trước đây vạch thanh cuộn nằm sát chữ cột phải */
  .pdp-fbt-list{ flex-basis: 204px; margin-right: -24px; scrollbar-width: none; }
  .pdp-fbt-list::-webkit-scrollbar{ display: none; }
  .pdp-fbt-name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   MOBILE (<768px) - Figma 462:2156 (khung 402px). Mọi số đo lấy từ Figma,
   y tính theo site (Figma y - 70 thanh trạng thái).
   ========================================================================== */
@media (max-width: 767.98px){
  /* Lề 24px; ảnh bắt đầu y 107 (header 71 + 36) */
  .pdp-container{ padding: 0 24px; }
  .pdp-main{ padding-top: 36px; padding-bottom: 13px; }
  .pdp-layout .summary{ margin-top: 18px; }

  /* Gallery: ảnh lớn 354x354 bo 5, 5 ảnh nhỏ 55x55 cách 20px, dưới ảnh lớn 18px */
  .pdp-gallery{ flex-direction: column-reverse; gap: 18px; }
  .pdp-gallery-main{ margin-top: 0; }
  .pdp-thumb-list{ gap: 20px; }
  .pdp-thumb{ width: 55px; height: 55px; }

  /* Tên + đánh giá (462:2177): không có dòng danh mục; tên 40/36 */
  .pdp-category{ display: none; }
  .pdp-title,
  .pdp-title.mb-2{ font-size: 40px; line-height: 36px; margin-top: 0; margin-bottom: 1px !important; }   /* chân chữ -> sao 8px (Figma 462:2178/2180) */
  .pdp-rating{ margin-bottom: 0; }

  /* Loại sản phẩm (462:2186-2187) */
  .pdp-spec{ margin-bottom: 0; }
  .pdp-spec-label{ margin: 5px 0 4px !important; }
  /* Số lần sử dụng (462:2188-2190): nhãn 12.8px, 2 ô 164x103 cách 26px = 0.8 x desktop */
  .pdp-spec + .pdp-spec .pdp-spec-label{ font-size: 12.8px; line-height: 22px; margin: 5px 0 0 !important; }
  .pdp-usage{ gap: 26px; margin: 0; }
  .pdp-usage-card{ width: calc(50% - 13px); height: 103px; gap: 6px; border-radius: 4px; }
  .pdp-usage-big{ font-size: 25.6px; line-height: 16px; padding-top: 5px; }
  .pdp-usage-sub{ font-size: 12.8px; line-height: 16px; }

  /* Giá hôm nay: (462:2192-2193) 12.7px đậm, sát trên nút */
  .pdp-price-row{ margin: 3px 0 0; }
  .pdp-price-label,
  .pdp-price{ font-size: 12.7px; line-height: 23px; }
  .pdp-price-label::after{ content: ":"; }
  /* Nút thêm giỏ hàng (462:2191): 354x30, bo 15, chữ 14.4px */
  .pdp-btn-cart{ height: 30px; border-radius: 15px; font-size: 14.4px; line-height: 30px; }

  /* Hàng 2: "Thường mua kèm với" cách nút 10px, tab ngay bên dưới */
  .pdp-fbt-wrap{ margin-top: 10px; }
  .pdp-tabs-wrap{ margin-top: 4px; }
  .pdp-fbt{ flex-direction: row; gap: 12px; align-items: flex-start; }
  .pdp-fbt-title{ flex: 0 0 auto; font-size: 12px; line-height: 22px; }
  /* Sản phẩm mua kèm nhỏ, canh phải (x 302); nhiều sản phẩm thì vuốt ngang */
  .pdp-fbt-list{ flex: 1 1 auto; flex-direction: row; gap: 12px; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 0; }
  .pdp-fbt-list > :first-child{ margin-left: auto; }
  .pdp-fbt-item{ flex: 0 0 82px; }
  .pdp-fbt-thumb{ width: 45px; height: 45px; border-radius: 3px; margin-bottom: 0; }
  .pdp-fbt-thumb img{ border-radius: 3px; }
  .pdp-fbt-badge{ width: 14px; height: 14px; right: -1px; bottom: -2px; font-size: 9.28px; border-width: 0; }
  .pdp-fbt-name,
  .pdp-fbt-price{ font-size: 9.28px; line-height: 12px; font-weight: 600; }
  .pdp-fbt-name{ padding-top: 2px; }
  .pdp-fbt-link{ margin-top: 0; font-size: 9.28px; line-height: 13.9px; text-underline-offset: 2px; }

  /* Tab + mô tả (462:2194): tab 12.6px cách 18px, mô tả 12/17.4 */
  .pdp-tabs{ flex-wrap: nowrap; gap: 18px; margin: 0 0 8px; }
  .pdp-tabs .nav-link{ font-size: 12.6px; line-height: 22.8px; }
  .pdp-overview-text{ font-size: 12px; line-height: 17.4px; max-width: 328px; }

  /* Dải review (462:2208-2221): 2 ảnh 170x182 ở TRÊN, 5 sao 28px + dòng chữ ở dưới */
  .pdp-review-band{ padding: 26px 0 35px; }
  .pdp-review-band > .pdp-container > .row{ --bs-gutter-y: 21px; }
  .pdp-review-band > .pdp-container > .row > :first-child{ order: 2; }
  .pdp-review-band .row .row{ --bs-gutter-x: 14px; --bs-gutter-y: 0; }
  .pdp-review-photo{ aspect-ratio: 170/182; }
  .pdp-review-summary{ margin: 0 auto; }
  .pdp-review-stars{ gap: 5px; margin-bottom: 6px; }
  .pdp-review-stars svg{ width: 28px; height: 28px; }
  .pdp-review-title{ font-size: 11.3px; line-height: 16.4px; }
  /* Chấm tròn vàng 77px cách phải 24px, tâm ở mép dưới dải */
  .pdp-review-band::after{ width: 77px; height: 77px; right: 24px; bottom: -38.5px; }
}

/* Ảnh review (Figma 396:2850 / 396:2852): cắt theo đúng khung Figma */
.pdp-review-band .row .col-6:first-child .pdp-review-photo img{ object-position: 50% 33%; }
.pdp-review-band .row .col-6:last-child .pdp-review-photo img{ object-position: 50% 57.5%; }

/* Tên -> dòng sao desktop (Figma 98:1386 / 98:1637): chữ tên từ y 217, chân chữ -> sao 17px */
@media (min-width: 768px){
  .pdp-title.mb-2{ margin-top: -2px; margin-bottom: 10px !important; }
}

/* ==========================================================================
   MOBILE - tinh chỉnh theo đo nét chữ trên ảnh Figma 462:2156 (2026-09-30)
   ========================================================================== */
@media (max-width: 767.98px){
  /* Tên: nét chữ bắt đầu x25 (lệch trái 2px), chân chữ -> sao 6px */
  .pdp-title.mb-2{ margin-left: -2px; margin-bottom: 3px !important; }
  .pdp-rating{ margin-left: -1px; }
  /* sao -> "Loại sản phẩm:" 11px, nhãn -> ô 6px */
  .pdp-spec-label{ margin: 7px 0 2px !important; }
  /* ô loại -> "Số lần sử dụng:" 10px, nhãn -> 2 ô 4px */
  .pdp-spec + .pdp-spec .pdp-spec-label{ margin: 6px 0 -1px !important; }
  /* 2 ô -> "Giá hôm nay:" 10px; giá lùi vào 5px (Figma x316-374) */
  .pdp-price-row{ margin-top: 4px; }
  .pdp-price{ margin-right: 5px; }
  /* nút -> "Thường mua kèm với" 18px */
  .pdp-fbt-wrap{ margin-top: 12px; }
  /* sản phẩm mua kèm bắt đầu x302; chữ cách ảnh như Figma; "Chi tiết" sát dòng giá */
  .pdp-fbt-item{ flex-basis: 76px; }
  .pdp-fbt-name{ padding-top: 4px; }
  .pdp-fbt-link{ display: table; }
  .pdp-fbt-badge{ border: 1px solid #fff; }
  /* Tab + mô tả: lùi vào x37 như Figma; gạch chân 1.2px sát chữ 3px; gạch -> mô tả 16px */
  .pdp-tabs-wrap{ padding-left: 13px; margin-top: 9px; }   /* gạch "Chi tiết" -> chữ tab 14px */
  .pdp-tabs .nav-link{ line-height: 19px; padding-bottom: 0; border-bottom-width: 1.2px; }
  .pdp-tabs{ margin-bottom: 12px; gap: 25px; }   /* chữ tab tại x37 / 182 / 272 như Figma */
  /* Review: sao -> dòng chữ 19px (Figma 1601 -> 1620), dải vẫn cao 314 */
  .pdp-review-stars{ margin-bottom: 14px; }
  .pdp-review-band{ padding-bottom: 27px; margin-bottom: 78px; }
}

/* Thứ tự ảnh nhỏ riêng cho mobile (field thumbs_mobile_order) */
@media (max-width: 767.98px){
  .pdp-thumb{ order: var(--pdp-m-order, 0); }
}

/* Sản phẩm chưa có thư viện ảnh (chỉ có ảnh card dọc 714x837, nền trong suốt):
   hiện trọn ảnh trên nền xám như card, không cắt mép cho vừa khung vuông. */
.pdp-gallery--fallback .pdp-gallery-main,
.pdp-gallery--fallback .pdp-thumb{ background:#E8E8E8; }
.pdp-gallery--fallback .pdp-gallery-main img,
.pdp-gallery--fallback .pdp-thumb img{ object-fit:contain; }
.pdp-gallery--fallback .pdp-gallery-main:hover img{ transform:none; }

/* Tên sản phẩm dài xuống 2 dòng: dòng sao không được chạm chữ (chữ 40px trong
   dòng cao 36px nên nét chữ tràn khỏi dòng ~4px) */
@media (max-width:767.98px){
  .pdp-title.mb-2{ margin-bottom:12px !important; }
}

/* "Thường mua kèm với": tiêu đề ở trên, sản phẩm xếp ngang tối đa 3 sản phẩm/hàng */
.pdp-fbt{ display: block; }
.pdp-fbt-title{ margin: 0 0 16px; }
.pdp-fbt-list,
.pdp-sticky .pdp-fbt-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-height: none;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.pdp-fbt-list > :first-child{ margin-left: 0; }
.pdp-fbt-item{ flex: none; min-width: 0; }
.pdp-fbt-name{ white-space: normal; overflow: visible; }
@media (max-width: 767.98px){
  .pdp-fbt-title{ margin-bottom: 8px; }
  .pdp-fbt-list{ gap: 12px; }
}

/* ==========================================================================
   DESKTOP - đo lại theo nét chữ Figma 95:1119 (2026-10-01)
   ========================================================================== */
@media (min-width: 992px){
  /* Danh mục -> tên: thêm 8px (dấu tiếng Việt trên chữ hoa như "Ế" cao ~8px,
     tên mẫu Figma "Romar Colour" không dấu nên trông thoáng). Đẩy DANH MỤC lên
     thay vì đẩy tên xuống - tên + mọi khối bên dưới giữ đúng vị trí Figma (nút
     "Thêm vào giỏ hàng" vẫn thẳng đáy ảnh chính). */
  /* .summary .pdp-category: thắng `.summary p{margin:0}`. Lề trên -8 gộp ra ngoài
     .summary (đẩy danh mục lên), lề dưới 8 gộp với -2 của tên => tên giữ y 214. */
  .summary .pdp-category{ margin-top: -8px; margin-bottom: 8px; }

  /* 5 ảnh nhỏ: Figma y 192 / 294 / 399 / 501 / 606 (ảnh cuối kết thúc 684)
     -> khoảng cách 25.5px; mua kèm vẫn bắt đầu y 727 (46 - 3px). */
  .pdp-thumb-list{ gap: 25.5px; max-height: 492px; }
  .pdp-fbt-wrap{ margin-top: 43px; }

  /* Ô "Số lần sử dụng": dòng phụ cao lên 2px (Figma 480.6). */
  .pdp-usage-sub{ position: relative; top: -2px; }   /* dịch riêng, không làm ô căn giữa lại */

  /* Tab: chữ thấp xuống 3px (Figma 748), gạch chân giữ y 777. */
  .pdp-tabs .nav-link{ line-height: 30px; padding-top: 6px; }
  /* Gạch chân -> dòng đầu mô tả 23px (Figma 777 -> 800). */
  .pdp-tabs{ margin-bottom: 20px; }
}