/*Main deal*/

@charset "utf-8";
/* CSS Document */

/*Hỗ trợ*/

.support{width:923px; height:25px; padding:10px;background:#FFF; border-radius:7px;box-shadow:0 0 7px #666;behavior:url(PIE.htc);position:relative;z-index:99; margin:0px 7px 10px; position:relative;}
.support h4{width:20%; float:left; font-size:20px; color:#930;}
.support .nick{margin-top:20px;}
.support .mobile{font-size:20px; margin:0 10px; font-weight:bold; text-shadow:#F00; color:#F00;}

/*Hỗ trợ*/

/*hotdeal*/
.hotdeal{width:923px; height:250px; padding:10px;background:#FFF;border-radius:7px;box-shadow:0 0 7px #666;behavior:url(PIE.htc);position:relative;z-index:99;float:left;margin:0px 7px 10px; position:relative;}
.hotdeal .line{background:url(i3/line.png) repeat-x left top; height:2px; width:60%; float:left; margin-top:10px;}
.hotdeal .phuongthuc{float:left; width:15%; font-weight:bold; text-align:center; line-height:200%; margin-top:20px;}
.hotdeal .lienketanh{margin-bottom:5px; float:left; border:#CCC solid 1px; margin-right:15px;}
.hotdeal .tieude{margin:3px 5px 7px; text-align:justify; font-size:18px;}
.hotdeal .gia{float:left; text-align:center; line-height:220%; margin-top:20px;}
.hotdeal .gia .giaban{font-size:30px; font-weight:bold; color:#03F; text-shadow:#036;}
.hotdeal .gia .giagoc{font-size:12px; text-decoration:line-through;}
.hotdeal .damua{float:left; width:15%; text-align:center; border-left:#999 dotted 1px; border-right:#999 dotted 1px;}
.hotdeal .tietkiem{width:20%; text-align:center; float:left;}
.hotdeal .damua, .hotdeal .tietkiem, .hotdeal .thoigianconlai{font-size:14px; line-height:200%;}
.hotdeal .damua span, .hotdeal .tietkiem span{font-size:22px; font-weight:bold;}
.hotdeal .thoigianconlai{text-align:center;}
.hotdeal .thoigianconlai div{font-size:20px; font-weight:bold;}
.hotdeal .xem a{float:right; margin-right:50px; margin-top:20px; padding-top:10px;font-weight:bold;color:#FFF;border-radius:4px;width:130px;height:45px;text-align:center;display:block;text-decoration:none;font-size:24px;background:#74c6ff;background-image:-webkit-gradient(linear, left top, left bottom, from(#2e98e4),
to(#237ab8));background-image:-webkit-linear-gradient(top, #2e98e4, #237ab8);background-image:-moz-linear-gradient(top, #2e98e4, #237ab8);background-image:-ms-linear-gradient(top, #2e98e4, #237ab8);background-image:-o-linear-gradient(top, #2e98e4, #237ab8);background-image:linear-gradient(top, #2e98e4, #237ab8);filter:progid:DXImageTransform.Microsoft.gradient (startColorStr='#2e98e4', EndColorStr = '#237ab8');}
.hotdeal .xem a:hover{background:#F60;background-image:-webkit-gradient(linear, left top, left bottom, from(#F60),
to(#b86d23));background-image:-webkit-linear-gradient(top, #F60, #b86d23);background-image:-moz-linear-gradient(top, #F60, #b86d23);background-image:-ms-linear-gradient(top, #F60, #b86d23);background-image:-o-linear-gradient(top, #F60, #b86d23);background-image:linear-gradient(top, #F60, #b86d23);filter:progid:DXImageTransform.Microsoft.gradient (startColorStr='#F60', EndColorStr = '#b86d23');}
/*list deal*/


/*list deal*/
.deal51{width:285px; height:410px; padding:10px;background:#FFF;border-radius:7px;box-shadow:0 0 7px #666;behavior:url(PIE.htc);position:relative;z-index:99;float:left;margin:5px 7px 10px;position:relative;}
.deal51 .line{background:url(i3/line.png) repeat-x left top; height:2px; width:95%; margin:0 auto;}
.deal51 .phuongthuc{float:right; width:auto; font-weight:bold; margin:5px;}
.deal51 .lienketanh{margin-bottom:5px;}
.deal51 .lienketanh img{border:#CCC solid 1px; border-radius:2px;}
.deal51 .tieude{margin:3px 5px; text-align:justify;}
.deal51 .gia{width:50%; float:left; text-align:center;}
.deal51 .gia, .deal51 .damua, .deal51 .tietkiem{line-height:180%; margin:7px 0;}
.deal51 .gia .giaban{font-size:18px; font-weight:bold; color:#03F;}
.deal51 .gia .giagoc{font-size:12px; text-decoration:line-through;}
.deal51 .damua{float:left; width:20%; text-align:center; border-left:#999 dotted 1px; border-right:#999 dotted 1px;}
.deal51 .tietkiem{text-align:center;}
.deal51 .damua, .deal51 .tietkiem{font-size:14px;}
.deal51 .damua span, .deal51 .tietkiem span{font-size:16px; font-weight:bold;}
.deal51 .thoigianconlai{float:left; width:50%; text-align:center; margin-top:10px; line-height:180%;}
.deal51 .thoigianconlai div{font-size:18px; font-weight:bold;}
.deal51 .xem a{}
.deal51 .xem a{float:right;margin-top:15px; margin-right:10px; padding-top:10px;font-weight:bold;color:#FFF;border-radius:4px;width:120px;height:30px;text-align:center;display:block;text-decoration:none;font-size:18px;background:#74c6ff;background-image:-webkit-gradient(linear, left top, left bottom, from(#2e98e4),
to(#237ab8));background-image:-webkit-linear-gradient(top, #2e98e4, #237ab8);background-image:-moz-linear-gradient(top, #2e98e4, #237ab8);background-image:-ms-linear-gradient(top, #2e98e4, #237ab8);background-image:-o-linear-gradient(top, #2e98e4, #237ab8);background-image:linear-gradient(top, #2e98e4, #237ab8);filter:progid:DXImageTransform.Microsoft.gradient (startColorStr
=
'#2e98e4', EndColorStr = '#237ab8');}
.deal51 .xem a:hover{background:#F60;background-image:-webkit-gradient(linear, left top, left bottom, from(#F60),
to(#b86d23));background-image:-webkit-linear-gradient(top, #F60, #b86d23);background-image:-moz-linear-gradient(top, #F60, #b86d23);background-image:-ms-linear-gradient(top, #F60, #b86d23);background-image:-o-linear-gradient(top, #F60, #b86d23);background-image:linear-gradient(top, #F60, #b86d23);filter:progid:DXImageTransform.Microsoft.gradient (startColorStr
=
'#F60', EndColorStr = '#b86d23');}

/*Main deals*/

/*Deal detail*/

.fea_cond{margin:20px 0 0 0;}
.fea_cond p{margin-bottom:7px;}
.fea_cond .c_content,.fea_cond .f_content{padding:5px 3px 5px 7px;line-height:18px;}
.fea_cond .feature{float: left;width: 48%;}
.fea_cond .condition{float:right; width:50%; border-left:1px solid #ccc;}
.feature h2.head_title,.condition h2.head_title{margin:0 0 5px 10px;color:#0074B4;font-size:16px;}

/* ============================================================
   T18 — CATEGORY PAGE LAYOUT
   Scope: .cate-page-layout — không ảnh hưởng homepage T13–T17
   ============================================================ */

/* ── 1. Product grid: CSS Grid 4 cols (override Bootstrap float) ── */
.cate-page-layout .products-grid.product-grid-new {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Bootstrap .row::before/::after trở thành grid cell — phải tắt */
.cate-page-layout .products-grid.product-grid-new::before,
.cate-page-layout .products-grid.product-grid-new::after {
  display: none !important;
  content: none !important;
}

/* Reset Bootstrap col widths + float trên từng card */
.cate-page-layout .products-grid.product-grid-new > .respl-item {
  width: auto !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── 2. Page title h1 ── */
.cate-page-layout .page-title.category-title {
  margin: 0 0 14px !important;
  padding: 0 0 0 14px !important;
  border-left: 4px solid #C62828 !important;
  background: transparent !important;
}

.cate-page-layout .page-title.category-title h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* ── 3. Category description ── */
.cate-page-layout .category-description {
  font-size: 13px;
  color: #616161;
  line-height: 1.65;
  margin-bottom: 16px;
}

/* ── 4. Toolbar / Sort bar ── */
.cate-page-layout .toolbar {
  background: #F7F7F7;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 16px;
}

.cate-page-layout .toolbar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Ẩn Grid/List switch — không cần trong design mới */
.cate-page-layout .view-mode-wrap {
  display: none;
}

/* Ẩn nút Desc cũ */
.cate-page-layout .btn-sortby {
  display: none !important;
}

.cate-page-layout .sort-by {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cate-page-layout .sort-by label {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0;
  white-space: nowrap;
}

/* Đưa pagination về bên phải */
.cate-page-layout .pagination-wrap {
  margin-left: auto;
}

.cate-page-layout .pagination .pages {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cate-page-layout .pagination .pages label {
  font-size: 12px;
  color: #616161;
  margin: 0;
}

.cate-page-layout .pagination .pages ol {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

.cate-page-layout .pagination .pages ol li a,
.cate-page-layout .pagination .pages ol li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  border: 1px solid #E0E0E0;
  background: #fff;
  transition: background .15s, color .15s, border-color .15s;
}

.cate-page-layout .pagination .pages ol li a:hover {
  background: #FFEBEE;
  border-color: #C62828;
  color: #C62828;
  text-decoration: none;
}

.cate-page-layout .pagination .pages ol li.current a,
.cate-page-layout .pagination .pages ol li a.active {
  background: #C62828;
  border-color: #C62828;
  color: #fff;
}

/* ── 5. Sidebar ── */
.cate-page-layout #yt_left {
  padding-right: 12px !important;
}

.cate-page-layout #layered-navigation {
  margin-bottom: 20px;
}

/* Tiêu đề sidebar: nền đỏ như title T14 */
.cate-page-layout .block-layered-nav .block-title {
  background: #C62828;
  padding: 9px 14px;
  border-radius: 4px 4px 0 0;
  margin: 0 !important;
}

.cate-page-layout .block-layered-nav .block-title strong,
.cate-page-layout .block-layered-nav .block-title strong span {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* Nội dung sidebar: border quanh list */
.cate-page-layout .block-layered-nav .block-content {
  border: 1px solid #E0E0E0;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
  padding: 0;
}

.cate-page-layout .block-layered-nav #narrow-by-list {
  margin: 0;
  padding: 0;
}

.cate-page-layout .block-layered-nav .filter-wrapp.Category {
  margin: 0;
}

.cate-page-layout .block-layered-nav .filter-wrapp .scroll-1 {
  margin: 0;
  padding: 0;
}

.cate-page-layout .block-layered-nav .filter-wrapp ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cate-page-layout .block-layered-nav .filter-wrapp ol li {
  border-bottom: 1px solid #F5F5F5;
}

.cate-page-layout .block-layered-nav .filter-wrapp ol li:last-child {
  border-bottom: none;
}

.cate-page-layout .block-layered-nav .filter-wrapp ol li a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  transition: background .15s, color .15s;
  line-height: 1.4;
}

.cate-page-layout .block-layered-nav .filter-wrapp ol li a:hover {
  background: #FFEBEE;
  color: #C62828;
  text-decoration: none;
}

.cate-page-layout .block-layered-nav .filter-wrapp ol li.active a {
  color: #C62828;
  font-weight: 700;
  background: #FFEBEE;
  border-left: 3px solid #C62828;
  padding-left: 11px;
}

/* ── 6. Bottom toolbar ── */
.cate-page-layout .toolbar-bottom .toolbar {
  margin-top: 20px;
  margin-bottom: 0;
}

/* ── 7. Responsive: tablet 768–991px → 3 cols ── */
@media (max-width: 991px) and (min-width: 768px) {
  .cate-page-layout .products-grid.product-grid-new {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ── 8. Responsive: mobile < 768px ── */
@media (max-width: 767px) {
  /* Sidebar có hidden-xs (Bootstrap) → đã ẩn tự động, không cần override */

  .cate-page-layout #yt_main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cate-page-layout .products-grid.product-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cate-page-layout .toolbar {
    padding: 6px 10px;
  }

  .cate-page-layout .toolbar-inner {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cate-page-layout .pagination-wrap {
    margin-left: 0;
    width: 100%;
  }

  .cate-page-layout .page-title.category-title h1 {
    font-size: 16px !important;
  }
}

/* ── End T18 ── */

/* ============================================================
   T19 — CATEGORY SIDEBAR ACCORDION
   Scope: #layered-navigation .cate-accordion
   Dùng ID selector để thắng theme-french.css
   ============================================================ */

/* Wrapper */
#layered-navigation .cate-accordion {
  margin: 0;
  padding: 0;
}

/* Mỗi accordion item = một danh mục cha */
#layered-navigation .cate-accordion-item {
  border-bottom: 1px solid #ECECEC;
}

#layered-navigation .cate-accordion-item:last-child {
  border-bottom: none;
}

/* Ẩn mặc định (backup CSS — inline style="display:none" trong HTML là primary) */
#layered-navigation .cate-children {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: #F9F9F9;
  border-top: 1px solid #ECECEC;
}

/* ── Hàng danh mục cha: tên + arrow ── */
#layered-navigation .cate-parent-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background .15s;
}

#layered-navigation .cate-parent-row:hover {
  background: #FFF5F5;
}

#layered-navigation .cate-accordion-item.is-open > .cate-parent-row {
  background: #FFF5F5;
}

/* Tên danh mục cha: HOA, đậm, gọn */
#layered-navigation .cate-parent-link {
  display: block !important;
  flex: 1 1 auto !important;
  padding: 9px 6px 9px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  text-transform: uppercase !important;
  letter-spacing: .3px !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: color .15s !important;
}

#layered-navigation .cate-parent-link:hover {
  color: #C62828 !important;
  text-decoration: none !important;
}

/* Danh mục cha đang active (xem trang root) */
#layered-navigation .cate-parent-link.is-active {
  color: #C62828 !important;
  border-left: 3px solid #C62828;
  padding-left: 11px !important;
}

/* ── Arrow toggle ── */
#layered-navigation .cate-arrow {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  color: #BDBDBD !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform .25s ease, color .15s !important;
}

#layered-navigation .cate-arrow:hover {
  color: #C62828 !important;
}

#layered-navigation .cate-arrow.is-open {
  transform: rotate(180deg) !important;
  color: #C62828 !important;
}

/* ── Danh mục con: JS set display:block via .show() ── */
#layered-navigation .cate-children li {
  border-bottom: 1px solid #F2F2F2 !important;
  list-style: none !important;
}

#layered-navigation .cate-children li:last-child {
  border-bottom: none !important;
}

#layered-navigation .cate-children li a {
  display: block !important;
  padding: 7px 12px 7px 24px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #555 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  position: relative !important;
  transition: background .12s, color .12s !important;
}

/* Dấu gạch nhỏ prefix */
#layered-navigation .cate-children li a::before {
  content: '·' !important;
  position: absolute !important;
  left: 14px !important;
  color: #BDBDBD !important;
  font-size: 14px !important;
  line-height: 1 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#layered-navigation .cate-children li a:hover {
  background: #FFEBEE !important;
  color: #C62828 !important;
  text-decoration: none !important;
}

#layered-navigation .cate-children li a:hover::before {
  color: #C62828 !important;
}

/* Active: danh mục con đang xem */
#layered-navigation .cate-children li.is-active > a {
  color: #C62828 !important;
  font-weight: 600 !important;
  background: #FFEBEE !important;
  border-left: 3px solid #C62828 !important;
  padding-left: 21px !important;
}

#layered-navigation .cate-children li.is-active > a::before {
  color: #C62828 !important;
}

