/* Flosa custom fixes — loaded last, overrides theme cascade */

/* Collection banner: on this catalog the synced collection.image is a tall product
   photo carrying an old phone-number watermark, so stretching it into a banner looks
   broken. The original flosa.vn shows no such banner — hide it for a clean header
   (title + filters + product grid only). */
.banner-collection-header { display: none !important; }

/* ---------- TGDD-style header: logo left · search bar · cart (no account) ---------- */
.flosa-tgdd .header-upper-middle { padding: 8px 0; }
.flosa-tgdd .flexContainer-header { display: flex; align-items: center; gap: 18px; }
.flosa-tgdd .header-upper-logo { flex: 0 0 auto; margin: 0; text-align: left; }
.flosa-tgdd .header-upper-logo .logoimg { max-height: 50px; width: auto; display: block; }
.flosa-tgdd .header-upper-search { flex: 1 1 auto; max-width: 640px; }
.flosa-tgdd .header-upper-search .search-box { position: relative; }
.flosa-tgdd .header-upper-search .searchform { display: flex; align-items: stretch; border: 1.5px solid #8dc63f; border-radius: 24px; overflow: hidden; background: #fff; }
.flosa-tgdd .header-upper-search input.search-input { flex: 1; border: none; background: transparent; padding: 11px 18px; font-size: 14px; outline: none; box-shadow: none; height: auto; margin: 0; width: 100%; }
.flosa-tgdd .header-upper-search .btn-search { border: none; background: #8dc63f; padding: 0 18px; cursor: pointer; display: flex; align-items: center; border-radius: 0; }
.flosa-tgdd .header-upper-search .btn-search svg { width: 18px; height: 18px; fill: #fff; }
.flosa-tgdd .header-upper-search .ajaxSearchResults { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); z-index: 1000; max-height: 70vh; overflow: auto; }
.flosa-tgdd .header-upper-icon { flex: 0 0 auto; margin-left: auto; }
.flosa-tgdd .header-wrap-icon { display: flex; align-items: center; }
.flosa-tgdd .header-action_cart .header-action__link { display: flex; align-items: center; gap: 8px; position: relative; }
.flosa-tgdd .header-action_cart .svg-ico-cart { width: 24px; height: 24px; }
.flosa-tgdd .header-action_cart .header-action_label { font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; }
.flosa-tgdd .header-action_account { display: none !important; }
/* nav menu below the header: left-align it with the logo (theme centers it via
   .menu-desktop{text-align:center} + a .text-center class with !important). */
.flosa-tgdd-header .menu-desktop,
.flosa-tgdd-header .menu-desktop .navbar-mainmenu,
.flosa-tgdd-header .menu-desktop #nav,
.flosa-tgdd-header .menu-desktop .main-nav,
.flosa-tgdd-header .menu-desktop .main-nav > ul { text-align: left !important; }
.flosa-tgdd-header .header-navbar-menu { justify-content: flex-start; }
.flosa-tgdd-header .menu-desktop .main-nav > ul > li:first-child > a { margin-left: 0; }

/* Footer: keep the (nested) Bootstrap grid inside the container on wide screens.
   The col-md-5 wraps a nested .row whose -15px margins can stick out if a col's
   padding is missing → the 4th column (Xu hướng) overflowing off the right. */
.footer .container-fluid { margin-left: auto; margin-right: auto; }
.footer .row { margin-left: 0; margin-right: 0; }
.footer [class*="col-"] { padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
.main-footer { overflow-x: clip; }
@media (max-width: 767px) {
  .flosa-tgdd .flexContainer-header { flex-wrap: wrap; gap: 10px; }
  .flosa-tgdd .header-upper-navbar { flex: 0 0 auto; order: 1; margin: 0; }
  .flosa-tgdd .header-upper-logo { order: 2; flex: 1 1 auto; text-align: center; }
  .flosa-tgdd .header-upper-icon { order: 3; }
  .flosa-tgdd .header-upper-search { order: 4; flex: 1 0 100%; max-width: none; }
  .flosa-tgdd .header-upper-logo .logoimg { max-height: 40px; margin: 0 auto; }
  .flosa-tgdd .header-action_cart .header-action_label { display: none; }
}

/* Header: account icon links to the customer account (dropdown hidden) */
.header-action_account .header-action_dropdown { display: none !important; }

/* Footer policy links bar */
.footer-policy-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 4px 0 10px; }
.footer-policy-links a { color: inherit; opacity: .85; padding: 2px 14px; font-size: 13px; border-right: 1px solid rgba(255,255,255,.25); }
.footer-policy-links a:last-child { border-right: none; }
.footer-policy-links a:hover { opacity: 1; text-decoration: underline; }
@media(max-width:600px){ .footer-policy-links a { border-right: none; padding: 2px 10px; } }

/* Collection filter bar */
.flosa-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 16px; padding: 12px 14px; background: #fafafa; border: 1px solid #eee; border-radius: 10px; }
.flosa-filter-bar .ff-label { font-weight: 600; color: #444; }
.flosa-filter-bar select, .flosa-filter-bar input { padding: 8px 10px; border: 1px solid #ddd; border-radius: 7px; font: inherit; }
.flosa-filter-bar input { width: 120px; }
.flosa-filter-bar .ff-btn { background: #5bbd2a; color: #fff; border: none; padding: 8px 18px; border-radius: 7px; font-weight: 600; cursor: pointer; }
.flosa-filter-bar .ff-btn:hover { background: #4aa01f; }
.flosa-filter-bar .ff-clear { color: #c0392b; font-size: 13px; text-decoration: none; margin-left: 4px; }

/* Related products spacing */
.list-productRelated { margin-top: 18px; }
.list-productRelated .heading-title h2 { position: relative; display: inline-block; }

/* First-visit offer popup */
#flosa-promo-popup { position: fixed; inset: 0; background: rgba(15,20,30,.5); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
#flosa-promo-popup .fpp-card { position: relative; background: #fff; border-radius: 16px; max-width: 380px; width: 100%; padding: 30px 26px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
#flosa-promo-popup .fpp-x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 24px; color: #999; cursor: pointer; line-height: 1; }
#flosa-promo-popup .fpp-ic { font-size: 42px; }
#flosa-promo-popup h3 { font-size: 20px; margin: 8px 0 6px; color: #252a2b; }
#flosa-promo-popup p { color: #555; font-size: 14px; margin: 0 0 16px; }
#flosa-promo-popup .fpp-row { display: flex; gap: 8px; }
#flosa-promo-popup .fpp-row input { flex: 1; padding: 11px 12px; border: 1px solid #ddd; border-radius: 8px; font: inherit; }
#flosa-promo-popup .fpp-row button { background: #5bbd2a; color: #fff; border: none; padding: 11px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#flosa-promo-popup #fpp-msg { margin-top: 10px; font-size: 13.5px; }

/* Flash sale countdown bar + flash badge */
#flosa-flash-bar { position: sticky; top: 0; z-index: 9999; background: linear-gradient(90deg,#e23b3b,#ff7a18); color: #fff; text-align: center; padding: 8px 12px; font-size: 14px; font-weight: 600; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
#flosa-flash-bar .ff-ic { font-size: 16px; }
#flosa-flash-bar .ff-cd { background: rgba(0,0,0,.2); padding: 2px 10px; border-radius: 20px; font-variant-numeric: tabular-nums; }
.product-sale.is-flash { background: #e23b3b !important; }

/* Floating widgets: ẩn các icon nổi rối (call/mail/messenger/share) — NHƯNG GIỮ
   nút Zalo nổi (.zalo-call ở footer) để khách chat/đặt hàng trên mọi trang. */
.phonering-alo-phone, #phonering-alo-phoneIcon,
.addThis_listSharing, .actionToolbar_mobile, .harafunnel-mb,
.area_phone_contact { display: none !important; }

/* ---------- Scroll performance (reduce "giật") ----------
   The theme reveals blocks on scroll via jQuery handlers that read layout every
   scroll frame (scroll.scroll-movers / scroll.split-slider). We unbind those in
   master-include and reveal all content here so nothing depends on the animation. */
.animation-tran, .site-animation, .wrapper-heading-home.animation-tran {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
/* Isolate paint/layout of repeating cards so scrolling repaints less */
.pro-loop .product-block, .product-block.product-resize { contain: layout paint style; }

/* Product gallery images: the theme sets .owl-item img{width:auto} with no
   max-width, so on mobile the main image loaded at full 'master' resolution and
   overflowed the screen (giant zoom). Constrain every product/slider image to fit. */
.product-gallery img, .product-image-detail img, .product-full-img img,
.product-image-feature, .owl-carousel .owl-item img,
.box__product-gallery img { max-width: 100% !important; height: auto !important; }

/* Mobile: keep ONE search bar (the TGDD inline one). Hide the theme's duplicate
   mobile search bar that used to be toggled by the (now removed) search icon. */
@media (max-width: 767px) {
  .flosa-tgdd-header .header-search-mobile { display: none !important; }

  /* No horizontal scroll on mobile; make the search bar FIT the viewport (don't clip the button) */
  html, body { overflow-x: hidden; max-width: 100%; }
  .flosa-tgdd .flexContainer-header { max-width: 100%; }
  /* Bulletproof: form = viewport trừ lề (100vw-24px), độc lập với ancestor/font.
     input co bằng flex-basis 0 (luôn nhường chỗ), nút search cố định 46px → LUÔN hiện. */
  .flosa-tgdd .header-upper-search { flex: 1 0 100%; width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
  .flosa-tgdd .header-upper-search .search-box { width: 100%; max-width: 100%; box-sizing: border-box; }
  .flosa-tgdd .header-upper-search .searchform { display: flex !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 0 auto !important; box-sizing: border-box !important; }
  .flosa-tgdd .header-upper-search input.search-input { flex: 1 1 0 !important; min-width: 0 !important; width: 0 !important; }
  .flosa-tgdd .header-upper-search .btn-search { flex: 0 0 46px !important; width: 46px !important; padding: 0 !important; justify-content: center; }
  /* Ancestor tràn: bootstrap container padding + row margin âm làm bar rộng hơn viewport → cắt nút. */
  .flosa-tgdd .header-upper-middle .container-fluid { overflow: visible; padding-left: 0 !important; padding-right: 0 !important; max-width: 100vw !important; }
  .flosa-tgdd .flexContainer-header { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
  /* iOS tự phóng to khi focus input cỡ chữ < 16px → khó chịu khi nhập. Ép 16px để TẮT auto-zoom. */
  input, select, textarea, .search-input, .form-control { font-size: 16px !important; }
  /* search results page: no horizontal overflow */
  #layout-search, .searchPage, .searchPage .container-fluid, .searchPage .row { max-width: 100%; overflow-x: hidden; }

  /* Product gallery on mobile: the theme's flickity slider lives in a fixed 70vh box
     with overflow:visible → the image was vertically centred (huge blank gap) and
     overflowed downward, overlapping the title/price/description. Disable the mobile
     slider (flickity watchCSS reads :after content) and stack the images as simple
     fitted blocks so the gallery is exactly as tall as its images. */
  .box__product-gallery.scroll .site-box-content:after { content: '' !important; }
  .box__product-gallery { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; }
  .box__product-gallery .flickity-viewport { height: auto !important; }
  .slide_product, .slide_product li.gallery-item { height: auto !important; display: block !important; float: none !important; width: 100% !important; }
  .slide_product li.gallery-item { margin: 0 0 8px !important; }
  .slide_product li.gallery-item img { width: 100% !important; height: auto !important; display: block; margin: 0 auto; }
  .product-image__button, .slide_product .flickity-page-dots { display: none !important; }
}

/* ---------- Cart page tidy-up ---------- */
#layout-cart .wrapper-cart-detail > .container-fluid { max-width: 1160px; margin: 0 auto; }
#layout-cart .heading-page { text-align: center; margin: 6px 0 22px; }
#layout-cart .heading-page h1 { font-size: 26px; }
#layout-cart .wrapbox-content-cart { align-items: flex-start; }
/* item list as a clean card */
#layout-cart .main-content-cart .table-cart { border: 1px solid #ececec; border-radius: 12px; overflow: hidden; background: #fff; }
#layout-cart .table-cart thead th { background: #fafafa; font-size: 12px; color: #999; font-weight: 600; padding: 12px 16px; }
#layout-cart .line-item-container > td { border-bottom: 1px solid #f2f2f2; vertical-align: middle; padding: 16px; }
#layout-cart .line-item-container:last-child > td { border-bottom: none; }
#layout-cart .table-cart .product_image img,
#layout-cart .table-cart td.image img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid #f0f0f0; }
#layout-cart td.item .name a, #layout-cart td.item h3 a, #layout-cart td.item .product-name a { font-size: 15px; font-weight: 600; color: #252a2b; }
#layout-cart .variant_title { color: #8a8f98; font-size: 13px; }
/* quantity stepper */
#layout-cart .qty-click { display: inline-flex; align-items: center; border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; margin: 8px 0 4px; background: #fff; }
#layout-cart .qty-click .qty-btn { width: 34px; height: 34px; border: none; background: #f6f7f8; cursor: pointer; font-size: 17px; line-height: 1; color: #555; padding: 0; }
#layout-cart .qty-click .qty-btn:hover { background: #ebebeb; }
#layout-cart .qty-click input.line-item-qty { width: 46px; height: 34px; border: none; border-left: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; text-align: center; border-radius: 0; padding: 0; font-weight: 600; }
#layout-cart .price { margin: 4px 0 0; }
#layout-cart .price .text { color: #8a8f98; font-size: 13px; margin-right: 6px; }
#layout-cart .line-item-total, #layout-cart .price .line-item-total { font-weight: 700; color: #e23b3b; font-size: 15px; }
#layout-cart td.remove a img { width: 15px; height: 15px; opacity: .45; }
#layout-cart td.remove a img:hover { opacity: 1; }
/* note + policy row */
#layout-cart .sidebox-group { margin-top: 18px; }
#layout-cart .sidebox-group h4 { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: #252a2b; }
#layout-cart .checkout-note textarea { width: 100%; border: 1px solid #e2e2e2; border-radius: 8px; padding: 11px 13px; resize: vertical; background: #fff; }
#layout-cart .cart-col-left .main-content-cart { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 4px 16px; }
#layout-cart .main-content-cart .table-cart { border: none; border-radius: 0; }
#layout-cart .sidebox-policy ul { padding-left: 18px; color: #555; font-size: 13.5px; line-height: 1.7; }
/* order-summary box (right) */
#layout-cart .sidebox-order { border: 1px solid #ececec; border-radius: 12px; background: #fff; overflow: hidden; }
#layout-cart .sidebox-order-inner { padding: 4px 4px 8px; }
#layout-cart .sidebox-order_title h3 { font-size: 16px; }
#layout-cart .sidebox-order_total .total-price { color: #e23b3b; font-weight: 700; }

/* Hoa bán chạy: 4 cột desktop, 2 cột mobile (mobile giữ col-xs-6 = 2 sẵn) */
@media (min-width: 768px) {
  #section-bestsellers .content-product-list .pro-loop { width: 25% !important; float: left; }
}

/* Bỏ nút "Mua ngay" trên trang danh sách (giỏ/tìm kiếm/danh mục/bán chạy) — cả card
   vẫn click sang trang sản phẩm để khách chọn biến thể/đặt. */
.content-product-list .button-add { display: none !important; }

/* Bỏ hiệu ứng hover ĐỔI ẢNH sản phẩm (theme đảo sang ảnh thứ 2 khi rê chuột) —
   chỉ hiển thị 1 ảnh chính, không đổi. */
.product-img picture:nth-of-type(2) { display: none !important; }
.pro-loop:hover .product-img picture:nth-of-type(1) { opacity: 1 !important; visibility: visible !important; }

/* Bài viết: bỏ ảnh thumbnail (hero) đầu bài — theo yêu cầu. */
#article .box-article-heading .background-img { display: none !important; }

/* Nút "Xem thêm" thay cho shortcode [collection-url] thô trong bài viết. */
.blog-col-link { display: inline-block; margin: 8px 0; padding: 9px 20px; background: #5bbd2a; color: #fff !important; border-radius: 22px; font-weight: 600 !important; text-decoration: none; font-size: 14px; }
.blog-col-link:hover { background: #4aa01f; }

/* Blog bài viết: TẠM bỏ TOC "Xem nhanh" + sidebar trái, căn giữa ~800px (mobile hợp). */
#article #table-content-container, #article .table-content-fixed, #article #clone-table { display: none !important; }
#article .sidebar-blog { display: none !important; }
#article .wrapper-row .row > div:has(> .sidebar-blog) { display: none !important; }
#article .wrapper-row .row > div:has(> .content-page),
#article [class*="col-md-9"] { width: 100% !important; max-width: 820px !important; flex: 0 0 100% !important; margin-left: auto !important; margin-right: auto !important; float: none !important; }
@media (max-width: 860px) {
  #article .wrapper-row .row > div:has(> .content-page),
  #article [class*="col-md-9"] { max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; }
}

/* ---------- Đồng nhất font: ép NỘI DUNG (bài viết/mô tả/trang) về Quicksand ----------
   Nội dung import từ Haravan có inline font-family (Arial/Georgia/Times…) làm lệch font.
   Ép về Quicksand ở các thẻ chữ (KHÔNG dùng * để tránh phá icon FontAwesome/Glyphicons). */
.main-article-content, .main-article-content p, .main-article-content span, .main-article-content li,
.main-article-content div, .main-article-content td, .main-article-content a, .main-article-content strong,
.main-article-content em, .main-article-content b, .main-article-content h1, .main-article-content h2,
.main-article-content h3, .main-article-content h4, .main-article-content h5, .main-article-content h6, .main-article-content blockquote,
.article-body-inner, .article-body-inner p, .article-body-inner span, .article-body-inner li, .article-body-inner div,
.article-body-inner td, .article-body-inner a, .article-body-inner strong, .article-body-inner em, .article-body-inner b,
.article-body-inner h1, .article-body-inner h2, .article-body-inner h3, .article-body-inner h4, .article-body-inner h5, .article-body-inner h6,
.rte, .rte p, .rte span, .rte li, .rte div, .rte td, .rte a, .rte strong, .rte em, .rte b, .rte h1, .rte h2, .rte h3, .rte h4,
.product-description, .product-description p, .product-description span, .product-description li, .product-description div, .product-description a, .product-description strong, .product-description b {
  font-family: 'Quicksand', sans-serif !important;
}

/* ---------- Trang danh mục kiểu Dezon: bỏ sidebar → pills lọc ngang + grid thoáng ---------- */
#collection .sidebar-fix { display: none !important; }
#collection #collection-body > [class*="col-md-9"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
#collection .flosa-filter-bar { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; background: transparent; border: none; padding: 0; margin: 6px 0 22px; }
/* Pills = SLIDE NGANG 1 hàng (kiểu Dezon): không xuống dòng, cuộn/vuốt ngang. */
.ff-pills { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #ccc transparent; }
.ff-pills::-webkit-scrollbar { height: 6px; }
.ff-pills::-webkit-scrollbar-thumb { background: #d5d7da; border-radius: 3px; }
.ff-pills::-webkit-scrollbar-track { background: transparent; }
.ff-pill { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 16px; border-radius: 20px; background: #f2f3f5; color: #333; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; line-height: 1.4; }
.ff-pill:hover { background: #e6e8ea; }
.ff-pill.active { background: #2b2b2b; color: #fff; }
.ff-price { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ff-price input { width: 130px; padding: 8px 11px; border: 1px solid #ddd; border-radius: 8px; font: inherit; }
/* Bộ lọc chi tiết = drawer popup (dùng lại sidebar filter) */
.ff-more { background: #fff; border: 1px solid #cfd2d6; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; color: #333; }
.ff-more:hover { background: #f5f6f7; border-color: #b6bac0; }
#collection .cf-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 99998; }
#collection.filter-open .cf-overlay { display: block; }
#collection.filter-open .sidebar-fix { display: block !important; position: fixed; top: 0; left: 0; width: 330px; max-width: 88vw; height: 100vh; background: #fff; z-index: 99999; overflow-y: auto; padding: 16px 18px; box-shadow: 4px 0 28px rgba(0,0,0,.18); }
#collection .cf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
#collection .cf-head b { font-size: 17px; color: #252a2b; }
#collection .cf-x { border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: #666; padding: 4px; }
@media (min-width: 992px) {
  #collection .content-product-list.product-list.filter > .pro-loop { width: 25% !important; }
}
#collection .product-img .image-resize, #collection .product-img img { border-radius: 12px; }
#collection .content-product-list.product-list.filter .pro-loop { margin-bottom: 12px; }

/* Ảnh danh mục "Mẫu hoa mới" đồng đều: ép mọi ảnh về CÙNG vòng tròn + object-fit cover,
   nền trắng + viền nhẹ → hết tình trạng ảnh lọt thỏm / kích thước lệch nhau. */
.icon_flower ul.items li a { display: inline-block; }
.icon_flower ul.items li img {
  width: 100%; max-width: 150px; aspect-ratio: 1 / 1; height: auto;
  object-fit: cover; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.07); padding: 0;
}

/* Search thu về ICON cạnh giỏ hàng — bấm mới mở ô tìm kiếm (dropdown dưới header). */
.flosa-tgdd .header-upper-search { display: none; }
#site-header .flosa-search-btn { background: none; border: none; cursor: pointer; padding: 6px; margin-right: 4px; display: inline-flex; align-items: center; color: #333; }
#site-header .flosa-search-btn svg { width: 23px; height: 23px; fill: currentColor; }
.flosa-tgdd .header-upper-middle { position: relative; }
#site-header.flosa-search-on .header-upper-search {
  display: block; position: absolute; left: 0; right: 0; top: 100%; max-width: none;
  background: #fff; padding: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.12); z-index: 1200;
}

/* ---------- Product grid: dàn đều (aligned columns, như production) ----------
   "So le" (staggered) trên trang tìm kiếm / danh mục là do card cao thấp khác nhau
   (tên 1 vs 2 dòng, giá sale, badge review) mắc vào float. Fix:
   (1) clamp tên về đúng 2 dòng ở mọi product-loop → chiều cao đồng nhất;
   (2) lay grid bằng flex-wrap → mỗi hàng các card stretch bằng nhau, thẳng cột;
   (3) đẩy giá + nút "Mua ngay" xuống đáy để thẳng hàng giữa các card. */
.content-product-list .pro-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; height: 2.9em; line-height: 1.45; margin-bottom: 6px;
}
.searchPage .search-list-results,
.content-product-list.product-list.filter {
  display: flex; flex-wrap: wrap; align-items: stretch;
}
.searchPage .search-list-results > .pro-loop,
.content-product-list.product-list.filter > .pro-loop { float: none; display: flex; }
.searchPage .search-list-results > .pro-loop > .product-block,
.content-product-list.product-list.filter > .pro-loop > .product-block {
  display: flex; flex-direction: column; width: 100%;
}
.searchPage .search-list-results .product-detail,
.content-product-list.product-list.filter .product-detail { flex: 1 1 auto; }
.searchPage .search-list-results .box-pro-detail,
.content-product-list.product-list.filter .box-pro-detail { display: flex; flex-direction: column; height: 100%; }
.searchPage .search-list-results .button-add,
.content-product-list.product-list.filter .button-add { margin-top: auto; }

/* ---------- Instant search autocomplete dropdown (giống flosa.vn prod) ----------
   Panel gắn vào <body> và định vị fixed dưới ô search (né overflow:hidden của
   .searchform + mọi stacking-context của header). JS ở master-include.liquid. */
.flosa-ac-panel {
  position: fixed; background: #fff; border: 1px solid #eee; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.15); z-index: 100001;
  max-height: min(70vh, 460px); overflow: auto; padding: 6px;
}
.flosa-ac-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: #252a2b; text-decoration: none; }
.flosa-ac-item:hover, .flosa-ac-item.is-active { background: #f5f8f1; }
.flosa-ac-img { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 8px; background: #f3f3f3 center/cover no-repeat; }
.flosa-ac-info { display: flex; flex-direction: column; min-width: 0; }
.flosa-ac-name { font-size: 14px; line-height: 1.35; color: #252a2b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flosa-ac-price { font-size: 13px; font-weight: 700; color: #e23b3b; margin-top: 2px; }
.flosa-ac-more { display: block; text-align: center; padding: 10px; color: #4aa01f; font-weight: 600; text-decoration: none; border-top: 1px solid #f0f0f0; margin-top: 4px; }
.flosa-ac-more:hover { background: #f5f8f1; }
.flosa-ac-empty { padding: 16px; text-align: center; color: #888; font-size: 14px; }

/* ===== Filter Phase 2: hàng pills Dịp / Màu / Giá (tự thích nghi theo danh mục) ===== */
#collection .ff-row{display:flex;align-items:center;gap:8px;margin-top:6px}
#collection .ff-lbl{font-size:12px;color:#8a8a8a;flex:none;min-width:32px;font-weight:600}
#collection .ff-pills.ff-sub{margin:0;flex:1}
#collection .ff-pills.ff-sub .ff-pill{padding:4px 11px;font-size:12.5px}

/* ===== Chip redesign (feedback 07/2026): trắng viền mảnh, active đen, scroll ngang mượt ===== */
#collection .flosa-filter-bar{gap:9px;margin:2px 0 20px}
#collection .ff-pill{background:#fff;border:1px solid #e3e5e8;color:#3a3f45;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:500;transition:border-color .15s,color .15s}
#collection .ff-pill:hover{background:#fff;border-color:#5bbd2a;color:#3b7d16}
#collection .ff-pill.active{background:#252a2b;border-color:#252a2b;color:#fff}
#collection .ff-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:3px}
#collection .ff-pills::-webkit-scrollbar{display:none}
#collection .ff-row{display:flex;align-items:center;gap:10px;margin-top:0}
#collection .ff-row .ff-pills{flex:1;min-width:0}
#collection .ff-lbl{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#9aa0a6;min-width:36px;font-weight:700}
#collection .ff-pills.ff-sub .ff-pill{padding:6px 14px;font-size:12.5px}
#collection .ff-pill.ff-reset{color:#c0392b;border-color:#f0c8c2}
#collection .ff-pill.ff-reset:hover{border-color:#c0392b;color:#c0392b}
/* Bó cứng bề rộng filter bar theo viewport → hàng chip scroll ngang được (ancestor theme shrink-wrap) */
#collection .flosa-filter-bar{max-width:calc(100vw - 32px)}
@media(min-width:992px){#collection .flosa-filter-bar{max-width:100%}}
#collection .ff-row{width:100%;min-width:0}
#collection .flosa-filter-bar > .ff-pills{max-width:100%}
/* Slide 5: mô tả danh mục center ~800px cho dễ đọc (như blog) */
#collection .seo-text{max-width:800px;margin:26px auto 8px;padding:0 14px;float:none}
#collection .view-more{display:block;text-align:center;float:none}
/* Dóng thẳng grid filter: bar cùng lề với H1 (padding col chuẩn), nhãn cố định 36px → mọi cột pill thẳng hàng tuyệt đối */
#collection .flosa-filter-bar{padding:0 15px}
#collection .ff-lbl{flex:0 0 36px;min-width:36px;max-width:36px}

/* Filter: MỖI MỤC 1 DÒNG (Loại/Dịp/Màu/Giá/Xếp), tràn thì cuộn ngang + nút ‹ ›. Cả desktop lẫn mobile. */
#collection .flosa-filter-bar{flex-direction:column;flex-wrap:nowrap;gap:8px}
#collection .flosa-filter-bar .ff-row{width:100%;flex:none;align-items:center;gap:8px}
#collection .flosa-filter-bar .ff-pills.ff-sub{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth}
#collection .flosa-filter-bar .ff-pills.ff-sub::-webkit-scrollbar{height:0;display:none}
#collection .flosa-filter-bar .ff-lbl{flex:0 0 36px;min-width:36px;max-width:36px}
/* Nút điều hướng pill (‹ ›) — chỉ hiện khi tràn/còn cuộn được */
#collection .ff-nav{flex:0 0 auto;width:26px;height:26px;border:1px solid #e3e5e8;background:#fff;border-radius:50%;cursor:pointer;color:#5a5a5a;font-size:17px;line-height:22px;padding:0;display:none;text-align:center}
#collection .ff-nav.show{display:block}
#collection .ff-nav:hover{border-color:#5bbd2a;color:#3c8c12}

/* Grid sản phẩm 4 cột ở desktop (theme .col-4 ép 33.33% → chỉ 3 cột) */
@media(min-width:992px){
  #collection .content-product-list .pro-loop{width:25%}
  .searchPage .search-list-results .pro-loop{width:25%}
}

/* Gọn khoảng chip lọc → grid SP: .collection-result (chips bộ lọc đang chọn) rỗng
   vẫn chiếm 28px + margin 15px → chỉ hiện khi có nội dung */
#collection .collection-result{margin:0}
#collection .collection-result:not(:has(li)){display:none}

/* Card SP trang danh mục/tìm kiếm: giá sát title (bỏ ép title cao cố định 2 dòng —
   title 1 dòng sẽ không còn khoảng trống) + viền card phân tách item rõ ràng */
#collection .content-product-list .pro-name,
.searchPage .search-list-results .pro-name{height:auto;min-height:1.45em}
#collection .content-product-list .box-pro-prices,
.searchPage .search-list-results .box-pro-prices{margin-top:2px}
#collection .content-product-list .product-block,
.searchPage .search-list-results .product-block{border:1px solid #ececec;border-radius:14px;background:#fff;padding:8px 10px 14px;box-sizing:border-box;transition:box-shadow .15s ease,border-color .15s ease}
#collection .content-product-list .product-block:hover,
.searchPage .search-list-results .product-block:hover{box-shadow:0 8px 22px rgba(0,0,0,.09);border-color:#dfe3e7}
#collection .content-product-list.product-list.filter .pro-loop{margin-bottom:16px}

/* "Mẫu hoa mới": 6 mục gọn 1 dòng (desktop) — nhãn xuống dưới ảnh cho cân */
@media(min-width:768px){
  .icon_flower ul.items{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:0 14px}
  .icon_flower ul.items li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;margin:0}
  .icon_flower ul.items li img{max-width:150px}
  .icon_flower ul.items li a:last-child{margin-top:10px;display:block}
}
/* Header 1 dòng: logo · menu · search · giỏ hàng (menu chuyển từ hàng riêng vào flexContainer-header) */
@media(min-width:992px){
  .flosa-tgdd .flexContainer-header{gap:14px}
  .flosa-tgdd .flexContainer-header .header-menu-desktop{flex:0 1 auto;min-width:0;background:none;border:none;box-shadow:none;padding:0}
  .flosa-tgdd .flexContainer-header .header-navbar-menu{justify-content:flex-start}
  .flosa-tgdd .flexContainer-header .menu-desktop .main-nav > ul{display:flex;flex-wrap:nowrap;white-space:nowrap}
  .flosa-tgdd .flexContainer-header .menu-desktop .main-nav > ul > li > a{padding:12px 9px;font-size:14px;margin:0}
  /* search vẫn là icon toggle (rule "Search thu về ICON" phía dưới) — không đổi */
  /* Sticky: theme temp01 ẩn hàng trên + chỉ hiện hàng menu riêng (đã gộp) → giữ nguyên cả dòng khi cuộn lên */
  .mainHeader_temp01.hSticky-nav .header-upper-middle{visibility:visible;position:static;-webkit-transform:none;transform:none}
  .mainHeader_temp01.hSticky-nav .header-upper-logo{display:block!important}
  .mainHeader_temp01.hSticky-nav .flexContainer-header{justify-content:flex-start}
}
/* Cân đối khoảng trống trên/dưới H1 danh mục ở desktop (theme: heading-collection mt 50px, bar cách H1 chỉ 2px). Mobile giữ nguyên vì đã cân (20/22px). */
@media(min-width:992px){
  #collection .heading-collection{margin-top:22px}
  #collection .flosa-filter-bar{margin-top:20px}
}

/* ===== Blog: khối "Bài viết liên quan" cuối bài (template article.liquid, CMS/Blog 07/2026) =====
   Dùng CSS Grid RIÊNG (.related-grid) — KHÔNG mượn class grid theme (.row/.col-md-3): col-md-3 kèm
   float + width% + box-sizing khiến grid item không stretch lấp track (item co ~kích thước ảnh 23px,
   ảnh tí xíu). Card = thẻ <a> thuần, width:auto → stretch đầy track → ảnh width:100% đúng cỡ.
   4 cột desktop / 2 cột mobile, độc lập breakpoint theme. */
.related-articles{margin:34px 0 10px;clear:both}
.related-articles .title-bl h2{font-size:20px;margin:0 0 16px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.related-grid .related-card{display:block;color:inherit;text-decoration:none;min-width:0}
.related-grid .related-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.related-grid .related-card h3{font-size:14px;line-height:1.4;margin:9px 0 0;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related-grid .related-card:hover h3{color:#5bbd2a}
@media(max-width:767px){.related-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
/* Tag pill dưới bài + trang tag */
.meta-tags{margin:18px 0 6px}
.meta-tags .tag{display:inline-block;background:#f2f4f5;border-radius:999px;padding:4px 12px;margin:0 6px 8px 0;font-size:12.5px;color:#3a3f45}
.meta-tags .tag:hover{background:#e4efdb;color:#3b7d16}

/* ===== Menu chính 9 mục (redesign 07/2026): nén khoảng cách + cỡ chữ để vừa 1 hàng desktop, hết đè icon search/giỏ hàng ===== */
@media(min-width:992px){
  .main-nav > ul > li > a{margin:0 6px !important;font-size:13px !important}
}
@media(min-width:992px) and (max-width:1365px){
  .main-nav > ul > li > a{margin:0 4px !important;font-size:12.5px !important}
}

/* Tablet 992-1199: menu 9 mục không đủ chỗ → nén sâu, ẩn mục Blog (còn footer + mobile menu) và chữ "Giỏ hàng" (giữ icon+badge) */
@media(min-width:992px) and (max-width:1199px){
  .main-nav > ul > li > a{margin:0 3px !important;font-size:12px !important}
  .main-nav > ul > li:last-child{display:none !important}
  .header-action_label{display:none !important}
}
/* ===== Filter bar: hàng "Sắp xếp" đúng vai trò sort — tách khỏi pill lọc, dồn phải, dạng dropdown (feedback 07/2026) ===== */
#collection .flosa-filter-bar > .ff-sort-row{margin-left:auto !important;margin-right:0 !important;width:auto !important;flex:0 0 auto !important;gap:8px;align-items:center}
#collection .ff-sort-lbl{flex:0 0 auto;min-width:0;max-width:none;width:auto}
#collection .ff-sort-select{appearance:auto;border:1px solid #e3e5e8;border-radius:8px;background:#fff;color:#3a3f45;font-size:13px;padding:6px 10px;min-width:140px;cursor:pointer}
#collection .ff-sort-select:hover{border-color:#5bbd2a}

/* ===== Trang SP: nén block mua hàng (feedback 07/2026) — số lượng + MUA NGAY 1 hàng; icon thanh toán + hotline 1 hàng ===== */
#detail-product .selector-actions{display:flex !important;align-items:stretch;gap:10px;margin-top:6px}
#detail-product .selector-actions .quantity-area{flex:0 0 auto;display:flex;align-items:stretch;margin:0}
#detail-product .selector-actions .wrap-addcart{flex:1;min-width:0;margin:0}
#detail-product .selector-actions .wrap-addcart .button{width:100%;margin:0;height:100%}
#detail-product .payment-accept{max-width:100%;margin-top:10px}
/* Khối "Tại sao dùng dịch vụ" (trang SP): .services dùng float:left làm .wrapper sập chiều cao
   → h2 "{loại} khác" + Sản phẩm liên quan CHỒNG lên badge. Chuyển sang flex (scoped :has) →
   wrapper chứa badge, 3 badge/hàng cao đều (hết so le do title 2 dòng), h2 xuống đúng dưới. */
.wrapper:has(.h3-services){display:flex;flex-wrap:wrap;align-items:stretch}
.wrapper:has(.h3-services) .h3-services{flex:0 0 100%}
.wrapper:has(.h3-services) .services{float:none;width:auto;flex:0 0 33.333%;margin:12px 0;padding:0 12px;box-sizing:border-box}
@media(max-width:568px){.wrapper:has(.h3-services) .services{flex-basis:100%}}

/* #4 Trang SP: bỏ ô số lượng (mặc định 1) → nút MUA NGAY full-width ngay dưới giá. Giữ input #quantity ẩn (value=1) cho add-to-cart. */
#detail-product .selector-actions .quantity-area{display:none !important}
#detail-product .selector-actions{margin-top:8px}
#detail-product .selector-actions .wrap-addcart{flex:1 1 100%}

/* #3 Footer 4 cột ĐỀU nhau 25% (theme để 4/3/5 bootstrap gây lệch). Cột thứ 3 (col-md-5) chứa 2 col con 6/6 → mỗi con 25%. */
@media(min-width:992px){
  .main-footer .row > .col-md-4{flex:0 0 25%;max-width:25%;width:25%}
  .main-footer .row > .col-md-3{flex:0 0 25%;max-width:25%;width:25%}
  .main-footer .row > .col-md-5{flex:0 0 50%;max-width:50%;width:50%}
}

/* ===== Trang SP: nút MUA NGAY/Thêm giỏ MỀM MẠI hơn (feedback 07/2026) — bo góc mượt, shadow xanh nhẹ, hover nhấc; theme để border-radius:0 + màu cam #FF6117 nên override về xanh thương hiệu ===== */
#detail-product .selector-actions .wrap-addcart .button{
  border-radius:12px !important;
  border-color:#5bbd2a !important;
  background-color:#5bbd2a !important;
  box-shadow:0 4px 12px rgba(91,189,42,.28) !important;
  letter-spacing:.3px;
  transition:color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .2s ease !important;
  will-change:transform;
}
/* pseudo :before = lớp fill hover của theme (để left/right:-2px tràn góc) → bo góc + ép sát mép cho khỏi lòi màu */
#detail-product .selector-actions .wrap-addcart .button:before{
  left:0 !important; right:0 !important; border-radius:12px !important;
  background-color:#4CAF50 !important;
}
#detail-product .selector-actions .wrap-addcart .button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(91,189,42,.38) !important;
  border-color:#4CAF50 !important;
}
#detail-product .selector-actions .wrap-addcart .button:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(91,189,42,.30) !important;
}
#detail-product .selector-actions .wrap-addcart .button[disabled]{
  box-shadow:none !important; transform:none !important;
  background-color:#c9cdd2 !important; border-color:#c9cdd2 !important;
}