/* Hệ thiết kế joola.com.vn — Tiêu chí CSS giao diện (anh Ba 27/09/2026), áp 28/09/2026.
   Nạp SAU joola-core + all.css. Chỉ đặt token và phủ các chỗ lệch thang; không đổi bố cục. */
:root{
  --co-h1:clamp(1.5rem,1.3rem + .6vw,1.8rem);
  --co-h2:clamp(1.3rem,1.16rem + .4vw,1.5rem);
  --co-h3:clamp(1.15rem,1.08rem + .2vw,1.25rem);
  --co-h4:1.125rem;
  --co-h5:1rem;
  --co-h6:.875rem;
  --co-than:1rem;
  --co-dan:1.125rem;
  --co-phu:.875rem;
  --co-chu-thich:.8125rem;
  --co-nhan:.75rem;
  --lh-tieu-de:1.2;
  --lh-cum:1.4;
  --lh-than:1.6;
  --lh-bai:1.75;
  --kc-khoi:clamp(48px,2rem + 3vw,88px);
}

/* Thang tiêu đề (anh Ba 28/09/2026: máy tính H1 1.8rem, H2–H6 theo tỷ lệ) — máy tính 28.8/24/20/18/16/14px, điện thoại 24/20.8/18.4/18/16/14px */
h2:not(.heading_txt){font-size:var(--co-h2)}h3{font-size:var(--co-h3)}h4{font-size:var(--co-h4)}h5{font-size:var(--co-h5)}h6{font-size:var(--co-h6)}
h1:not(.heading_txt),.product-detail h1,.blog-detail h1,.cap h1{font-size:var(--co-h1)!important;line-height:var(--lh-tieu-de)!important;letter-spacing:-.01em;font-weight:700!important}
.section-title,.section-title.fs-2,h1.section-title{font-size:var(--co-h2)!important;line-height:var(--lh-tieu-de)!important;letter-spacing:-.01em;font-weight:700!important}

/* Banner trang chi tiết bài: tên mục là <p> (trang chỉ có một H1 là tên bài) nhưng cùng cỡ tiêu đề banner */
.cap .inner > p.animation{font-size:var(--co-h1)!important;line-height:var(--lh-tieu-de)!important;font-weight:700!important;letter-spacing:-.01em}

/* Trang liên hệ: tiêu đề khối form theo thang H2 */
.contact-page h3.title{font-size:var(--co-h2)!important;line-height:var(--lh-tieu-de);letter-spacing:-.01em;font-weight:700}

/* Nội dung bài viết, mô tả sản phẩm, nội dung danh mục */
.blog-detail .content,.content-area,.dm-nd{font-size:var(--co-than)}
.blog-detail .content p,.blog-detail .content li,.content-area p,.content-area li{font-size:var(--co-than);line-height:var(--lh-bai)}
.blog-detail .content.lh-lg,.content-area.lh-lg{line-height:var(--lh-bai)!important}
.blog-detail .content h2,.content-area h2{font-size:var(--co-h2);line-height:var(--lh-tieu-de);letter-spacing:-.01em;font-weight:700;margin:40px 0 16px}
.content-area h2,.blog-detail .content h2,.dm-nd h2,.hoidap h2{font-size:var(--co-h2)!important;line-height:var(--lh-tieu-de)!important}
.content-area h3,.blog-detail .content h3,.dm-nd h3{font-size:var(--co-h3)!important;line-height:var(--lh-tieu-de)!important}
.blog-detail .content h3,.content-area h3{font-size:var(--co-h3);line-height:var(--lh-tieu-de);font-weight:600;margin:32px 0 12px}
.blog-detail .content h4,.content-area h4,.dm-nd h4{font-size:var(--co-h4)!important;line-height:var(--lh-cum);font-weight:600;margin:24px 0 8px}
.blog-detail .content td,.blog-detail .content th,.content-area td,.content-area th{font-size:var(--co-phu);line-height:var(--lh-cum)}