/* ── End T19 ── */

/* ============================================================
   T19 REFINE — Sidebar header full-width + border cleanup
   Dùng #yt_left scope (specificity cao hơn theme-french.css)
   ============================================================ */

/* 1. HEADER FULL-WIDTH: override theme tab shape
      Theme: strong { display: inline-block } + ::before chevron + negative margins
      Fix: block display, transparent bg, no pseudo-element, no negative margins
*/
#yt_left .block-layered-nav .block-title {
  background: #C62828 !important;
  border-bottom: none !important;
  margin: 0 !important;          /* Reset theme's -5px -19px negative margins */
  padding: 10px 14px !important;
  border-radius: 4px 4px 0 0 !important;
  position: static !important;
  box-sizing: border-box !important;
}

#yt_left .block-layered-nav .block-title strong {
  display: block !important;     /* Override inline-block → full width */
  background: transparent !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  line-height: 1.3 !important;
  padding: 0 !important;
  position: static !important;
}

/* Xóa mũi tên chéo CSS của theme */
#yt_left .block-layered-nav .block-title strong::before {
  display: none !important;
  content: none !important;
}

/* Cũng override strong span nếu có wrapper */
#yt_left .block-layered-nav .block-title strong span {
  display: block !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background: transparent !important;
}

/* 2. BLOCK-CONTENT: reset theme's padding + giữ outer border gọn
      Theme: padding: 20px 0px (tạo khoảng trắng thừa)
*/
#yt_left .block-layered-nav .block-content {
  padding: 0 !important;
  border: 1px solid #E0E0E0 !important;
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* 3. BORDER CLEANUP: chỉ giữ 1 hệ border
      - Outer frame: border trên .block-content (đã có ở trên)
      - Item separator: border-bottom trên .cate-accordion-item
      - Xóa các rule T18 flat-list không còn dùng (filter-wrapp ol li border)
*/

/* Đảm bảo accordion items không có double-border với outer frame */
#yt_left .cate-accordion-item:first-child {
  border-top: none !important;
}

/* 4. WRAPPER #layered-navigation: reset theme margin/padding nếu có */
#yt_left #layered-navigation .block {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── End T19 Refine ── */

/* ============================================================
   T20 — Category Sort Bar (2 native-select boxes + pagination)
   Toolbar outer: .t20-toolbar
   Flex row: .t20-toolbar-inner
   Each box: .t20-control-box (label + select)
   Pagination: .t20-pagination-wrap (margin-left: auto → right)
   ============================================================ */

