/* ============ custom-organic.css : CSS DUNG CHUNG TOAN SITE ============
   Tach tu Layout/views/css.php. Sua truc tiep file nay (khong sua view).
   Gom: bien organic, header/topbar, footer, nut Nexfit, newsletter/coupon
   sidebar, font Be Vietnam Pro + Barlow Condensed, input global, nut mobile. */
:root { --organic-primary:#0E633B; --organic-secondary:#40916C; --organic-accent:#F4A259; --organic-bg:#F8F5F0; --organic-light:#D8F3DC; --organic-btn:#9CCD6A; --organic-btn-text:#0E633B; }
.tf-topbar.bg-black { background: var(--organic-btn) !important; }
/* Topbar nen xanh la: chu + link + select ve xanh dam cho de doc */
.tf-topbar .text-white { color: var(--organic-btn-text) !important; }
.tf-topbar .topbar-option-list .br-line { background-color: var(--organic-btn-text); opacity: .3; }
.tf-topbar .tf-dropdown-select.color-white > .dropdown-toggle,
.tf-topbar .tf-dropdown-select .filter-option-inner-inner { color: var(--organic-btn-text); }
.tf-header { border-bottom: 1px solid var(--organic-light); }
.tf-btn.btn-fill, .tf-btn.animate-hover-btn, .btn-primary { background: var(--organic-primary); border-color: var(--organic-primary); }
.tf-btn.btn-fill:hover, .btn-primary:hover { background:#0A4A2A; border-color:#0A4A2A; }
a.link:hover, .item-link:hover { color: var(--organic-primary) !important; }
.swiper-pagination-bullet-active, .sw-dots .swiper-pagination-bullet-active { background: var(--organic-primary) !important; }
/* Msg loi/thanh cong dung chung cho form AJAX (thay style inline) */
.form-error-msg { color: #d33; }
.form-success-msg { color: #0a7d2a; }
/* flat-spacing-3 mau de padding 0 -> noi dung sat nhau + dinh footer: tra nhip chuan */
.flat-spacing-3 { padding-top: 60px; padding-bottom: 60px; }
@media (max-width: 767px) {
  .flat-spacing-3 { padding-top: 40px; padding-bottom: 40px; }
}
/* ============ Features trang chu kieu Nexfit: 4 cot icon tron + hover fill ============ */
.feature-benefits { position: relative; padding: 80px 0; }
.feature-benefit-item-list { display: flex; flex-wrap: wrap; gap: 30px 40px; }
.feature-benefit-item { position: relative; width: calc(25% - 30px); display: flex; flex-wrap: wrap; gap: 15px; }
.feature-benefit-item .icon-box { position: relative; width: 50px; height: 50px; background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 50%; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.feature-benefit-item .icon-box::before { content: ''; position: absolute; inset: 0; background: var(--organic-primary); border-radius: 50%; transform: scale(0); transition: transform .4s ease-in-out; }
.feature-benefit-item:hover .icon-box::before { transform: scale(1); }
.feature-benefit-item .icon-box img { position: relative; width: 100%; max-width: 30px; z-index: 1; transition: filter .4s ease-in-out; }
.feature-benefit-item:hover .icon-box img { filter: brightness(0) invert(1); }
.feature-benefit-item .icon-box i { position: relative; z-index: 1; font-size: 22px; color: var(--organic-primary); transition: color .4s ease-in-out; }
.feature-benefit-item:hover .icon-box i { color: #fff; }
.feature-benefit-item-content { width: calc(100% - 65px); }
.feature-benefit-item-content h3 { font-size: 18px; margin-bottom: 0; }
.feature-benefit-item-content p { margin: 5px 0 0; color: #6b7280; }
@media (max-width: 1024px) {
  .feature-benefit-item-list { gap: 30px; }
  .feature-benefit-item { width: calc(25% - 22.5px); }
  .feature-benefit-item-content { width: 100%; }
}
@media (max-width: 991px) {
  .feature-benefits { padding: 50px 0; }
  .feature-benefit-item { width: calc(50% - 15px); }
  .feature-benefit-item-content { width: calc(100% - 65px); }
}
@media (max-width: 767px) {
  .feature-benefit-item { width: 100%; }
}
/* ============ Tieu de section kieu Nexfit (sub-title + gach bullet) ============ */
.section-title { margin-bottom: 40px; }
.section-title .section-sub-title { position: relative; display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .06em; line-height: normal; text-transform: uppercase; color: var(--organic-primary); padding-left: 24px; margin-bottom: 15px; }
.section-title .section-sub-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-image: url('/assets/webapp/images/icon-sub-heading.svg'); background-repeat: no-repeat; background-position: center; background-size: cover; width: 16px; height: 16px; }
.section-title h2 { margin-bottom: 0; }
.section-title p { margin-top: 15px; margin-bottom: 0;color: #000; }
.section-title-center { text-align: center; }
/* ============ Trang lien he kieu Nexfit: info 5 + form 7 + ban do ============ */
.page-contact-us { padding: 80px 0 40px; }
.contact-us-content { height: 100%; display: flex; flex-direction: column; justify-content: space-between; margin-right: 20px; }
.contact-us-hours-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0,0,0,.10); padding-bottom: 20px; margin-bottom: 30px; }
.contact-us-hours-header i { font-size: 30px; color: var(--organic-primary); }
.contact-us-hours-header h3 { font-size: 18px; font-weight: 600; margin-bottom: 0; }
.contact-us-hour-list ul { list-style: none; margin: 0; padding: 0; }
.contact-us-hour-list ul li { width: 100%; display: flex; justify-content: space-between; gap: 10px; line-height: 1.5; margin-bottom: 20px; }
.contact-us-hour-list ul li:last-child { margin-bottom: 0; }
.contact-us-hour-list ul li span { color: var(--black); font-weight: 600; }
.contact-us-form { background: #fff; border-radius: 5px; padding: 50px; }
.contact-us-form .section-title { border-bottom: 1px solid rgba(0,0,0,.10); padding-bottom: 30px; }
.contact-form .form-group { margin-bottom: 30px; }
.contact-form-btn { margin-top: 10px; }
.google-map { padding: 40px 0 80px; }
.google-map-iframe { width: 100%; height: 600px; border-radius: 5px; overflow: hidden; }
.google-map-iframe iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1); transition: filter .6s ease-in-out; }
.google-map-iframe:hover iframe { filter: grayscale(0); }
@media only screen and (max-width: 1024px) {
  .contact-us-content { height: auto; margin: 0 0 30px; }
  .contact-us-hours-box { max-width: max-content; min-width: 50%; }
}
@media only screen and (max-width: 991px) {
  .page-contact-us { padding: 50px 0 25px; }
  .contact-us-hours-header { padding-bottom: 20px; margin-bottom: 20px; }
  .contact-us-hours-header i { font-size: 24px; }
  .contact-us-hour-list ul li { margin-bottom: 15px; }
  .contact-us-form { padding: 30px; }
  .contact-us-form .section-title { padding-bottom: 20px; }
  .contact-form .form-group { margin-bottom: 20px; }
  .google-map { padding: 25px 0 50px; }
  .google-map-iframe { height: 450px; }
}
@media only screen and (max-width: 767px) {
  .contact-us-hours-box { max-width: 100%; }
  .contact-us-hours-header { padding-bottom: 15px; margin-bottom: 15px; }
  .contact-us-hours-header i { font-size: 20px; }
  .contact-us-hour-list ul li { margin-bottom: 10px; }
  .contact-us-form { padding: 20px; }
  .google-map-iframe { height: 350px; }
}
/* ============ Hero banner kieu Nexfit: nen full + sub + H1 + 2 nut + so lieu ============ */
.mz-hero { position: relative; min-height: 620px; display: flex; align-items: center; background-color: var(--organic-primary); background-size: cover; background-position: center center; background-repeat: no-repeat; padding: 110px 0 70px; overflow: hidden; }
.mz-hero::before { content: ''; position: absolute; inset: 0;
 /*background: rgba(0,0,0,.55);*/
 z-index: 0; }
.mz-hero .container { position: relative; z-index: 1; }
.mz-hero .section-title { margin-bottom: 0; }
.mz-hero .section-sub-title { color: var(--organic-btn); }
.mz-hero .section-sub-title::before { background-color: var(--organic-btn); background-image: none; border-radius: 50%; }
.mz-hero h1 {color: var(--organic-btn-text) !important;
    font-size: clamp(36px, 5vw, 50px);
    line-height: 1;
    font-weight: 700;
  }
.mz-hero-btns { display: flex; flex-wrap: wrap; gap: 20px 20px; margin-top: 30px; }
.mz-hero .tf-btn.style-line.btn-hero-line { background: transparent; border: 1px solid #fff; color: #fff; }
.mz-hero .tf-btn.style-line.btn-hero-line::after { display: none; }
.mz-hero .tf-btn.style-line.btn-hero-line:hover { background: var(--organic-btn); border-color: var(--organic-btn); color: var(--organic-btn-text); }
.mz-hero-counters { display: flex; flex-wrap: wrap; gap: 20px 40px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 40px; margin-top: 40px; }
.mz-hero-counter { position: relative; width: calc(33.33% - 40px); }
.mz-hero-counter::before { content: ''; position: absolute; top: 0; right: -30px; bottom: 0; width: 1px; background: rgba(255,255,255,.25); }
.mz-hero-counter:nth-child(3n + 3)::before, .mz-hero-counter:last-child::before { display: none; }
.mz-hero-counter h2 { font-size: 24px; color: #fff; margin-bottom: 0;font-weight:800; }
.mz-hero-counter p { color: #fff; margin: 5px 0 0; }
@media only screen and (max-width: 991px) {
  .mz-hero { min-height: 520px; padding: 80px 0 60px; }
  .mz-hero-btns { margin-top: 30px; }
  .mz-hero-counters { padding-top: 30px; margin-top: 40px; }
  .mz-hero-counter h2 { font-size: 30px; }
}
@media only screen and (max-width: 767px) {
  .mz-hero-btns, .mz-hero-counters { gap: 20px; }
  .mz-hero-counter { width: calc(33.33% - 14px); }
  .mz-hero-counter::before { right: -10px; }
}
/* ============ Detail tin tuc kieu Nexfit: giua 1100px + tags/share duoi ============ */
.post-detail-centered { width: 100%; max-width: 1100px; margin: 0 auto; }
.post-detail-centered .post-detail-title { margin-bottom: 12px; }
.post-detail-meta { font-size: 15px; color: #6b7280; margin-bottom: 20px; }
.post-detail-figure { display: block; border-radius: 5px; overflow: hidden; margin: 0 0 30px; }
.post-detail-figure img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.post-detail-summary { font-size: 18px; font-weight: 600; color: var(--black); margin-bottom: 20px; }
.post-tag-share { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgba(0,0,0,.10); padding-top: 30px; margin-top: 30px; }
.post-tags-col { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.post-tags-label { font-weight: 600; color: var(--black); }
.post-tags-col a { display: inline-block; padding: 10px 18px; border: 1px solid rgba(0,0,0,.10); border-radius: 99px; font-size: 15px; color: #1f2937; }
.post-tags-col a:hover { border-color: var(--organic-primary); color: var(--organic-primary); }
.post-share-col { display: flex; align-items: center; gap: 10px; }
@media (max-width: 767px) {
  .post-detail-figure img { aspect-ratio: 16 / 10; }
}
/* ============ Blog kieu Nexfit (blog.html): luoi 3 cot + readmore gach chan ============ */
.post-item-list { display: flex; flex-wrap: wrap; gap: 30px 20px; }
.post-item { width: calc(33.33% - 13.33px); }
.post-item-image { margin-bottom: 20px; }
.post-item-image a, .post-item-image figure { display: block; border-radius: 5px; overflow: hidden; margin: 0; }
.post-item-image figure img { width: 100%; aspect-ratio: 1 / 0.732; object-fit: cover; transition: transform .6s ease-in-out; display: block; }
.post-item:hover .post-item-image figure img { transform: scale(1.06); }
.post-item-meta { margin-bottom: 10px; }
.post-item-meta ul { display: flex; flex-wrap: wrap; gap: 10px 30px; list-style: none; padding: 0; margin: 0; }
.post-item-meta ul li { font-size: 14px; line-height: 1.5; color: var(--black); }
.post-item-content h3 { font-size: 20px; line-height: 1.4; margin-bottom: 0; }
.post-item-content h3 a { color: inherit; }
.post-item-btn { border-top: 1px solid rgba(0,0,0,.10); padding-top: 20px; margin-top: 20px; }
.readmore-btn { position: relative; display: inline-block; font-weight: 600; line-height: normal; color: var(--black); padding-right: 30px; }
.readmore-btn::before { content: "\e915"; font-family: 'icomoon'; font-size: 19px; line-height: 1; position: absolute; right: 0; top: 50%; transform: translate(-2px, -50%); transition: transform .4s ease-in-out; }
.readmore-btn:hover { color: var(--organic-primary); }
.readmore-btn:hover::before { transform: translate(2px, -50%); }
.readmore-btn::after { content: ""; position: absolute; bottom: -3px; left: 0; width: calc(100% - 30px); border-bottom: 1px solid currentColor; transition: width .5s ease-in-out; }
.readmore-btn:hover::after { width: 0; }
@media (max-width: 991px) {
  .post-item { width: calc(50% - 10px); }
}
@media (max-width: 575px) {
  .post-item { width: 100%; }
}
/* ============ Blog + Instagram trang chu: anh vuong, sach inline-style ============ */
.home-blog-item .home-blog-thumb { display: block; border-radius: 5px; overflow: hidden; }
.home-blog-item .home-blog-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .6s ease-in-out; }
.home-blog-item:hover .home-blog-thumb img { transform: scale(1.06); }
.home-blog-meta { font-size: 14px; color: #6b7280; margin: 12px 0 8px; }
.home-blog-desc { margin: 8px 0 20px; }
.mz-insta-item { display: block; position: relative; overflow: hidden; border-radius: 5px; }
.mz-insta-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.mz-insta-item span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(14,99,59,.55); color: #fff; font-size: 15px; opacity: 0; transition: opacity .3s ease-in-out; }
.mz-insta-item:hover span { opacity: 1; }
/* Tabs san pham moi: vien tron, active xanh */
.mz-product-tabs .nav-pills { gap: 12px; margin-bottom: 40px !important; }
.mz-product-tabs .nav-pills .nav-link { border: 1px solid rgba(0,0,0,.15); border-radius: 12px; padding: 6px 25px; font-size: 15px; font-weight: 600; color: #374151; background: transparent; }
.mz-product-tabs .nav-pills .nav-link:hover { border-color: var(--organic-primary); color: var(--organic-primary); }
.mz-product-tabs .nav-pills .nav-link.active { background: var(--organic-primary); border-color: var(--organic-primary); color: #fff; }
/* Loading mui ten xoay dong bo toan web: giu khung nut, khong doi HTML */
.is-loading { position: relative !important; pointer-events: none !important; }
.is-loading, .is-loading > * { color: transparent !important; }
.is-loading > * { opacity: 0 !important; }
.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(0,0,0,.22); border-top-color: var(--organic-primary); animation: mz-spin .7s linear infinite; z-index: 2; }
.btn-primary.is-loading::after, .btn-white.is-loading::after { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.box-icon.is-loading::after { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
@keyframes mz-spin { to { transform: rotate(360deg); } }
/* Quickview gon: dialog 2/3 (980px thay 1470px) */
.modal-quick-view .modal-dialog { max-width: 980px; }
/* Quickview ti le 2/3: thu nho deu chu + dem trong modal */
.modal-quick-view .modal-content { padding: 24px 20px; gap: 24px; }
.modal-quick-view .tf-product-info-list { gap: 16px; }
.modal-quick-view .product-info-name { font-size: 24px; }
.modal-quick-view .product-info-price .price-new { font-size: 24px; }
.modal-quick-view .product-info-price .price-old { font-size: 14px; }
.modal-quick-view .product-infor-sub { font-size: 15px; }
/* Tieu de section home cach noi dung 32px */
.mz-section-title { margin-bottom: 32px; }
/* ============ Testimonials kieu Nexfit: slider card trang + sao + tac gia ============ */
.our-testimonials { padding: 40px 0; }
.testimonials-slider, .testimonials-slider .swiper { height: 100%; }
.testimonials-item { height: 100%; min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; background-color: #fff; border-radius: 5px; padding: 40px; }
.testimonials-item-rating-star { display: block; margin-bottom: 20px; }
.testimonials-item-rating-star i { font-size: 16px; color: var(--black); margin-right: 2px; }
.testimonials-item-content p { font-size: 18px; color: var(--black); margin-bottom: 15px; }
.testimonials-item-content p:last-child { margin-bottom: 0; }
.testimonials-item-author { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; border-top: 1px solid rgba(0,0,0,.10); padding-top: 40px; }
.testimonials-item-author-image figure { display: block; border-radius: 50%; margin: 0; }
.testimonials-item-author-image figure img { width: 100%; max-width: 50px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
.testimonials-item-author-content { width: calc(100% - 65px); }
.testimonials-item-author-content h2 { font-size: 18px; margin-bottom: 0; }
.testimonials-item-author-content p { line-height: normal; margin: 5px 0 0; }
@media only screen and (max-width: 991px) {
  .our-testimonials { padding: 25px 0; }
  .testimonials-item { padding: 30px; min-height: auto; }
  .testimonials-item-content p { font-size: 16px; }
  .testimonials-item-author { padding-top: 30px; }
}
@media only screen and (max-width: 767px) {
  .testimonials-item { gap: 20px; padding: 20px; }
  .testimonials-item-rating-star { margin-bottom: 15px; }
  .testimonials-item-author { padding-top: 20px; }
}
/* ============ Bai viet tinh: hero + section + card + stats + quote ============ */
.static-detail-page .tp-blog-details-content {margin: 0 auto; }
.static-detail-page .tp-blog-details-content > *:first-child { margin-top: 0; }
.static-detail-page .content-wrap { padding-top: 40px; }
.tp-blog-details-content > *:last-child { margin-bottom: 0; }
.tp-blog-details-content .static-hero { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.tp-blog-details-content .static-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--organic-primary); margin-bottom: 12px; }
.tp-blog-details-content .static-hero h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 16px; }
.tp-blog-details-content .static-lead { font-size: 18px; line-height: 1.7; color: #4b5563; margin-bottom: 0; }
.tp-blog-details-content h2 { font-size: clamp(24px, 3vw, 30px); border-left: 4px solid var(--organic-primary); padding-left: 14px; margin: 44px 0 18px; }
.tp-blog-details-content h3 { font-size: 20px; margin: 28px 0 12px; }
.tp-blog-details-content p { font-size: 16px; line-height: 1.8; color: #374151; margin-bottom: 16px; }
.tp-blog-details-content p a, .tp-blog-details-content li a { color: var(--organic-primary); font-weight: 600; }
.tp-blog-details-content p a:hover, .tp-blog-details-content li a:hover { text-decoration: underline; }
.tp-blog-details-content ul:not(.static-logos-off) { list-style: none; margin: 0 0 20px; padding: 0; }
.tp-blog-details-content ul li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 16px; line-height: 1.7; color: #374151; }
.tp-blog-details-content ul li::before { content: "\e915"; font-family: 'icomoon'; position: absolute; left: 0; top: 4px; font-size: 14px; color: var(--organic-primary); }
.tp-blog-details-content ol { margin: 0 0 20px; padding-left: 22px; }
.tp-blog-details-content ol li { margin-bottom: 10px; font-size: 16px; line-height: 1.7; color: #374151; }
.tp-blog-details-content strong { color: #111827; }
.tp-blog-details-content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.tp-blog-details-content table th, .tp-blog-details-content table td { border: 1px solid rgba(0,0,0,.10); padding: 12px 16px; text-align: left; }
.tp-blog-details-content table th { background: var(--organic-primary); color: #fff; font-weight: 600; }
.tp-blog-details-content table tr:nth-child(even) td { background: #f8fafc; }
.tp-blog-details-content .static-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; }
.tp-blog-details-content .static-card { background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 10px; padding: 24px; }
.tp-blog-details-content .static-card h3 { font-size: 19px; margin: 0 0 8px; padding: 0; border: 0; }
.tp-blog-details-content .static-card p { font-size: 15px; margin-bottom: 0; }
.tp-blog-details-content .static-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: var(--organic-primary); border-radius: 10px; padding: 28px 20px; margin: 32px 0; text-align: center; }
.tp-blog-details-content .static-stats strong { display: block; font-family: 'Barlow Condensed', 'Afacad', sans-serif; font-size: 32px; font-weight: 700; color: #fff; line-height: 1.2; }
.tp-blog-details-content .static-stats span { font-size: 14px; color: rgba(255,255,255,.85); }
.tp-blog-details-content .static-figure { margin: 32px 0; border-radius: 10px; overflow: hidden; }
.tp-blog-details-content .static-figure img { width: 100%; height: auto; display: block; }
.tp-blog-details-content .static-figure figcaption { font-size: 13px; color: #6b7280; text-align: center; padding: 10px; background: #fff; }
.tp-blog-details-content .static-quote { border-left: 4px solid var(--organic-primary); background: rgba(64,145,108,.08); border-radius: 0 10px 10px 0; padding: 20px 24px; font-size: 17px; font-style: italic; color: #1f2937; margin: 28px 0; }
.tp-blog-details-content .static-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
.tp-blog-details-content .static-logos img { background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 10px; padding: 18px; width: 100%; height: 96px; object-fit: contain; filter: grayscale(1); transition: filter .3s ease-in-out; }
.tp-blog-details-content .static-logos img:hover { filter: grayscale(0); }
@media (max-width: 767px) {
  .tp-blog-details-content .static-grid { grid-template-columns: 1fr; }
  .tp-blog-details-content .static-stats { grid-template-columns: repeat(2, 1fr); }
  .tp-blog-details-content .static-logos { grid-template-columns: repeat(2, 1fr); }
}
/* Fallback cho noi dung cu chua co class static-*: tu dong nhan dien khoi 3 cot, 4 cot va anh */
.tp-blog-details-content figure { margin: 28px auto; max-width: 820px; text-align: center; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.08); }
.tp-blog-details-content figure img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; }
.tp-blog-details-content figure p { margin: 0; }
.tp-blog-details-content figcaption { font-size: 13px; color: #6b7280; padding: 10px 16px; background: #fff; }
/* 3 card moc thoi gian: div cha co 3 div con */
.tp-blog-details-content > div:has(> div:nth-child(3):last-child):not(.static-grid):not(.static-stats) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; }
.tp-blog-details-content > div:has(> div:nth-child(3):last-child) > div { background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 10px; padding: 22px; }
.tp-blog-details-content > div:has(> div:nth-child(3):last-child) > div h3 { margin-top: 0; font-size: 18px; }
/* 4 so thong ke: div cha co 4 div con */
.tp-blog-details-content > div:has(> div:nth-child(4):last-child):not(.static-grid):not(.static-stats) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: var(--organic-primary); border-radius: 10px; padding: 28px 20px; margin: 32px 0; text-align: center; }
.tp-blog-details-content > div:has(> div:nth-child(4):last-child) > div { background: transparent; border: 0; padding: 0; }
.tp-blog-details-content > div:has(> div:nth-child(4):last-child) > div strong { display: block; font-family: 'Barlow Condensed', 'Afacad', sans-serif; font-size: 32px; color: #fff; line-height: 1.2; }
.tp-blog-details-content > div:has(> div:nth-child(4):last-child) > div span { font-size: 14px; color: rgba(255,255,255,.85); }
.tp-blog-details-content blockquote { border-left: 4px solid var(--organic-primary); background: rgba(64,145,108,.08); border-radius: 0 10px 10px 0; padding: 20px 24px; font-style: italic; margin: 28px 0; }
@media (max-width: 991px) {
  .tp-blog-details-content > div:has(> div:nth-child(3):last-child) { grid-template-columns: 1fr; }
  .tp-blog-details-content > div:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
/* ============ Phan trang kieu Nexfit (blog.html): o 40px vien + active xanh ============ */
.page-pagination { margin-top: 60px; text-align: center; }
.page-pagination ul.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.page-pagination ul li a, .page-pagination ul li span { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; color: var(--black); border: 1px solid rgba(0,0,0,.10); border-radius: 5px; min-width: 40px; height: 40px; padding: 0 12px; margin: 0 5px; font-weight: 600; font-size: 15px; line-height: 1; transition: all .3s ease-in-out; }
.page-pagination ul li.active a, .page-pagination ul li.active span, .page-pagination ul li a:hover { background: var(--organic-primary); border-color: var(--organic-primary); color: #fff; }
@media (max-width: 767px) {
  .page-pagination { margin-top: 40px; }
}
/* Footer nền nhận diện organic + chữ trắng */
.tf-footer { background: linear-gradient(180deg, #0A4A2A 0%, #0E633B 100%) !important;margin-top: 60px;}
.tf-footer .footer-body { background: transparent !important; }
.tf-footer .footer-bottom { background: rgba(0,0,0,0.18) !important; border-top:1px solid rgba(255,255,255,0.15); padding:18px 0; }
.tf-footer, .tf-footer p, .tf-footer .h6, .tf-footer .caption, .tf-footer .link, .tf-footer a,
.tf-footer .footer-heading, .tf-footer .footer-menu-list a, .tf-footer .footer-contact a { color:#fff !important; }
.tf-footer .footer-menu-list a:hover, .tf-footer a.link:hover { color:var(--organic-light) !important; }
.tf-footer .br-line { background:rgba(255,255,255,0.2) !important; }
.tf-footer .form-control { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.25); color:#fff; }
.tf-footer .form-control::placeholder { color:rgba(255,255,255,0.6); }
.tf-footer .tf-btn.style-line { border-color:rgba(255,255,255,0.4); color:#fff; }
.footer-col-block .footer-heading { color:#fff !important; }
/* Ngày đăng bài: text xám + icon lịch, bỏ nền đen badge */
.entry_date_text { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:#8a8f98; }
.entry_date_text .icon { font-size:14px; color:var(--organic-secondary); }
/* Thoi gian (ngay dang) dong bo 14px toan site */
.entry_date, .entry-date, .post-date, time.entry-date { font-size: 14px; }
body { background: var(--organic-bg); }
/* Logo SVG: header 60px, footer 64px, mobile 54px (ghi de max-height 44px + aspect-ratio mau) */
.logo-site img.logo-img, .logo-site .logo-img { height: 60px; max-height: none; width: auto; aspect-ratio: auto; display: block; }
.logo-site .logo-footer-img { height: 64px; }
.logo-site .logo-mb-img { height: 54px; }
@media (max-width: 1199px) {
  .logo-site img.logo-img, .logo-site .logo-img { height: 56px; }
}
@media (max-width: 575px) {
  .logo-site img.logo-img, .logo-site .logo-img { height: 48px; }
  .logo-site .logo-footer-img { height: 54px; }
}
/* Logo text organic thay ảnh TREND+ cũ (giữ làm dự phòng) */
.logo-text-organic { font-size:26px; font-weight:800; color:var(--organic-primary); white-space:nowrap; letter-spacing:0.3px; display:inline-flex; align-items:center; gap:6px; }
.logo-text-organic .icon { font-size:24px; }
/* Menu 1 dòng: chữ nhỏ lại, gap gọn, không wrap */
.box-nav-menu { gap:26px !important; flex-wrap:nowrap !important; }
.box-nav-menu > .menu-item > .item-link { font-size:13px !important; font-weight:600 !important; line-height:20px !important; text-transform:uppercase !important; letter-spacing:.02em !important; white-space:nowrap !important; padding-top:28px !important; padding-bottom:28px !important; gap:5px !important; }
.box-nav-menu > .menu-item > .item-link .icon { font-size:12px; }
@media (min-width: 1200px) and (max-width: 1400px) {
  .box-nav-menu { gap:16px !important; }
  .logo-text-organic { font-size:22px; }
}
/* Toolbar đáy (tf-toolbar-bottom): trải đều mọi số lượng mục */
.tf-toolbar-bottom .toolbar-item { flex: 1 0 0 !important; }
/* Mobile menu: chọn ngôn ngữ */
.mb-languages { padding:18px 24px 6px; }
.mb-languages-label { display:block; font-size:13px; font-weight:600; color:#8a8f98; margin-bottom:8px; }
.mb-languages select { height:46px; border:1px solid #e5e7eb; border-radius:8px; padding:0 14px; font-size:15px; color:var(--organic-primary); background:#fff; }
/* Mini-cart: #mz-mini-cart-wrap là div AJAX trung gian — nối lại chuỗi flex height để
   .tf-mini-cart-sroll (absolute top/bottom:0) có chiều cao, list items hiện đầy đủ */
#mz-mini-cart-wrap { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
#mz-mini-cart-wrap > .tf-mini-cart-wrap { flex:1 1 auto; min-height:0; }
/* ---- tf-mini-cart-tool (3 nút Ghi chú/Vận chuyển/Mã giảm giá) ---- */
.tf-mini-cart-bottom { position: relative; }
.popup-shopping-cart .tf-mini-cart-tool { padding: 16px 32px 12px; gap: 10px; }
.tf-mini-cart-tool .tf-mini-cart-tool-btn {
  width: 100%; padding: 9px 10px; gap: 8px; border-radius: 5px;
  border: 1px solid #e5e7eb; background: #fafaf9; color: #1f2937;
  font-size: 14px; font-weight: 600; line-height: 1.2;
}
.tf-mini-cart-tool .tf-mini-cart-tool-btn .icon { font-size: 17px; color: var(--organic-primary); }
.tf-mini-cart-tool .tf-mini-cart-tool-btn:hover { background: var(--organic-primary); color: #fff; }
.tf-mini-cart-tool .tf-mini-cart-tool-btn:hover .icon { color: #fff; }
/* Panel mở (Note / Shipping / Coupon): hiện ngay trên bottom section, bo tròn, đổ bóng */
.popup-shopping-cart .tf-mini-cart-tool-openable {
  bottom: 0; z-index: 90;
}
.popup-shopping-cart .tf-mini-cart-tool-openable.open .tf-mini-cart-tool-content {
  box-shadow: 0px -8px 24px rgba(0,0,0,0.10);
}
.popup-shopping-cart .tf-mini-cart-tool-openable .tf-mini-cart-tool-content {
  padding: 24px 32px 28px; border-top: 1px solid #e5e7eb; background: #fff; z-index: 80;
}
.popup-shopping-cart .tf-mini-cart-tool-openable .tf-mini-cart-tool-text { margin-bottom: 16px; font-size: 18px; }
.popup-shopping-cart .tf-mini-cart-tool-openable .tf-mini-cart-tool-content .field { margin-bottom: 16px; }
.popup-shopping-cart .tf-mini-cart-tool-openable textarea {
  height: 96px; border-radius: 5px; border: 1px solid #e5e7eb; padding: 12px 16px;
  font-size: 14px; color: #1f2937; margin-bottom: 16px; width: 100%;
}
.popup-shopping-cart .tf-mini-cart-tool-openable input[type="text"] {
  height: 46px; border-radius: 5px; border: 1px solid #e5e7eb; padding: 0 16px;
  font-size: 14px; color: #1f2937; width: 100%; margin-bottom: 16px;
}
.popup-shopping-cart .tf-mini-cart-tool-openable .tf-cart-tool-btns { gap: 10px; flex-direction: column; display: flex; }
.popup-shopping-cart .tf-mini-cart-tool-openable .tf-cart-tool-btns .tf-btn { width: 100%; justify-content: center; }
/* Coupon: CSS mẫu chờ class .coupon — thêm cho khớp panel mã giảm giá của site */
.popup-shopping-cart .tf-mini-cart-tool-openable.add-gift input[type="text"] { margin-bottom: 16px; }
/* Overlay của panel: trong suốt nhưng chặn click vùng ngoài */
.popup-shopping-cart .tf-mini-cart-tool-openable.open > .overlay { opacity: .25; visibility: visible; }
/* ============ Nút kiểu Nexfit: bo 5px + mũi tên phải + fill xiên khi hover ============ */
.tf-btn {
  border-radius: 5px;
  padding: 15px 58px 15px 28px;
  font-size: 16px; line-height: 1.4;
  background-color: var(--organic-btn);
  border-color: var(--organic-btn);
  color: var(--organic-btn-text);
  overflow: hidden; z-index: 1;
  transition: color .4s ease-in-out, border-color .4s ease-in-out, background-color .4s ease-in-out;
}
.tf-btn:hover { color: #fff; border-color: var(--organic-primary); }
.tf-btn::before {
  content: "\e915"; font-family: 'icomoon'; font-weight: 400; font-size: 20px; line-height: 1;
  position: absolute; top: 50%; right: 22px; transform: translateY(-50%);
  transition: transform .4s ease-in-out; z-index: 1;
}
.tf-btn:hover::before { transform: translate(5px, -50%); }
.tf-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60px; width: 0; height: 100%;
  transform: skewX(45deg); background: var(--organic-primary);
  transition: left .4s ease-in-out, width .4s ease-in-out; z-index: -1;
}
.tf-btn:hover::after { left: 0; width: 100%; }
.tf-btn.animate-btn::after { background: var(--organic-primary); background-image: none; animation: none; }
.tf-btn.animate-btn:hover::after { animation: none; left: 0; width: 100%; }
/* Nút đã có icon riêng: không thêm mũi tên */
.tf-btn:has(.icon)::before { display: none; }
.tf-btn:has(.icon) { padding-right: 28px; }
/* Nut Mua ngay (btn-primary): nen trong suot kieu btn-border mau, hover fill dam */
.tf-btn.btn-primary { background: transparent; border: 1px solid var(--organic-primary); color: var(--organic-primary); }
.tf-btn.btn-primary:hover { background: var(--organic-primary); border-color: var(--organic-primary); color: #fff; }
/* Bien the vien/trang: hover fill dam + chu trang (dong bo) */
.tf-btn.btn-white:hover, .tf-btn.style-line:hover, .tf-btn.btn-outline-dark:hover, .tf-btn.style-transparent:hover { color: #fff; background: var(--organic-primary); border-color: var(--organic-primary); }
/* Nút cỡ nhỏ */
.tf-btn.type-very-small, .tf-btn.type-small-5 { padding: 8px 42px 8px 18px; font-size: 14px; }
.tf-btn.type-very-small::before, .tf-btn.type-small-5::before { font-size: 15px; right: 16px; }
/* Chip chức năng (lọc): chỉ đồng bộ bo góc, giữ nguyên cấu trúc */
.tf-btn-filter { border-radius: 5px; }
/* Link kiểu readmore của mẫu: mũi tên + gạch chân co lại */
.tf-btn-link { position: relative; display: inline-flex; align-items: center; padding-right: 32px; font-weight: 600; color: var(--black); }
.tf-btn-link::before {
  content: "\e915"; font-family: 'icomoon'; font-size: 19px; line-height: 1;
  position: absolute; right: 0; top: 50%; transform: translate(-2px, -50%);
  transition: transform .4s ease-in-out;
}
.tf-btn-link:hover { color: var(--organic-primary); }
.tf-btn-link:hover::before { transform: translate(2px, -50%); }
.tf-btn-link::after {
  content: ""; position: absolute; bottom: -3px; left: 0; width: calc(100% - 32px);
  border-bottom: 1px solid currentColor; transition: width .5s ease-in-out;
}
.tf-btn-link:hover::after { width: 0; }
/* ============ Footer newsletter kiểu Nexfit: khung viền + ô vuông mũi tên ============ */
.footer-newsletter-form .newsletter-group {
  display: flex; align-items: stretch;
  border: 1px solid rgba(255,255,255,.2); border-radius: 5px; padding: 5px;
  background: rgba(255,255,255,.05);
  transition: border-color .3s ease-in-out;
}
.footer-newsletter-form .newsletter-group:focus-within { border-color: var(--organic-secondary); }
.footer-newsletter-form .newsletter-input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; box-shadow: none;
  color: #fff; font-size: 15px; padding: 8px 14px;
}
.footer-newsletter-form .newsletter-input::placeholder { color: rgba(255,255,255,.55); }
.newsletter-btn {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--organic-btn); color: var(--organic-btn-text); border: 0; border-radius: 5px; cursor: pointer;
  font-size: 18px; transition: background-color .3s ease-in-out;
}
.newsletter-btn i { transition: transform .3s ease-in-out; }
.newsletter-btn:hover { background: #fff; }
.newsletter-btn:hover i { transform: translateX(3px); }
.newsletter-btn:disabled { opacity: .6; cursor: default; }
/* Form mã giảm giá gọn như newsletter (nền sáng) */
.coupon-group {
  display: flex; align-items: stretch;
  border: 1px solid #e2e5ea; border-radius: 5px; padding: 5px; background: #fff;
  transition: border-color .3s ease-in-out;
  max-width: 520px;
}
.coupon-group:focus-within { border-color: var(--organic-secondary); }
.coupon-group .coupon-input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; box-shadow: none;
  color: #1f2937; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 14px;
}
.coupon-group .coupon-input::placeholder { color: #9ca3af; font-weight: 400; text-transform: none; letter-spacing: 0; }
.newsletter-note { font-size: 13px; color: rgba(255,255,255,.6); margin: 10px 0 0; }
/* Footer + topbar dong bo 16px toan bo text/link */
.tf-footer, .tf-footer p, .tf-footer a, .tf-footer .h6, .tf-footer .caption,
.tf-footer .link, .tf-footer .footer-heading, .tf-footer .footer-menu-list a,
.tf-footer .footer-contact a, .tf-footer span, .tf-footer .newsletter-note { font-size: 15px; }
.tf-topbar, .tf-topbar p, .tf-topbar a, .tf-topbar .h6,
.tf-topbar .link, .tf-topbar select { font-size: 15px; }
/* Nut ngon ngu bootstrap-select: ghi de clamp(16px,2vw,18px) cua mau ve 15px */
.tf-topbar .tf-dropdown-select .filter-option-inner-inner,
.tf-topbar .filter-option-inner-inner { font-size: 15px; line-height: 22px; font-weight: 400; }
.tf-topbar .tf-dropdown-select .dropdown-menu a .text,
.tf-topbar .dropdown-menu .text { font-size: 15px; line-height: 22px; }
/* Dropdown ngon ngu tu viet: gon, khong thua o, khong tran */
.mz-lang-select { position: relative; }
.mz-lang-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 4px 0; cursor: pointer; color: var(--organic-btn-text); font-size: 15px; font-weight: 500; line-height: 1.4; }
.mz-lang-btn .icon { font-size: 12px; transition: transform .25s ease-in-out; }
.mz-lang-select.open .mz-lang-btn .icon { transform: rotate(180deg); }
.mz-lang-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 160px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.14); display: none; z-index: 200; }
.mz-lang-select.open .mz-lang-menu { display: block; }
.mz-lang-menu li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 6px; font-size: 15px; color: #1f2937; white-space: nowrap; }
.mz-lang-menu li a:hover { background: #f3f4f6; color: var(--organic-primary); }
.mz-lang-menu li.active a { color: var(--organic-primary); font-weight: 600; }
.mz-lang-menu li.active a::after { content: "\e915"; font-family: 'icomoon'; font-size: 14px; }
/* Footer polish theo mẫu: heading trắng + vạch chân copyright */
.footer-heading { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 22px; }
.footer-col-block .caption { margin-bottom: 26px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
/* Coupon trong sidebar: khung joined + nút gọn */
.sidebar-coupon { border-bottom: 1px solid rgba(0,0,0,.10); margin-bottom: 30px; padding-bottom: 30px; }
.coupon-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--black); }
.coupon-join { display: flex; align-items: stretch; gap: 4px; border: 1px solid rgba(0,0,0,.10); border-radius: 5px; padding: 4px; background: #fff; }
.coupon-join .coupon-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; box-shadow: none; padding: 8px 12px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #1f2937; }
.coupon-join .coupon-input::placeholder { color: #9ca3af; font-weight: 400; text-transform: none; letter-spacing: 0; }
.coupon-apply-sm.tf-btn { padding: 10px 20px; font-size: 14px; flex: 0 0 auto; }
.coupon-apply-sm.tf-btn::before { display: none; }
/* ============ Font tương đương Nexfit (đủ tiếng Việt): Be Vietnam Pro + Barlow Condensed ============ */
body, h6, .h6, .font-main, .sib-form, .hover-tooltip .tooltip,
input, textarea, select, button, a, .link {
  font-family: 'Be Vietnam Pro', 'Afacad', sans-serif;
}
body {
  font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%;
}
p { line-height: 1.6; }
/* Dong bo: h6 ve 15px (mau de 18px gay lech) + tat ca H mot font Barlow Condensed.
   Gia giu nguyen 18/14 theo scale da duyet. Tieu de card/detail giu 18px. */
h6, .h6 { font-size: 15px; font-family: 'Barlow Condensed', 'Afacad', sans-serif; }
.price-new { font-size: 18px; font-weight: 700; }
.price-old { font-size: 14px; }
/* Tieu de card goi trong the H that: reset khung, giu size 21px */
.mz-h-title { margin: 0; padding: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
/* Tieu de noi dung bai viet (H1 detail): noi bat nhung hai hoa */
.post-detail-title { font-size: clamp(26px, 3vw, 32px); margin-bottom: 16px; }
h2.product-info-name { font-size: clamp(26px, 3vw, 32px); }
/* Detail SP: nhip deu 20px + co chu hop ly (gia to dam, cu gach xam) */
.tf-product-info-wrap .tf-product-info-list { gap: 20px; }
.tf-product-info-wrap h2.product-info-name { font-weight: 600; margin-bottom: 0; }
.tf-product-info-wrap .product-info-meta, .tf-product-info-wrap .tf-product-heading { margin-bottom: 0; }
.tf-product-info-list > p.text-main { margin-bottom: 0; }
.product-info-price .price-new { font-size: 30px; font-weight: 700; color: var(--black); }
.product-info-price .price-old { font-size: 16px; color: #8a8f98; text-decoration: line-through; }
.product-info-price .badges-on-sale { font-size: 13px; font-weight: 700; }
.tf-product-total-quantity .group-btn { gap: 12px; }
/* Hang mua kieu product-single: qty + 2 nut 1 dong, nut gon khong mui ten */
.tf-product-total-quantity.product-buy-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.tf-product-total-quantity.product-buy-row .wg-quantity { border: 1px solid rgba(0,0,0,.10); border-radius: 5px; padding: 6px 12px; gap: 10px; align-items: center; }
.tf-product-total-quantity.product-buy-row .tf-btn { flex: 1 1 150px; justify-content: center; padding: 15px 20px; }
.tf-btn.btn-no-arrow { padding: 15px 30px; }
.tf-btn.btn-no-arrow::before { display: none; }
h3.mz-h-title, .mz-title { font-size: 18px; line-height: 1.4; }
/* Sticky sidebar toan site (desktop): list tin, trang tinh, shop, gio hang, checkout, detail */
@media (min-width: 1200px) {
  .canvas-sidebar.sidebar-filter { position: sticky; top: 24px; }
  .fl-sidebar-cart.sticky-top { top: 24px; }
  .blog-sidebar-sticky, .mz-sidebar-sticky { position: sticky; top: 24px; align-self: flex-start; }
}
/* Ten SP trong quickview (modal): 24px nhu card */
.modal-quick-view .product-info-name { font-size: 24px; line-height: 1.4; }
/* Nut xem chi tiet: chu thuong 14px, cach deu */
.tf-btn-line { font-size: 14px; text-transform: none; letter-spacing: 0; line-height: 1.5; margin-top: 12px; }
/* Ten san pham (card + trang chi tiet): 18px */
.card-product .name-product, .product-info-name, .mz-title { font-size: 20px; line-height: 1.4; }
/* Noi dung chi tiet (bai viet/san pham) giu chu 16px de doc */
.post-body, .post-body p, .tp-blog-details-content .post-body { font-size: 16px; }
.font-sora, .wg-quantity .quantity-product {
  font-family: 'Barlow Condensed', 'Afacad', sans-serif;
}
h1, h2, h3, h4, h5, h1 a, h2 a, h3 a, h4 a, h5 a, .h1, .h2, .h3, .h4, .h5, .tp-ff-heading {
  font-weight: 600; line-height: 1.25; letter-spacing: .01em;
}
/* Input chon size (mau dung Sora da go): chu body du Viet */
.widget-size .box-title-size .number-size {
  font-family: 'Be Vietnam Pro', 'Afacad', sans-serif;
}
h1 { font-size: clamp(34px, 4.5vw, 42px); }
h2 { font-size: clamp(28px, 3.2vw, 32px); }
h3 { font-size: 22px; }
.tf-btn { font-family: 'Barlow Condensed', 'Afacad', sans-serif; font-weight: 600; letter-spacing: .03em; }
/* ---- Size theo scale mẫu: title card 18-19px, giá 18px, sub-label 14px uppercase ---- */
.mz-title { font-size: 19px; line-height: 1.4; font-weight: 600; }
.mz-price-current { font-size: 18px; font-weight: 700; }
.mz-price-old { font-size: 14px; }
.sub-title { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 767px) {
  body { font-size: 14px; }
}
/* Form liên hệ kiểu mẫu: ô nền xám không viền + nút vuông */
#contact_form .tp-input, #contact_form .tp-textarea, #contact_form .form-control {
  background: #f3f4f6; border: 1px solid transparent; border-radius: 5px; padding: 15px 20px;
}
#contact_form .tp-input:focus, #contact_form .tp-textarea:focus, #contact_form .form-control:focus {
  background: #fff; border-color: var(--organic-secondary); box-shadow: 0 0 0 3px rgba(64,145,108,.15);
}
#contact_form label, #contact_form .form-label { font-weight: 600; font-size: 15px; color: #111827; margin-bottom: 8px; }
#contact_form .tp-btn-sm { background: var(--organic-btn); color: var(--organic-btn-text); border: 0; border-radius: 5px; padding: 15px 28px; }
/* Mobile <576px: nút gọn lại */
@media (max-width: 576px) {
  .tf-btn { padding: 13px 50px 13px 22px; font-size: 15px; }
  .tf-btn::before { font-size: 18px; right: 18px; }
  .tf-btn:has(.icon) { padding-right: 22px; }
  .tf-mini-cart-tool .tf-mini-cart-tool-btn { gap: 5px; padding: 8px 6px; font-size: 12.5px; border-radius: 5px; }
  .tf-mini-cart-tool .tf-mini-cart-tool-btn .icon { font-size: 15px; }
  .popup-shopping-cart .tf-mini-cart-tool { padding: 12px 16px 10px; gap: 6px; }
  .popup-shopping-cart .tf-mini-cart-tool-openable .tf-mini-cart-tool-content { padding: 20px 16px 24px; }
}
    .post-body img,
    .post-body iframe {
        max-width: 100%;
    }

    .post-body img {
        height: auto !important;
    }

    .loading {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        background-color: rgba(0, 0, 0, .75);
    }

    .loading .inner {
        display: block;
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        text-align: center;
    }

    .tpproduct__info {
        left: auto;
        right: 17px;
    }

    /* Khung anh list tin tuc dang row: VUONG 1/1 dong nhat */
    .article-blog.style-row .entry_image {
        display:block; overflow:hidden;
        flex:0 0 44%; max-width:480px;
        aspect-ratio: 1 / 1;
    }
    @media (max-width: 767px) {
        .article-blog.style-row .entry_image { flex:none; max-width:100%; }
    }
    .article-blog.style-row .entry_image img {
        width:100%; height:100% !important; object-fit:cover; object-position:center; display:block;
    }
    .tpblog__thumb, .blog-item .image, .post-card .image {
        position:relative; overflow:hidden; background:#f3f4f6;
        aspect-ratio: 1/1; /* anh list VUONG dong nhat */
    }
    .tpblog__thumb img, .blog-item .image img, .post-card .image img {
        width:100%; height:100% !important; object-fit:cover; object-position:center; display:block;
    }
    @media only screen and (min-width: 1300px) {
        .tpblog__thumb img {
            height:100% !important;
        }
    }
    @media (max-width: 768px) {
        .tpblog__thumb, .blog-item .image { aspect-ratio: 1/1; }
    }

    /* Anh san pham/tin tuc (img-style4) VUONG 1/1: hien tron anh goc, khong crop lech.
       Anh upload doc (chan dung) tu cat vuong giua, hien thi dong deu moi list. */
    .hover-img4 .img-style4 img {
        height: 100% !important;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    /* Card san pham grid + sidebar recent + dong list: khung vuong 1/1 */
    .card-product_wrapper .product-img { display: block; aspect-ratio: 1 / 1; }
    .product-style_list .product-img { display: block; aspect-ratio: 1 / 1; height: auto; }
    .hover-img .img-style > img { aspect-ratio: 1 / 1; }
/* ============ Khoi header thong nhat trang trong: topbar + menu + title ============ */
/* Anh nen lay tu quan tri Banner (vi tri "Anh nen khoi header trang trong").
   Chua dang banner thi hien mau brand. */
body.page-inner .tf-topbar.bg-black {
  background-color: var(--organic-primary);
  background-image: none;
}
body.page-inner .tf-header,
body.page-inner .s-page-title {
  background-color: var(--organic-primary);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.content-wrap{
  padding: 60px 0;
}
/* Anh nen tung doan (cover): on dinh moi luc, ke ca khi trinh duyet khong ve fixed.
   (Da thu fixed de lien mach nhung Chrome hay khong ve lan dau - mo DevTools/resize moi hien.) */
body.page-inner.has-header-bg .tf-topbar.bg-black,
body.page-inner.has-header-bg .tf-header,
body.page-inner.has-header-bg .s-page-title { background-attachment: scroll; }
body.page-inner .tf-header { border-bottom: 0; }
body.page-inner .box-nav-menu > .menu-item > .item-link { color: #fff; }
body.page-inner .box-nav-menu > .menu-item > .item-link:hover { color: var(--organic-btn) !important; }
body.page-inner .box-nav-menu > .menu-item > .item-link .icon { color: #fff; }
body.page-inner .menu-item:hover > .item-link .icon { color: var(--organic-btn); transform: rotate(180deg); }
body.page-inner .nav-icon-item, body.page-inner .nav-icon-item .icon { color: #fff; }
body.page-inner .btn-mobile-menu span { background: #fff; }
body.page-inner .s-page-title .title-page,
body.page-inner .breadcrumbs-page a.link,
body.page-inner .breadcrumbs-page .current-page { color: #fff; }
body.page-inner .breadcrumbs-page .icon { color: var(--organic-btn); }
/* Duong ke ngan nhe giua menu va tieu de */
body.page-inner .tf-header { border-bottom: 1px solid rgba(255,255,255,.18); }
/* Khoang cach giua khoi mau va noi dung ben duoi */
/* Hop tac gia duoi bai viet chi tiet */
.post-author-box { display: flex; gap: 18px; align-items: flex-start; background: #F6F6F6; border: 1px solid rgba(0,0,0,.08); border-left: 4px solid var(--organic-primary, #0E633B); border-radius: 14px; padding: 22px; margin-top: 28px; }
.post-author-avatar { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--organic-primary, #0E633B); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.post-author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-author-initial { color: #fff; font-family: 'Barlow Condensed', sans-serif; font-size: 34px; font-weight: 700; line-height: 1; }
.post-author-info { flex: 1; min-width: 0; }
.post-author-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 2px; }
.post-author-name { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 700; color: var(--organic-primary, #0E633B); text-decoration: none; }
.post-author-name:hover { color: var(--organic-primary, #0E633B); text-decoration: underline; }
.post-author-bio { font-size: 15px; color: #444; margin: 6px 0 0; }
.post-author-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.post-author-phone { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: #222; text-decoration: none; }
.post-author-phone:hover { color: var(--organic-primary, #0E633B); }
.post-author-phone .icon { color: var(--organic-primary, #0E633B); }
.post-author-socials { display: inline-flex; align-items: center; gap: 8px; }
.post-author-socials a { width: 34px; height: 34px; border-radius: 50%; background: var(--organic-primary, #0E633B); color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; transition: background .2s, transform .2s; }
.post-author-socials a:hover { background: var(--organic-btn, #9CCD6A); color: #0E633B; transform: translateY(-2px); }
.post-author-soc-letter { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; line-height: 1; }
@media (max-width: 575px) {
  .post-author-box { padding: 16px; gap: 14px; }
  .post-author-avatar { flex-basis: 60px; width: 60px; height: 60px; }
  .post-author-name { font-size: 21px; }
}
/* Nut tim yeu thich */
.mz-wishlist .icon-heart { transition: color .2s, transform .2s; }
.mz-wishlist:hover .icon-heart { color: var(--organic-primary, #0E633B); }
.mz-wishlist.active { background: var(--organic-primary, #0E633B) !important; border-color: var(--organic-primary, #0E633B) !important; }
.mz-wishlist.active .icon-heart { color: #fff !important; }
.shop-wishlist { position: relative; }
.page-account-section .card { border-radius: 14px; }
/* ===== Dong bo form toan site: 1 font + 1 color + 1 size =====
   Ghi de ca mau (form input 18px bo 999px) va bootstrap .form-control.
   Dat cuoi file de dam bao thang. O so luong qty giu dang rieng. */
form input[type="text"]:not(.qty-input):not(.quantity-product), form input[type="password"], form input[type="email"]:not(.qty-input), form input[type="tel"]:not(.qty-input),
form input[type="search"]:not(.qty-input), form input[type="url"], form input[type="number"]:not(.qty-input):not(.quantity-product), form input[type="date"],
form input[type="datetime"], form input[type="datetime-local"], form input[type="month"], form input[type="time"],
form input[type="week"], form input[type="color"], form textarea, form select,
input[type="text"]:not(.qty-input):not(.quantity-product), input[type="password"], input[type="email"]:not(.qty-input), input[type="tel"]:not(.qty-input),
input[type="search"]:not(.qty-input), input[type="url"], input[type="number"]:not(.qty-input):not(.quantity-product), input[type="date"], textarea, select,
.form-control:not(.qty-input):not(.quantity-product), .form-select, .tf-select select {
  font-family: 'Be Vietnam Pro', 'Afacad', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #1f2937 !important;
  border: 1px solid #e2e5ea !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  padding: 12px 20px !important;
  outline: none !important;
  box-shadow: none !important;
}
form input::placeholder, input::placeholder, textarea::placeholder,
.form-control::placeholder {
  font-family: 'Be Vietnam Pro', 'Afacad', sans-serif !important;
  color: #9ca3af !important;
  font-size: 15px !important;
  opacity: 1 !important;
}
form input:focus, form textarea:focus, form select:focus,
input:focus, textarea:focus, select:focus,
.form-control:focus, .form-select:focus, .tf-select select:focus {
  border-color: var(--organic-secondary) !important;
  box-shadow: 0 0 0 3px rgba(64,145,108,.15) !important;
  background-color: #fff !important;
}
textarea { min-height: 120px !important; resize: vertical !important; }
select, .form-select, .tf-select select { padding-right: 42px !important; cursor: pointer !important; }
input[type="color"] { height: 50px !important; padding: 6px 10px !important; }
/* O so luong: giu dang tron, chu dam de thay ro */
.wg-quantity .qty-input, .wg-quantity .quantity-product {
  font-family: 'Be Vietnam Pro', 'Afacad', sans-serif !important;
  color: #1f2937 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
    .line-clamp-1 {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .line-clamp-2 {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .line-clamp-3 {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }
    .mz-hero-content {
  /* Nền trắng với độ trong suốt 0.3 kết hợp ánh xanh dương */
  background-color: rgba(230, 242, 255, 0.5); /* Bạn có thể điều chỉnh mã màu RGB hoặc độ đậm nhạt của sắc xanh ở đây */
  
  /* Nội dung cách lề các phía 30px */
  padding: 40px;
  
  /* Khuyến nghị thêm: Bo tròn góc nhẹ và tạo hiệu ứng bo viền mờ để nổi bật trên background chính */
  border-radius: 20px;
  backdrop-filter: blur(4px); /* Tạo hiệu ứng kính mờ (glassmorphism) cho đẹp mắt */
  -webkit-backdrop-filter: blur(4px);
}