.blog-detail .content h5,.content-area h5{font-size:var(--co-h5)!important;line-height:var(--lh-cum)}
.blog-detail .content h6,.content-area h6{font-size:var(--co-h6)!important;line-height:var(--lh-cum)}


/* Ảnh trong nội dung: căn giữa (anh Ba 28/09/2026) */
/* Ảnh đứng một mình: khối căn giữa; nhiều ảnh cùng một đoạn: giữ đứng cạnh nhau, căn giữa cả đoạn */
.blog-detail .content img,.content-area img,.dm-nd img{max-width:100%!important;height:auto!important;vertical-align:middle}
.blog-detail .content > img,.content-area .tab-pane > img,.blog-detail .content figure img,.content-area figure img,.dm-nd figure img{display:block!important;margin-left:auto!important;margin-right:auto!important}
.blog-detail .content p:has(img),.content-area p:has(img),.dm-nd p:has(img){text-align:center}
.product-detail .detail-content .content-area img,.detail-content .content-area .tab-pane img,.detail-content .content-area figure img{max-width:min(100%,720px)!important}
.blog-detail .content figure,.content-area figure,.dm-nd figure{margin:32px auto;text-align:center}
.blog-detail .content figcaption,.content-area figcaption,.dm-nd figcaption{font-size:var(--co-chu-thich);line-height:var(--lh-cum);color:#595959;margin-top:8px;text-align:center}

/* Chữ nhỏ: tối thiểu 13px (chỉ nhãn được 12px) */
.product-list .item .content a.title,.item .content.text-center a.title{font-size:var(--co-phu)!important;line-height:var(--lh-cum)}
.item .content.text-center .price{font-size:var(--co-phu)!important;line-height:var(--lh-cum)}
.item .content.text-center del{font-size:var(--co-chu-thich)!important}
.item span.in-stock{font-size:var(--co-chu-thich)!important}
.product-list .item .in-stock{width:auto!important;height:auto!important;white-space:nowrap;line-height:1.4;padding:4px 8px!important;border-radius:6px}
.item .params .time{font-size:var(--co-chu-thich)!important}
.breadcrumb,.breadcrumb .breadcrumb-item,.breadcrumb a{font-size:var(--co-chu-thich)!important}
.foot-btm .copyright .container,.foot-btm .copyright b{font-size:var(--co-chu-thich)!important;line-height:var(--lh-cum)}
.nav-search ._badge{font-size:var(--co-nhan)!important}
.tag-list a{font-size:var(--co-phu)!important}
.nav-tabs .nav-link{font-size:var(--co-chu-thich)!important;white-space:nowrap}
@media (max-width:575px){.product-detail .detail-content{padding:16px!important}.content-area .nav-tabs{flex-wrap:nowrap}.content-area .nav-tabs .nav-link{flex:1 1 0;min-width:0;white-space:normal;text-align:center;line-height:var(--lh-cum);padding-left:8px!important;padding-right:8px!important}}
.img .caption .hint{font-size:var(--co-chu-thich)!important}
.sub_heading_txt .animation{font-size:var(--co-phu)!important;line-height:var(--lh-cum)}
.mega-menu__title{font-size:var(--co-nhan)!important;letter-spacing:.08em}

/* Phân trang: xuống dòng khi hẹp, không đẩy tràn */
.pagination{flex-wrap:wrap;justify-content:center;row-gap:8px}

/* Bảng trong nội dung: bảng giữ dạng bảng, rộng 100%; khung .table-responsive bọc ngoài lo cuộn ngang (JS tự bọc bảng chưa có khung) */
.section-detail-content .content .table-responsive,.blog-detail .content .table-responsive,.content-area .table-responsive,.dm-nd .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 24px}
.section-detail-content .content .table-responsive>table,.blog-detail .content .table-responsive>table,.content-area .table-responsive>table,.dm-nd .table-responsive>table{width:100%;margin-bottom:0}
@media (max-width:767px){.section-detail-content .content .table-responsive td,.section-detail-content .content .table-responsive th{white-space:nowrap}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}