/* Toolbar outer — inherits background/border/radius from T18 .cate-page-layout .toolbar */
.cate-page-layout .t20-toolbar {
  margin-bottom: 14px !important;
}

/* Flex row */
.cate-page-layout .t20-toolbar-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Control box: white card with border */
.cate-page-layout .t20-control-box {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  transition: border-color .15s !important;
}

.cate-page-layout .t20-control-box:focus-within {
  border-color: #C62828 !important;
}

/* Label inside box */
.cate-page-layout .t20-box-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  cursor: default !important;
}

/* Native select */
.cate-page-layout .t20-select {
  border: none !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  cursor: pointer !important;
  outline: none !important;
  padding: 2px 0 !important;
  min-width: 120px !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
}

.cate-page-layout .t20-select:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Pagination: push to right */
.cate-page-layout .t20-pagination-wrap {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}

.cate-page-layout .t20-pagination-wrap .pagination {
  margin: 0 !important;
}

.cate-page-layout .t20-pagination-wrap .pages {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Ẩn label "Page:" */
.cate-page-layout .t20-pagination-wrap .pages label {
  display: none !important;
}

.cate-page-layout .t20-pagination-wrap .pages ol {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Mobile: stack */
@media (max-width: 767px) {
  .cate-page-layout .t20-toolbar-inner {
    gap: 8px !important;
  }

  .cate-page-layout .t20-control-box {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
  }

  .cate-page-layout .t20-select {
    min-width: 0 !important;
    width: 100% !important;
  }

  .cate-page-layout .t20-pagination-wrap {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── End T20 ── */

/* ============================================================
   T23 — SEARCH RESULTS PAGE
   Scope: .search-page-wrapper / .search-main
   ============================================================ */

.search-page-wrapper {
  background: #F7F7F7;
  padding-bottom: 40px;
}

/* ── Layout: sidebar + main ── */
.search-page-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 24px 0 0;
}

/* ── Sidebar ── */
.search-sidebar {
  flex: 0 0 220px;
  min-width: 0;
  position: sticky;
  top: 80px;
}

.search-filter-block {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid #E0E0E0;
}

.search-filter-title {
  background: #C62828;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  letter-spacing: 0.3px;
}

.search-filter-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.search-filter-list li a {
  display: block;
  padding: 7px 14px;
  font-size: 13px;
  color: #424242;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.search-filter-list li a:hover,
.search-filter-list li.active a {
  background: #FFF3E0;
  color: #C62828;
}

.search-filter-list li.active a strong {
  font-weight: 700;
  color: #C62828;
}

/* ── Main area ── */
.search-main {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Toolbar: result count + sort ── */
.search-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  padding: 9px 14px;
  margin-bottom: 16px;
}

.search-result-count {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
}

.search-sort-box {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  padding: 4px 10px;
  background: #F7F7F7;
}

.search-sort-label {
  font-size: 12px;
  font-weight: 600;
  color: #616161;
  margin: 0;
  white-space: nowrap;
}

.search-sort-select {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  min-width: 130px;
  cursor: pointer;
  outline: none;
}

/* ── Product grid ── */
.search-main .products-grid.product-grid-new {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.search-main .products-grid.product-grid-new::before,
.search-main .products-grid.product-grid-new::after {
  display: none !important;
  content: none !important;
}

.search-main .products-grid.product-grid-new > .respl-item {
  width: auto !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Pagination — targets GenBasic() output ── */
.search-pagination {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* GenBasic() wraps output in <div class="divPager"><div>...</div></div> */
.search-pagination .divPager {
  display: flex;
  justify-content: center;
}

.search-pagination .divPager > div {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Hide the "Trang: " label */
.search-pagination .spText {
  display: none;
}

/* Shared style for all page buttons */
.search-pagination .btnNomarl,
.search-pagination .btnFirst,
.search-pagination .btnLast {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #424242;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0 10px;
}

.search-pagination .btnNomarl:hover,
.search-pagination .btnFirst:hover,
.search-pagination .btnLast:hover {
  background: #FFF3E0;
  border-color: #C62828;
  color: #C62828;
  text-decoration: none;
}

/* Active page — GenBasic() uses <span class="selected"> */
.search-pagination .selected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  border: 1px solid #C62828;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  background: #C62828;
  color: #fff;
  padding: 0 10px;
}

/* Prev arrow: btnFirst has empty content */
.search-pagination .btnFirst::before {
  content: '\2039';
  font-size: 20px;
  line-height: 1;
}

/* Next arrow: btnLast has empty content */
.search-pagination .btnLast::before {
  content: '\203A';
  font-size: 20px;
  line-height: 1;
}

/* Mobile: ensure buttons are tap-friendly */
@media (max-width: 767px) {
  .search-pagination .btnNomarl,
  .search-pagination .btnFirst,
  .search-pagination .btnLast,
  .search-pagination .selected {
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }
}

/* ── Empty state ── */
.search-empty-state {
  background: #fff;
  border-radius: 10px;
  padding: 60px 24px;
  text-align: center;
  border: 1px solid #E0E0E0;
}

.search-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  line-height: 1;
}

.search-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 8px;
}

.search-empty-desc {
  font-size: 14px;
  color: #757575;
  margin-bottom: 24px;
  line-height: 1.6;
}

.search-empty-btn {
  display: inline-block;
  background: #C62828;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}

.search-empty-btn:hover {
  background: #B71C1C;
  color: #fff;
  text-decoration: none;
}

/* ── Responsive ── */
@media (min-width: 768px) and (max-width: 991px) {
  .search-sidebar {
    flex: 0 0 180px;
  }

  .search-main .products-grid.product-grid-new {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .search-page-layout {
    display: block;
    padding: 12px 0 0;
  }

  .search-main .products-grid.product-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .search-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .search-sort-box {
    width: 100%;
  }

  .search-sort-select {
    min-width: 0;
    width: 100%;
  }
}

/* ── End T23 ── */

/* ============================================================
   T24 — PRODUCT DETAIL PAGE
   Scope: .pd-page-wrapper — không ảnh hưởng category/news/search
   ============================================================ */

/* ── 1. Page background ── */
.pd-page-wrapper {
  background: #F7F7F7;
}

/* ── 2. Main card: Gallery + Info ── */
.pd-page-wrapper .pd-main-card {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  margin: 20px 0 0;
  border: 1px solid #E0E0E0;
}

.pd-page-wrapper .pd-gallery-info-row {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* ── 3. Gallery ── */
.pd-page-wrapper .pd-gallery-col {
  float: none !important;
}

.pd-page-wrapper .pd-gallery-inner {
  display: flex !important;
  gap: 12px;
  align-items: flex-start;
}

/* Thumbnail strip */
.pd-page-wrapper .pd-thumb-col {
  flex: 0 0 88px;
  width: 88px !important;
  position: relative;
}

.pd-page-wrapper .pd-thumb-col .jCarouselLite {
  overflow: hidden;
}

.pd-page-wrapper .pd-thumb-col .jCarouselLite ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pd-page-wrapper .pd-thumb-col .jCarouselLite ul li {
  margin-bottom: 8px;
}

.pd-page-wrapper .pd-thumb-col .jCarouselLite ul li a img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
  border: 2px solid #E0E0E0 !important;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  transition: border-color 0.2s;
}

.pd-page-wrapper .pd-thumb-col .jCarouselLite ul li a.actived img,
.pd-page-wrapper .pd-thumb-col .jCarouselLite ul li.selected a img {
  border-color: #C62828 !important;
}

.pd-page-wrapper .pd-thumb-col .btn_thumb {
  display: block;
  text-align: center;
  cursor: pointer;
  color: #9E9E9E;
  font-size: 16px;
  padding: 4px 0;
  transition: color 0.15s;
}

.pd-page-wrapper .pd-thumb-col .btn_thumb:hover {
  color: #C62828;
}

/* Main image area */
.pd-page-wrapper .pd-main-img-col {
  flex: 1;
  min-width: 0;
  position: relative;
}

.pd-page-wrapper .pd-main-img-col .product-image-zoom {
  position: relative;
  border: 1px solid #E0E0E0;
  border-radius: 6px;
  overflow: hidden;
  background: #fafafa;
}

.pd-page-wrapper .pd-main-img-col #image {
  width: 100% !important;
  height: auto !important;
  max-height: 480px;
  object-fit: contain;
  display: block;
}

/* Sale badge on main image */
.pd-page-wrapper .sale-product.have-ico {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #C62828;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 10;
  pointer-events: none;
}

/* Zoom button */
.pd-page-wrapper .popup-btn a#yt_popup {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #616161;
  text-decoration: none;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  padding: 4px 10px;
  transition: color 0.15s, border-color 0.15s;
}

.pd-page-wrapper .popup-btn a#yt_popup:hover {
  color: #C62828;
  border-color: #C62828;
}

/* ── 4. Product Info column ── */
.pd-page-wrapper .pd-info-col {
  float: none !important;
  padding-left: 28px;
}

.pd-page-wrapper .pd-product-info {
  padding: 0;
}

/* Product name */
.pd-page-wrapper .pd-product-info .product-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  line-height: 1.35 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* Brand / category meta */
.pd-page-wrapper .pd-product-info .product-review p,
.pd-page-wrapper .pd-product-info .availability {
  font-size: 13px;
  color: #616161;
  margin: 4px 0;
}

.pd-page-wrapper .pd-product-info .product-review a,
.pd-page-wrapper .pd-product-info .pd-cates a {
  color: #C62828;
  text-decoration: none;
}

.pd-page-wrapper .pd-product-info .availability span {
  color: #2E7D32;
  font-weight: 600;
}

/* ── 5. Price box ── */
.pd-page-wrapper .pd-price-box {
  padding: 14px 0;
  border-top: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  margin: 12px 0;
}

.pd-page-wrapper .pd-price-box .old-price {
  margin: 0 0 4px;
}

.pd-page-wrapper .pd-price-box .old-price .price-label {
  font-size: 12px;
  color: #9E9E9E;
}

.pd-page-wrapper .pd-price-box .old-price .price {
  font-size: 14px !important;
  color: #9E9E9E !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

.pd-page-wrapper .pd-price-box .special-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pd-page-wrapper .pd-price-box .special-price .price-label {
  font-size: 13px;
  color: #616161;
}

.pd-page-wrapper .pd-price-box .special-price .price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #E53935 !important;
  line-height: 1 !important;
}

/* ── 6. Short description ── */
.pd-page-wrapper .pd-short-desc {
  font-size: 14px;
  color: #424242;
  line-height: 1.6;
  margin: 12px 0;
}

/* ── 7. Qty + CTA ── */
.pd-page-wrapper .pd-qty-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.pd-page-wrapper .pd-qty-row .qty-title span {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
  white-space: nowrap;
}

.pd-page-wrapper .pd-qty-row .quantity-box {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #BDBDBD;
  border-radius: 10px;
  overflow: hidden;
  height: 44px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: border-color 0.15s;
}

.pd-page-wrapper .pd-qty-row .quantity-box:focus-within {
  border-color: #C62828;
}

.pd-page-wrapper .pd-qty-row .quantity-controls {
  width: 44px !important;
  height: 44px !important;
  background: #F5F5F5 !important;
  background-image: none !important;
  border: none !important;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: #616161 !important;
  transition: background 0.15s, color 0.15s;
  outline: none;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
  /* override cartpro.css: text-indent: -9999em + position: absolute */
  text-indent: 0 !important;
  position: static !important;
  float: none !important;
  right: auto !important;
  bottom: auto !important;
}

.pd-page-wrapper .pd-qty-row .quantity-controls:hover {
  background: #C62828 !important;
  color: #fff !important;
}

.pd-page-wrapper .pd-qty-row .quantity-controls:active {
  background: #B71C1C !important;
  color: #fff !important;
}

.pd-page-wrapper .pd-qty-row .quantity-input {
  width: 54px !important;
  height: 44px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1.5px solid #BDBDBD !important;
  border-right: 1.5px solid #BDBDBD !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  background: #fff !important;
  outline: none;
  padding: 0 !important;
  box-sizing: border-box;
  -moz-appearance: textfield;
}

.pd-page-wrapper .pd-qty-row .quantity-input::-webkit-outer-spin-button,
.pd-page-wrapper .pd-qty-row .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* CTA row */
.pd-page-wrapper .pd-cta-row {
  margin-bottom: 0;
}

.pd-page-wrapper .pd-btn-buy,
.pd-page-wrapper .pd-btn-buy span,
.pd-page-wrapper .pd-btn-buy span span {
  display: block !important;
  width: 100% !important;
}

.pd-page-wrapper .pd-btn-buy {
  background: #C62828 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  height: 48px !important;
  line-height: 48px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.2s !important;
  letter-spacing: 0.5px;
}

.pd-page-wrapper .pd-btn-buy:hover {
  background: #B71C1C !important;
}

/* ── 8. Hotline box ── */
.pd-hotline-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFEBEE;
  border: 1px solid #FFCDD2;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 0 12px;
}

.pd-hotline-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.pd-hotline-label {
  font-size: 11px;
  color: #757575;
  margin-bottom: 2px;
}

.pd-hotline-num {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #C62828 !important;
  text-decoration: none !important;
  display: block;
  line-height: 1.2;
}

.pd-hotline-num:hover {
  color: #B71C1C !important;
}

/* ── 9. Social share ── */
.pd-page-wrapper .like-social {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #F0F0F0;
}

/* ── 10. Bottom section: Support sidebar + Tabs ── */
.pd-page-wrapper .pd-bottom-row {
  margin-top: 20px;
  overflow: hidden;
}

/* Support / Related sidebar */
.pd-page-wrapper .pd-support-col {
  padding-right: 16px;
}

.pd-page-wrapper .pd-support-col .block-left-products .block-title {
  background: #1A1A1A !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 6px 6px 0 0;
}

.pd-page-wrapper .pd-support-col .bs-item {
  padding: 8px 0;
  border-bottom: 1px solid #F0F0F0;
}

.pd-page-wrapper .pd-support-col .bs-image {
  width: 64px;
  flex-shrink: 0;
}

.pd-page-wrapper .pd-support-col .bs-image img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #E0E0E0;
}

.pd-page-wrapper .pd-support-col .bs-item-inner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pd-page-wrapper .pd-support-col .bs-title a {
  font-size: 13px;
  color: #212121;
  text-decoration: none;
  line-height: 1.4;
}

.pd-page-wrapper .pd-support-col .bs-title a:hover {
  color: #C62828;
}

.pd-page-wrapper .pd-support-col .bs-price .price {
  font-size: 13px;
  font-weight: 700;
  color: #E53935;
}

/* ── 11. Tabs ── */
.pd-page-wrapper .pd-tabs {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E0E0E0;
  padding: 0;
  overflow: hidden;
  margin-bottom: 20px;
}

.pd-page-wrapper .pd-tabs .resp-tabs-list {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 2px solid #E0E0E0 !important;
  background: #FAFAFA;
}

.pd-page-wrapper .pd-tabs .resp-tabs-list li {
  list-style: none !important;
  margin: 0 !important;
}

.pd-page-wrapper .pd-tabs .resp-tabs-list li a {
  display: block !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #616161 !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: color 0.15s, border-color 0.15s !important;
  white-space: nowrap;
}

.pd-page-wrapper .pd-tabs .resp-tabs-list li.active a,
.pd-page-wrapper .pd-tabs .resp-tabs-list li.resp-tab-active a {
  color: #fff !important;
  background: #C62828 !important;
  border-bottom-color: #C62828 !important;
  border-radius: 4px 4px 0 0;
}

.pd-page-wrapper .pd-tabs .resp-tabs-container {
  padding: 20px 24px !important;
}

.pd-page-wrapper .pd-tabs .tab-pane {
  display: none;
}

.pd-page-wrapper .pd-tabs .tab-pane.active,
.pd-page-wrapper .pd-tabs .tab-pane.in {
  display: block;
}

/* Tab content: product description */
.pd-page-wrapper .pd-tab-content {
  font-size: 14px;
  line-height: 1.75;
  color: #212121;
  word-break: break-word;
  overflow-wrap: break-word;
}

.pd-page-wrapper .pd-tab-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 4px;
  margin: 8px 0;
}

.pd-page-wrapper .pd-tab-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.pd-page-wrapper .pd-tab-content table td,
.pd-page-wrapper .pd-tab-content table th {
  padding: 8px 12px;
  border: 1px solid #E0E0E0;
}

.pd-page-wrapper .pd-tab-content table tr:nth-child(even) td {
  background: #F7F7F7;
}

/* ── 12. Upsell / "Có thể bạn thích" block ── */
.pd-page-wrapper .pd-upsell-wrap {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E8E8E8;
  padding: 16px 20px 20px;
  margin-top: 28px;
}

/* Title */
.pd-page-wrapper .pd-upsell-wrap .block-title-default {
  margin-bottom: 12px;
}
.pd-page-wrapper .pd-section-hd .h2title span {
  font-size: 17px;
  font-weight: 700;
  color: #1A1A1A;
  display: block;
  border-left: 4px solid #C62828;
  padding-left: 12px;
  line-height: 1.3;
}

/* Fix 1: Remove inset shadow on .border-cat — root cause of thin gray frame */
.pd-page-wrapper .pd-upsell-wrap .border-cat {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

/* Fix 2: Restore card border/shadow (theme-french overrides transparent border & gray hover) */
.pd-page-wrapper .pd-upsell-wrap .border-cat .respl-item .item-inner {
  border: 1px solid #EEEEEE;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pd-page-wrapper .pd-upsell-wrap .border-cat .respl-item .item-inner:hover {
  border-color: #EEEEEE;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  transform: translateY(-2px);
}

/* Fix 3: Tighter gutter — from 30px (theme-french) → 16px */
.pd-page-wrapper .pd-upsell-wrap .rw-margin {
  margin-left: -8px;
  margin-right: -8px;
}
.pd-page-wrapper .pd-upsell-wrap .rw-margin .owl-item {
  padding: 0 8px;
}

/* Fix 4: Nav arrows — absolutely positioned, vertically centered on slider */
.pd-page-wrapper .pd-upsell-wrap .upsell-wrapper-slider {
  position: relative;
  padding: 0 38px;
}
.pd-page-wrapper .pd-upsell-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 5;
  margin-bottom: 0;
}
.pd-page-wrapper .pd-upsell-nav .button-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  color: #424242;
  text-decoration: none;
  box-shadow: 0 1px 5px rgba(0,0,0,0.08);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pd-page-wrapper .pd-upsell-nav .button-default:hover {
  background: #FFEBEE;
  border-color: #C62828;
  color: #C62828;
  box-shadow: none;
}

/* Mobile: narrow side padding for arrows */
@media (max-width: 767px) {
  .pd-page-wrapper .pd-upsell-wrap .upsell-wrapper-slider {
    padding: 0 30px;
  }
}

/* ── 13. Responsive ── */

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .pd-page-wrapper .pd-main-img-col #image {
    max-height: 360px;
  }

  .pd-page-wrapper .pd-price-box .special-price .price {
    font-size: 22px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .pd-page-wrapper .pd-main-card {
    padding: 16px;
    margin: 12px 0 0;
  }

  /* Gallery stacks vertically */
  .pd-page-wrapper .pd-gallery-inner {
    flex-direction: column !important;
  }

  /* Thumbnails: horizontal scroll strip */
  .pd-page-wrapper .pd-thumb-col {
    flex: none !important;
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .pd-page-wrapper .pd-thumb-col .wrap-jCarouselLite {
    display: inline-block;
    width: auto;
  }

  .pd-page-wrapper .pd-thumb-col .jCarouselLite {
    display: inline-block;
    overflow: visible;
  }

  .pd-page-wrapper .pd-thumb-col .jCarouselLite ul {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 8px;
    padding: 0 !important;
  }

  .pd-page-wrapper .pd-thumb-col .jCarouselLite ul li {
    display: inline-block !important;
    margin-bottom: 0 !important;
  }

  .pd-page-wrapper .pd-thumb-col .btn_thumb {
    display: none !important;
  }

  /* Product info: full width, no left padding */
  .pd-page-wrapper .pd-info-col {
    padding-left: 0 !important;
    margin-top: 16px;
  }

  .pd-page-wrapper .pd-product-info .product-name {
    font-size: 18px !important;
  }

  .pd-page-wrapper .pd-price-box .special-price .price {
    font-size: 22px !important;
  }

  .pd-page-wrapper .pd-btn-buy {
    font-size: 15px !important;
    height: 46px !important;
    line-height: 46px !important;
  }

  /* Bottom row: full width */
  .pd-page-wrapper .pd-bottom-row .pd-support-col {
    display: none !important;
  }

  .pd-page-wrapper .pd-bottom-row .pd-tabs-col {
    width: 100% !important;
    padding-left: 0 !important;
  }

  .pd-page-wrapper .pd-tabs .resp-tabs-container {
    padding: 16px !important;
  }
}

/* ── End T24 ── */

/* ── T26: Product Info Panel + CTA ── */

/* Meta labels (Thương hiệu:, Tình trạng:, Danh mục:) */
.pd-page-wrapper .pd-meta-label {
  font-size: 12px;
  color: #9E9E9E;
  margin-right: 4px;
}

/* Brand link */
.pd-page-wrapper .pd-brand-link {
  font-size: 13px;
  font-weight: 600;
  color: #C62828;
  text-decoration: none;
}

.pd-page-wrapper .pd-brand-link:hover {
  color: #B71C1C;
}

/* Availability row */
.pd-page-wrapper .pd-availability {
  font-size: 13px;
  color: #616161;
  margin: 6px 0;
}

.pd-page-wrapper .pd-stock-status {
  font-weight: 700;
  color: #2E7D32;
}

/* Categories links */
.pd-page-wrapper .pd-cate-link {
  font-size: 13px;
  color: #C62828;
  text-decoration: none;
  margin-right: 6px;
}

.pd-page-wrapper .pd-cate-link:hover {
  text-decoration: underline;
}

/* Price box — new class names replacing T24 old-price/special-price */
.pd-page-wrapper .pd-price-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.pd-page-wrapper .pd-price-current {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  color: #E53935;
  line-height: 1;
}

.pd-page-wrapper .pd-price-current .price {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #E53935 !important;
  line-height: 1 !important;
}

.pd-page-wrapper .pd-price-old {
  display: inline-block;
  font-size: 15px;
  color: #9E9E9E;
  text-decoration: line-through;
  line-height: 1;
  align-self: center;
}

.pd-page-wrapper .pd-price-old .price {
  font-size: 15px !important;
  color: #9E9E9E !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

/* MUA NGAY button — full width, primary CTA */
.pd-page-wrapper .pd-btn-main {
  display: block !important;
  width: 100% !important;
  background: #C62828 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  height: 50px !important;
  line-height: 50px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.2s !important;
  letter-spacing: 1px;
}

.pd-page-wrapper .pd-btn-main span,
.pd-page-wrapper .pd-btn-main span span {
  display: block !important;
  width: 100% !important;
  line-height: 50px !important;
}

.pd-page-wrapper .pd-btn-main:hover {
  background: #B71C1C !important;
}

/* Secondary CTA row: [TRẢ GÓP] [+ GIỎ HÀNG] */
.pd-page-wrapper .pd-cta-row2 {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* + GIỎ HÀNG button — dark */
.pd-page-wrapper .pd-btn-dark {
  flex: 1;
  background: #212121 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  height: 40px !important;
  line-height: 40px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.2s !important;
  padding: 0 12px !important;
  white-space: nowrap;
}

.pd-page-wrapper .pd-btn-dark:hover {
  background: #424242 !important;
}

/* Trust signals row */
.pd-page-wrapper .pd-trust-row {
  border-top: 1px solid #F0F0F0;
  margin: 16px 0 0;
  padding-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.pd-page-wrapper .pd-trust-item {
  font-size: 12px;
  color: #424242;
  line-height: 1.5;
}

.pd-page-wrapper .pd-trust-item::before {
  /* checkmark already inline in HTML entity &#10003; */
}

/* Mobile adjustments for T26 */
@media (max-width: 767px) {
  .pd-page-wrapper .pd-price-current,
  .pd-page-wrapper .pd-price-current .price {
    font-size: 24px !important;
  }

  .pd-page-wrapper .pd-btn-main {
    font-size: 15px !important;
    height: 46px !important;
    line-height: 46px !important;
  }

  .pd-page-wrapper .pd-btn-main span,
  .pd-page-wrapper .pd-btn-main span span {
    line-height: 46px !important;
  }

  .pd-page-wrapper .pd-trust-row {
    grid-template-columns: 1fr;
  }
}

/* ── T27: Nút Trả Góp ── */

/* Cả 2 nút hàng 2 đều flex 1 — mỗi nút 50% */
.pd-page-wrapper .pd-cta-row2 > * {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

/* Nút TRẢ GÓP: link dạng nút, nền trắng, border đỏ, chữ đỏ */
.pd-page-wrapper .pd-btn-tragop {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  color: #C62828 !important;
  border: 2px solid #C62828 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  height: 40px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
  padding: 0 12px !important;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.pd-page-wrapper .pd-btn-tragop:hover {
  background: #FFEBEE !important;
  color: #B71C1C !important;
  border-color: #B71C1C !important;
}

/* Mobile: stack 1 cột khi màn nhỏ hơn 360px */
@media (max-width: 359px) {
  .pd-page-wrapper .pd-cta-row2 {
    flex-direction: column;
  }

  .pd-page-wrapper .pd-cta-row2 > * {
    width: 100%;
    flex: none;
  }
}

/* ── End T26 ── */

/* ── CTA Layout Fix (T26/T27 refine) ── */
/* Override T24/T26/T27 — 3 nút cùng 1 hàng flex */

.pd-page-wrapper .pd-cta-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-bottom: 0;
}

/* MUA NGAY — flex 1.2 */
.pd-page-wrapper .pd-btn-main {
  flex: 1.2 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 58px !important;
  line-height: 1 !important;
  background: #C62828 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.2s !important;
  letter-spacing: 0.5px;
  padding: 0 !important;
  white-space: nowrap;
  box-sizing: border-box !important;
}

.pd-page-wrapper .pd-btn-main:hover {
  background: #B71C1C !important;
}

/* TRẢ GÓP — flex 1.2 */
.pd-page-wrapper .pd-btn-tragop {
  flex: 1.2 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 58px !important;
  line-height: 1 !important;
  background: #fff !important;
  color: #C62828 !important;
  border: 2px solid #C62828 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
  padding: 0 !important;
  white-space: nowrap;
  box-sizing: border-box !important;
}

.pd-page-wrapper .pd-btn-tragop:hover {
  background: #FFEBEE !important;
  color: #B71C1C !important;
  border-color: #B71C1C !important;
}

/* GIỎ HÀNG icon — 60px cố định */
.pd-page-wrapper .pd-btn-cart-icon {
  flex: 0 0 60px !important;
  width: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 58px !important;
  line-height: 1 !important;
  background: #212121 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 22px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 0.2s !important;
  box-sizing: border-box !important;
}

.pd-page-wrapper .pd-btn-cart-icon:hover {
  background: #424242 !important;
}

/* Mobile: stack dọc khi < 480px */
@media (max-width: 479px) {
  .pd-page-wrapper .pd-cta-row {
    flex-direction: column !important;
  }

  .pd-page-wrapper .pd-btn-main,
  .pd-page-wrapper .pd-btn-tragop {
    flex: none !important;
    width: 100% !important;
  }

  .pd-page-wrapper .pd-btn-cart-icon {
    flex: none !important;
    width: 100% !important;
  }
}

/* ── End CTA Layout Fix ── */

/* ── T25: Product Gallery + Video Support ── */

/* Gallery: column layout — main image top, strip below */
.pd-page-wrapper .pd-gallery-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  align-items: stretch;
}

.pd-page-wrapper .pd-main-img-col {
  position: relative;
  width: 100%;
  /* line-height: 0 omitted — CloudZoom uses line-height for positioning */
}

/* Override theme-french.css which adds margin-left:109px for the old vertical strip layout */
.pd-page-wrapper .yt-detail-image {
  margin-left: 0 !important;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

/* Thumbnail strip: horizontal row, scrollable */
.pd-page-wrapper .pd-thumb-strip {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.pd-page-wrapper .pd-thumb-strip::-webkit-scrollbar {
  height: 4px;
}

.pd-page-wrapper .pd-thumb-strip::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.pd-page-wrapper .pd-thumb-strip::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

/* Each thumbnail item */
.pd-page-wrapper .pd-thumb-strip > a {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: block;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s;
}

.pd-page-wrapper .pd-thumb-strip > a:hover,
.pd-page-wrapper .pd-thumb-strip > a.actived {
  border-color: #C62828;
}

.pd-page-wrapper .pd-thumb-strip > a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video thumbnail */
.pd-page-wrapper .pd-video-thumb {
  position: relative;
}

.pd-page-wrapper .pd-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: rgba(198, 40, 40, 0.88);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding-left: 2px;
  pointer-events: none;
}

/* Video viewer — same fixed height as the image it replaces (set by JS) */
.pd-page-wrapper .pd-vid-viewer {
  display: none;
  width: 100%;
  background: #000;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pd-page-wrapper .pd-main-img-col.pd-showing-video .pd-vid-viewer {
  display: flex;
}
.pd-page-wrapper .pd-vid-viewer iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.pd-page-wrapper .pd-vid-viewer video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  outline: none;
  object-fit: contain;
  background: #000;
}

/* Override theme-french.css: product-img-box has float:left + z-index — reset in flex context */
.pd-page-wrapper .product-img-box {
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Ensure image container chain fills width correctly */
.pd-page-wrapper .pd-main-img-col .product-image-zoom {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.pd-page-wrapper .pd-main-img-col .cloud-zoom {
  display: block;
  width: 100%;
}

.pd-page-wrapper .pd-main-img-col #image {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* When video is showing: hide image, reveal video viewer */
.pd-page-wrapper .pd-main-img-col.pd-showing-video .product-image {
  display: none;
}

/* No-video placeholder span — same base size/shape as thumbnail <a> */
.pd-page-wrapper .pd-thumb-strip > span {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: block;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.pd-page-wrapper .pd-video-no-video {
  background: #2a2a2a;
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .pd-page-wrapper .pd-thumb-strip > a {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }

  .pd-page-wrapper .pd-thumb-strip > span {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }

}

/* ── T17 — Video MP4 thumbnail + player ── */

/* MP4 thumbnail — dark bg with centered play icon, same dimensions as image thumbs */
.pd-page-wrapper .pd-video-thumb-mp4 {
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #444;
}

.pd-page-wrapper .pd-play-icon-mp4 {
  position: static;
  transform: none;
  width: 34px;
  height: 34px;
  background: rgba(198, 40, 40, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  padding-left: 3px;
}

/* HTML5 video player fills the overlay */
.pd-page-wrapper .pd-video-mp4-player {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  outline: none;
}

/* ── End T17 ── */

/* ── End T25 ── */

/* ═══════════════════════════════════════════════════
   T28 — Thông số kỹ thuật (specs anchor + section)
   ═══════════════════════════════════════════════════ */

/* Smooth scroll toàn site */
html {
  scroll-behavior: smooth;
}

/* ── Fake panel: ẩn hoàn toàn, plugin không show được ── */
.pd-spec-fake-panel {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Tab anchor "THÔNG SỐ KỸ THUẬT" ── */
.pd-page-wrapper .pd-spec-tab-item a {
  cursor: pointer !important;
  color: #C62828 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
}

.pd-page-wrapper .pd-spec-tab-item a:hover {
  color: #B71C1C !important;
  text-decoration: none !important;
}

/* Ngăn tab spec bị active style (plugin có thể cố gán) */
.pd-page-wrapper .pd-spec-tab-item.resp-tab-active a,
.pd-page-wrapper .pd-spec-tab-item.resp-tab-active {
  background: transparent !important;
  border-color: transparent !important;
  color: #C62828 !important;
}

/* ── Section thông số kỹ thuật ── */
#product-specifications {
  clear: both;
  scroll-margin-top: 90px;
  margin-top: 28px;
  padding: 24px;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.pd-spec-title {
  font-size: 17px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #C62828;
  display: inline-block;
}

/* ── Bảng 2 cột ── */
.pd-spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pd-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}

.pd-spec-table .pd-spec-row td {
  padding: 10px 14px;
  vertical-align: top;
  line-height: 1.5;
  border: 1px solid #EEEEEE;
  word-break: break-word;
}

/* Hàng lẻ: trắng */
.pd-spec-table .pd-spec-row:nth-child(odd) td {
  background: #fff;
}

/* Hàng chẵn: xám nhạt */
.pd-spec-table .pd-spec-row:nth-child(even) td {
  background: #F7F7F7;
}

/* Cột tên thông số: 40% rộng, bold */
.pd-spec-table .pd-spec-key {
  width: 40%;
  font-weight: 600;
  color: #1A1A1A;
}

/* Cột giá trị */
.pd-spec-table .pd-spec-val {
  width: 60%;
  color: #424242;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  #product-specifications {
    padding: 16px 12px;
    margin-top: 18px;
  }

  .pd-spec-title {
    font-size: 15px;
  }

  .pd-spec-table .pd-spec-row td {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Mobile: chuyển sang 2 dòng */
  .pd-spec-table,
  .pd-spec-table tbody,
  .pd-spec-table tr,
  .pd-spec-table td {
    display: block;
    width: 100% !important;
  }

  .pd-spec-table .pd-spec-row {
    border-bottom: 1px solid #EEEEEE;
  }

  .pd-spec-table .pd-spec-row:nth-child(even) td,
  .pd-spec-table .pd-spec-row:nth-child(odd) td {
    border: none;
  }

  .pd-spec-table .pd-spec-key {
    background: #F0F0F0 !important;
    font-weight: 700;
    padding-bottom: 4px;
  }

  .pd-spec-table .pd-spec-val {
    background: #fff !important;
    padding-top: 4px;
  }
}

/* ── End T28 ── */

/* ═══════════════════════════════════════════════════════════════
   Sidebar Product Blocks — Unified System (T30–T33)
   Classes: .product-side-block  .product-side-block-title
            .product-side-list   .product-side-item
            .product-side-thumb  .product-side-info
            .product-side-name   .product-side-price
   Applied: pd-related-block, pd-cheaper-block,
            pd-premium-block, pd-viewed-block
   ═══════════════════════════════════════════════════════════════ */

/* Block container */
.pd-page-wrapper .pd-support-col .product-side-block {
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}

/* Block title — unified red header */
.pd-page-wrapper .pd-support-col .product-side-block-title {
  background: #C62828;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 10px 14px;
  line-height: 1.2;
}

/* Product list: no scroll — toggle button handles overflow */
.pd-page-wrapper .pd-support-col .product-side-list {
  overflow: visible;
}

/* Hide items 7+ by default; .is-expanded shows all */
.pd-page-wrapper .pd-support-col .product-side-block:not(.is-expanded) .product-side-list .product-side-item:nth-child(n+7) {
  display: none;
}

/* Toggle button */
.pd-page-wrapper .pd-support-col .product-side-toggle {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: none;
  border-top: 1px solid #F2F2F2;
  color: #C62828;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: background 0.12s ease, color 0.12s ease;
}
.pd-page-wrapper .pd-support-col .product-side-toggle:hover {
  background: #FFF0F0;
  color: #B71C1C;
}

/* Product item */
.pd-page-wrapper .pd-support-col .product-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #F2F2F2;
  transition: background 0.12s ease;
}
.pd-page-wrapper .pd-support-col .product-side-item:last-child {
  border-bottom: none;
}
.pd-page-wrapper .pd-support-col .product-side-item:hover {
  background: #FFF8F8;
}

/* Thumbnail */
.pd-page-wrapper .pd-support-col .product-side-thumb {
  flex-shrink: 0;
  display: block;
  width: 78px;
  height: 78px;
  border-radius: 6px;
  overflow: hidden;
  background: #F7F7F7;
  border: 1px solid #EEEEEE;
}
.pd-page-wrapper .pd-support-col .product-side-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.25s ease;
}
.pd-page-wrapper .pd-support-col .product-side-item:hover .product-side-thumb img {
  transform: scale(1.06);
}

/* Info section */
.pd-page-wrapper .pd-support-col .product-side-info {
  flex: 1;
  min-width: 0;
}

/* Product name: 2-line clamp */
.pd-page-wrapper .pd-support-col .product-side-name a {
  font-size: 13px;
  font-weight: 400;
  color: #2D2D2D;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}
.pd-page-wrapper .pd-support-col .product-side-name a:hover {
  color: #C62828;
}

/* Price */
.pd-page-wrapper .pd-support-col .product-side-price {
  font-size: 13px;
  font-weight: 700;
  color: #E53935;
  margin-top: 5px;
}

/* Loading placeholder (viewed block) */
.pd-page-wrapper .pd-support-col .pd-viewed-loading {
  padding: 12px 14px;
  font-size: 12px;
  color: #BDBDBD;
  text-align: center;
}

/* ── End sidebar blocks ── */

/* ═══════════════════════════════════════════════════════════════
   FAQ Block — Câu Hỏi Thường Gặp
   Vị trí: sau Bình luận, trước block Có thể bạn thích
   ═══════════════════════════════════════════════════════════════ */

.pd-page-wrapper .pd-faq-block {
  background: #fff;
  border: 1px solid #EBEBEB;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 28px 0 20px;
}

.pd-page-wrapper .pd-faq-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #C62828;
}

.pd-page-wrapper .pd-faq-list {
  margin: 0;
  padding: 0;
}

.pd-page-wrapper .pd-faq-item {
  border-bottom: 1px solid #F0F0F0;
}
.pd-page-wrapper .pd-faq-item:last-child {
  border-bottom: none;
}

.pd-page-wrapper .pd-faq-q-wrap {
  margin: 0;
  font-weight: normal;
  font-size: inherit;
}

.pd-page-wrapper .pd-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.pd-page-wrapper .pd-faq-q-text {
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
  line-height: 1.45;
  flex: 1;
  transition: color 0.15s ease;
}
.pd-page-wrapper .pd-faq-question:hover .pd-faq-q-text,
.pd-page-wrapper .pd-faq-item.is-open .pd-faq-q-text {
  color: #C62828;
}

.pd-page-wrapper .pd-faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C62828;
  font-size: 14px;
  transition: transform 0.25s ease;
}
.pd-page-wrapper .pd-faq-icon::before {
  content: '\25BE';
}
.pd-page-wrapper .pd-faq-item.is-open .pd-faq-icon {
  transform: rotate(180deg);
}

/* Answer panel: CSS max-height transition */
.pd-page-wrapper .pd-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, padding-bottom 0.32s ease;
  padding-bottom: 0;
}
.pd-page-wrapper .pd-faq-item.is-open .pd-faq-answer {
  max-height: 600px;
  padding-bottom: 14px;
}

.pd-page-wrapper .pd-faq-answer p {
  font-size: 14px;
  color: #424242;
  line-height: 1.7;
  margin: 0;
}
.pd-page-wrapper .pd-faq-answer p + p {
  margin-top: 8px;
}
.pd-page-wrapper .pd-faq-answer a {
  color: #C62828;
  text-decoration: none;
}
.pd-page-wrapper .pd-faq-answer a:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .pd-page-wrapper .pd-faq-block {
    padding: 16px;
    margin: 18px 0 12px;
    border-radius: 8px;
  }
  .pd-page-wrapper .pd-faq-q-text {
    font-size: 13.5px;
  }
  .pd-page-wrapper .pd-faq-answer p {
    font-size: 13px;
  }
}

/* ── End FAQ Block ── */

/* ============================================================
   T35 — CATEGORY MOBILE LOAD MORE (test mode — always show on mobile)
   ============================================================ */

/* Desktop: ẩn */
.mobile-loadmore-wrap {
  display: none;
}

/* Mobile: luôn hiện — dùng !important vì CSS có thể bị JS override */
@media (max-width: 767px) {
  .cate-page-layout .t20-pagination-wrap {
    display: none !important;
  }
  .mobile-loadmore-wrap {
    display: flex !important;
    justify-content: center;
    margin: 16px 0 36px;
    position: relative;
    z-index: 10;
  }
  /* Ẩn hẳn khi JS thêm class is-done (selector cụ thể hơn — override !important) */
  .mobile-loadmore-wrap.is-done {
    display: none !important;
  }
}

.js-category-loadmore {
  width: 220px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: #C62828;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── End T35 ── */

/* ============================================================
   T36 — PRODUCT DETAIL MOBILE LAYOUT
   Scope: .pd-page-wrapper — chỉ @media (max-width: 767px)
   Desktop không bị ảnh hưởng.
   ============================================================ */

@media (max-width: 767px) {

  /* 1. Gallery + Info: stack dọc
     pd-gallery-info-row dùng display:flex (no wrap) — Bootstrap col-xs-12
     bị squish thành 50/50 trong flex container. Fix: flex-direction: column. */
  .pd-page-wrapper .pd-gallery-info-row {
    flex-direction: column;
  }
  .pd-page-wrapper .pd-gallery-col,
  .pd-page-wrapper .pd-info-col {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* Gallery: giảm max-height ảnh chính trên phone */
  .pd-page-wrapper .pd-main-img-col #image {
    max-height: 320px;
  }

  /* 2. CTA: stack dọc, full width (mở rộng rule < 480px lên toàn bộ mobile) */
  .pd-page-wrapper .pd-cta-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pd-page-wrapper .pd-btn-main,
  .pd-page-wrapper .pd-btn-tragop,
  .pd-page-wrapper .pd-btn-cart-icon {
    flex: none !important;
    width: 100% !important;
  }

  /* 3. Tabs: scroll ngang nếu nhiều tab, không xuống dòng */
  .pd-page-wrapper .pd-tabs .resp-tabs-list {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pd-page-wrapper .pd-tabs .resp-tabs-list::-webkit-scrollbar {
    display: none;
  }
  .pd-page-wrapper .pd-tabs .resp-tabs-list li {
    flex-shrink: 0 !important;
  }

  /* 4. Bảng thông số kỹ thuật: scroll ngang thay vì tràn */
  .pd-page-wrapper .pd-spec-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 5. Nội dung mô tả tab: không tràn ngang */
  .pd-page-wrapper .pd-tab-content {
    overflow-x: hidden;
  }

  /* 6. Bình luận: không tràn ngang */
  .pd-page-wrapper .pd-comment-content,
  .pd-page-wrapper .pd-reply-text {
    word-break: break-word;
    overflow-wrap: break-word;
  }

}

/* TODO FRONTEND PHASE: cần markup sticky CTA trong team_view.html nếu muốn bật sticky CTA thật sự. */

/* ── End T36 ── */

/* ============================================================
   T37 — SWIPE CAROUSELS MOBILE (Related product blocks)
   Áp dụng cho 4 block: Tương tự / Rẻ hơn / Cao cấp hơn / Đã xem
   Scope: .pd-page-wrapper .pd-support-col
   Chỉ @media (max-width: 767px) — desktop không bị ảnh hưởng.
   ============================================================ */

@media (max-width: 767px) {

  /* ── 1. Layout: hiện pd-support-col dưới tabs (override hidden-xs + T36 display:none) ── */
  .pd-page-wrapper .pd-bottom-row {
    display: flex !important;
    flex-direction: column;
  }
  .pd-page-wrapper .pd-bottom-row .pd-tabs-col {
    order: 1;
  }
  .pd-page-wrapper .pd-bottom-row .pd-support-col {
    order: 2;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* ── 2. Block container: cho phép scroll content overflow ── */
  .pd-page-wrapper .pd-support-col .product-side-block {
    overflow: visible !important;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #E8E8E8;
  }
  .pd-page-wrapper .pd-support-col .product-side-block-title {
    border-radius: 8px 8px 0 0;
  }

  /* ── 3. Ẩn nút "Xem thêm" — carousel hiện tất cả ── */
  .pd-page-wrapper .pd-support-col .product-side-toggle {
    display: none !important;
  }

  /* ── 4. Hiện tất cả item (override desktop nth-child hide rule) ── */
  .pd-page-wrapper .pd-support-col .product-side-block:not(.is-expanded) .product-side-list .product-side-item:nth-child(n+7) {
    display: flex !important;
  }

  /* ── 5. Horizontal scroll container ── */
  .pd-page-wrapper .pd-support-col .product-side-list {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 10px 12px 12px !important;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E0 transparent;
  }
  .pd-page-wrapper .pd-support-col .product-side-list::-webkit-scrollbar {
    height: 4px;
  }
  .pd-page-wrapper .pd-support-col .product-side-list::-webkit-scrollbar-track {
    background: transparent;
  }
  .pd-page-wrapper .pd-support-col .product-side-list::-webkit-scrollbar-thumb {
    background: #E0E0E0;
    border-radius: 2px;
  }

  /* ── 6. Card: fixed-width, vertical (ảnh trên / info dưới) ── */
  .pd-page-wrapper .pd-support-col .product-side-item {
    flex: 0 0 156px !important;
    width: 156px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    scroll-snap-align: start;
    border-bottom: none !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 6px;
    padding: 0 !important;
    overflow: hidden;
    background: #fff;
    gap: 0 !important;
  }
  .pd-page-wrapper .pd-support-col .product-side-item:hover {
    background: #fff;
  }
  .pd-page-wrapper .pd-support-col .product-side-item:last-child {
    border-bottom: 1px solid #EEEEEE !important;
  }

  /* ── 7. Thumbnail: hình vuông full width card ── */
  .pd-page-wrapper .pd-support-col .product-side-thumb {
    width: 100% !important;
    height: 130px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #F2F2F2 !important;
    flex-shrink: 0;
    display: block !important;
  }
  .pd-page-wrapper .pd-support-col .product-side-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* ── 8. Info section: below image ── */
  .pd-page-wrapper .pd-support-col .product-side-info {
    padding: 7px 8px 8px !important;
    flex: 1;
    min-width: 0;
  }
  .pd-page-wrapper .pd-support-col .product-side-name a {
    font-size: 12px !important;
    -webkit-line-clamp: 2 !important;
  }
  .pd-page-wrapper .pd-support-col .product-side-price {
    font-size: 12px !important;
    margin-top: 4px;
  }

}

/* ── End T37 ── */

/* ============================================================
   Refine T37 — Sidebar blocks: upsell-style on mobile
   Title: red-left-border (replaces full-red-bg) to match .pd-upsell-wrap
   Hide .pd-upsell-wrap on mobile (4 sidebar blocks take its role)
   ============================================================ */

@media (max-width: 767px) {

  /* Block container: top padding for title breathing room */
  .pd-page-wrapper .pd-support-col .product-side-block {
    padding-top: 14px;
  }

  /* Title: red-left-border style — matches .pd-upsell-wrap .h2title span */
  .pd-page-wrapper .pd-support-col .product-side-block-title {
    background: transparent !important;
    color: #1A1A1A !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-left: 4px solid #C62828 !important;
    border-radius: 0 !important;
    padding: 2px 0 2px 14px !important;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* Hide "Có thể bạn thích" on mobile — sidebar blocks below tabs serve this role */
  .pd-page-wrapper .pd-upsell-wrap {
    display: none !important;
  }

}

/* ── End Refine T37 ── */

/* ============================================================
   Refine T37 OWL — sidebar blocks: full card design sync with upsell
   Scope: .product-side-list.owl-carousel (class added by JS on mobile only)
   Replicates .respl-item .item-inner visual system from index.css.
   Desktop: OWL JS is gated to width < 768 → .owl-carousel never added → zero impact.
   ============================================================ */

@media (max-width: 767px) {

  /* ── 1. Container: let OWL manage layout (override T37 scroll-snap) ── */
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel {
    display: block !important;
    overflow: hidden !important;
    flex-direction: unset !important;
    scroll-snap-type: none !important;
    padding: 0 4px !important;
    gap: 0 !important;
  }

  /* ── 2. OWL item: 8px each side = 16px gap between cards (matches upsell .rw-margin .owl-item) ── */
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .owl-item {
    padding: 0 8px;
    box-sizing: border-box;
  }

  /* ── 3. Card wrapper: replicate .respl-item .item-inner ── */
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-item {
    flex: none !important;
    width: 100% !important;
    scroll-snap-align: none !important;
    flex-direction: column !important;
    background: #fff;
    border: 1px solid #EEEEEE !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100%;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
  }
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-item:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    transform: translateY(-2px);
    background: #fff;
  }

  /* ── 4. Image: replicate .item-image 1:1 ratio + .product-image fill ── */
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-thumb {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important;
    overflow: hidden !important;
    background: #F5F5F5;
    border-radius: 0 !important;
    border: none !important;
    flex-shrink: 0;
  }
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.35s ease;
  }
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-item:hover .product-side-thumb img {
    transform: scale(1.07);
  }

  /* ── 5. Info: replicate .item-info ── */
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-info {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 10px 12px 12px !important;
  }

  /* ── 6. Name: replicate .item-title a ── */
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-name {
    flex: 1;
    margin-bottom: 8px;
  }
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-name a {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45;
    color: #1f2937 !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden;
    word-break: break-word;
  }
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-name a:hover {
    color: #C62828 !important;
  }

  /* ── 7. Price: replicate .price-box .special-price .price ── */
  .pd-page-wrapper .pd-support-col .product-side-list.owl-carousel .product-side-price {
    margin-top: auto;
    font-size: 16px !important;
    color: #C62828 !important;
    font-weight: 700 !important;
    line-height: 1.3;
  }

  /* ── 8. Block: bottom padding for visual frame ── */
  .pd-page-wrapper .pd-support-col .product-side-block {
    padding-bottom: 12px;
  }

}

/* ── End Refine T37 OWL ── */

/* ── T51: Màu sắc sản phẩm ── */
.pd-color-section {
  margin: 12px 0 10px;
}
.pd-color-label {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}
.pd-color-label strong {
  color: #1f2937;
}
.pd-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-color-swatch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  min-width: 60px;
  max-width: 90px;
}
.pd-color-swatch:hover {
  border-color: #C62828;
  box-shadow: 0 0 0 2px rgba(198,40,40,.15);
}
.pd-color-swatch.is-selected {
  border-color: #C62828;
  box-shadow: 0 0 0 3px rgba(198,40,40,.2);
}
.pd-swatch-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.pd-swatch-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  display: block;
}
.pd-swatch-dot-empty {
  background: #f3f4f6;
}
.pd-swatch-label {
  font-size: 11px;
  color: #374151;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.pd-swatch-delta {
  font-size: 11px;
  color: #C62828;
  font-weight: 600;
}
@media (max-width: 767px) {
  .pd-color-swatch {
    min-width: 52px;
    padding: 5px 6px;
  }
  .pd-swatch-img {
    width: 38px;
    height: 38px;
  }
  .pd-swatch-dot {
    width: 30px;
    height: 30px;
  }
}
/* T51-Phase3: color validation error states */
.pd-color-error {
  color: #dc2626;
  font-size: 13px;
  margin-top: 6px;
  padding: 4px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  display: none;
}
.pd-color-required .pd-color-swatches {
  border: 1px solid #dc2626;
  border-radius: 6px;
  padding: 6px;
  animation: pdColorShake 0.4s ease;
}
@keyframes pdColorShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
/* ── End T51 ── */

/* ================================================================
   A06 — Cart / Order totals table
   Dùng chung cho: checkout_cart, team_order_success, order_tracking
   ================================================================ */
#shopping-cart-totals-table {
  width: 100%;
  border-collapse: collapse;
}
#shopping-cart-totals-table td {
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}
#shopping-cart-totals-table tfoot td {
  border-top: 2px solid #e5e7eb;
  padding-top: 11px;
  font-size: 15px;
}
#shopping-cart-totals-table tfoot .price {
  font-weight: 700;
  color: #c0392b;
  font-size: 16px;
}
/* Fix "Tổng cộngXXX" dính chữ — đảm bảo td có width cố định */
#shopping-cart-totals-table td:last-child {
  white-space: nowrap;
  min-width: 110px;
}

/* ================================================================
   A03 — Giỏ hàng: font / spacing / responsive
   ================================================================ */
.cart-table th {
  background: #f9fafb;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 2px solid #e5e7eb;
  text-align: center;
}
.cart-table td {
  padding: 12px 10px;
  font-size: 14px;
  color: #374151;
  vertical-align: middle;
  border-bottom: 1px solid #f3f4f6;
}
.cart-table .product-name a {
  color: #1f2937;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.cart-table .product-name a:hover { color: #c0392b; }
.cart-table .cart-price .price { color: #c0392b; font-weight: 600; }
.cart-table .tientratruoc { font-weight: 700; color: #c0392b; font-size: 15px; }
.cart-table input.qty {
  width: 52px;
  text-align: center;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 15px;
  color: #1f2937;
}
.cart-table .icon-remove { color: #9ca3af; font-size: 18px; }
.cart-table .icon-remove:hover { color: #c0392b; }
/* Tổng cộng row — cart page */
.cart h1 { font-size: 22px; font-weight: 700; color: #1f2937; margin-bottom: 20px; }
.cart .totals { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; }
@media (max-width: 767px) {
  .cart-table th:first-child,
  .cart-table td:first-child { width: 70px; }
  .cart-table th,
  .cart-table td { padding: 8px 6px; font-size: 13px; }
  .cart-table input.qty { width: 44px; font-size: 14px; }
}

/* ================================================================
   A02 — Order tracking page card
   ================================================================ */
.ot-page-wrap {
  max-width: 720px;
  margin: 24px auto;
}
.ot-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 32px 36px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ot-title {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f3f4f6;
}
.ot-form-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 8px;
}
.ot-input {
  flex: 1;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  color: #1f2937;
  outline: none;
  transition: border-color .15s;
  background: #fff;
}
.ot-input:focus { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.10); }
.ot-btn {
  height: 46px;
  padding: 0 26px;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.ot-btn:hover { background: #a93226; }
.ot-result { margin-top: 28px; }
.ot-result .cart-table { margin-top: 16px; }
.ot-status-badge {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 16px;
}
.ot-back-link { margin-top: 20px; font-size: 14px; }
.ot-back-link a { color: #6b7280; }
.ot-back-link a:hover { color: #c0392b; }
.ot-error-msg,
.ot-success-msg { margin-bottom: 14px; }
@media (max-width: 600px) {
  .ot-card { padding: 20px 16px; }
  .ot-title { font-size: 18px; }
  .ot-form-row { flex-direction: column; }
  .ot-btn { height: 46px; width: 100%; }
}