/* ============================================================================
   hoangha-ui.css  —  UI override cho nhualaysang.com theo style hoanghamobile.com
   Nạp SAU style.css (xem head.blade.php). Muốn ROLLBACK: xoá dòng <link> nạp file
   này trong resources/views/frontend/component/head.blade.php là site trở về như cũ.
   Ngày tạo: 2026-07-26
   ============================================================================ */

:root{
    --hh-green:#009981;        /* xanh thương hiệu hoanghamobile */
    --hh-green-dark:#007a67;
    --hh-green-light:#e8f7f3;
    --hh-red:#d71c1c;          /* đỏ (giá cũ gạch ngang / giảm giá) */
    --hh-ink:#2b2b2b;
}

/* ============================================================================
   1) FONT — dùng Inter ở mọi nơi (giống hoanghamobile). Không đụng tới <i>/.fa
   nên icon Font Awesome vẫn giữ nguyên.
   ============================================================================ */
body, h1, h2, h3, h4, h5, h6, .heading-font, .banner h1, .banner h2,
p, a, span, li, dt, dd, td, th, label, blockquote, figcaption,
.title, .subtitle, .heading, .text,
input, select, textarea, button, optgroup,
.uk-form input, .uk-form select, .uk-form textarea, .uk-button,
.product-title, .product-price_sale, .product-pricenew, .product-priceold,
.mainCat, .main-categories .mainCat > li > .title .text,
.header, .footer, .panel-head .heading, .panel-head .heading-1{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
body{ color:var(--hh-ink); -webkit-font-smoothing:antialiased; }

/* ============================================================================
   2) CONTAINER — nới rộng, giảm khoảng trắng 2 bên, tăng vùng nội dung
   (gốc: 980px, và 1200px khi >=1220px)
   ============================================================================ */
@media (min-width:992px) and (max-width:1219px){
    .uk-container{ max-width:1180px !important; }
}
@media (min-width:1220px){
    .uk-container{ max-width:1480px !important; padding:0 20px !important; }
}

/* ============================================================================
   3) GIÁ SẢN PHẨM — giá mới XANH LÁ, giá cũ gạch ngang ĐỎ (mọi nơi hiển thị giá)
   ============================================================================ */
.product-1 .product-pricenew,
.product-pricenew,
.product-highlight .info .price,
.product-highlight .price,
.productDetail-intro .product-pricenew,
.main-categories .product-highlightcat .product-pricenew,
.product-price_sale .product-pricenew{
    color:var(--hh-green) !important;
}
.product-1 .product-priceold,
.product-priceold,
.productDetail-intro .product-priceold,
.main-categories .product-highlightcat .product-priceold{
    color:var(--hh-red) !important;
    text-decoration:line-through !important;
}
/* badge % giảm giá -> đỏ cho đồng bộ */
.product-1 .product-percent,
.productDetail-intro .product-percent{
    background:var(--hh-red) !important;
}

/* ============================================================================
   4) CARD SẢN PHẨM — viền/bo góc/hover + 2 badge cam kết
   ============================================================================ */
.product-1{
    background:#fff;
    border:1px solid #ececec;
    border-radius:10px;
    padding:10px;
    height:100%;
    transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.product-1:hover{
    box-shadow:0 8px 22px rgba(0,0,0,.10);
    border-color:var(--hh-green);
    transform:translateY(-2px);
}
.product-1 .product-thumb{ border-radius:8px; overflow:hidden; }
.product-1 .product-price_sale{ margin-bottom:6px; }

.product-badges{
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed #eee;
    display:flex;
    flex-direction:column;
    gap:5px;
}
.product-badges .pb-item{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    line-height:1.35;
    color:#444;
}
.product-badges .pb-item i{
    color:var(--hh-green);
    font-size:13px;
    width:16px;
    text-align:center;
    flex-shrink:0;
}
@media (max-width:479px){
    .product-badges .pb-item{ font-size:11px; }
}

/* ============================================================================
   5) HEADER — theo style hoanghamobile (xanh lá, search bo tròn nút xanh)
   ============================================================================ */
.header .topbar{ background:var(--hh-green) !important; }
.header .topbar .sitelink li a{ color:#fff !important; }
.header .topbar .sitelink li a:hover{ color:#d8fff5 !important; text-decoration:none; }

/* Thanh tìm kiếm kiểu hoanghamobile */
.header .search .input-text{
    border:1px solid #ddd !important;
    border-right:0 !important;
    border-radius:6px 0 0 6px !important;
}
.header .search .form-select{
    border-radius:6px !important;
    border:1px solid #ddd !important;
}
.header .search .btn-submit{
    background:var(--hh-green) !important;
    color:#fff !important;
    border:1px solid var(--hh-green) !important;
    border-radius:0 6px 6px 0 !important;
    font-weight:600 !important;
    letter-spacing:.2px;
}
.header .search .btn-submit:hover{ background:var(--hh-green-dark) !important; }

/* icon giỏ hàng trong header -> xanh thay vì đỏ */
.header .bottom a[href*="gio-hang"]{ color:var(--hh-green) !important; }

/* ============================================================================
   6) SIDEBAR "DANH MỤC SẢN PHẨM" — CARD TRẮNG (icon + text nhỏ) kiểu hoanghamobile
   Giữ dropdown flyout khi hover. LƯU Ý: .panel-body là position:absolute nên KHÔNG
   đặt overflow:hidden lên .main-categories (sẽ cắt mất danh mục).
   ============================================================================ */
.main-categories{ position:relative; }

/* Heading = đầu card trắng */
.main-categories .heading{
    background:#fff !important;
    color:var(--hh-green) !important;
    border:1px solid #ececec !important;
    border-bottom:none !important;
    border-radius:10px 10px 0 0 !important;
    padding:12px 16px !important;
    font-size:14px !important;
    font-weight:700 !important;
    letter-spacing:.2px;
}
.main-categories .heading > *{ color:var(--hh-green) !important; }
.main-categories .heading:before{ display:none !important; }   /* bỏ icon bar.png (dành cho nền xanh) */

/* Trang chủ: danh sách luôn mở */
.main-categories.active .panel-body{ display:block !important; }
.main-categories .panel-body{ z-index:120; }

/* Thân card trắng bo góc */
.main-categories .mainCat{
    background:#fff !important;
    border:1px solid #ececec !important;
    border-top:none !important;
    border-radius:0 0 10px 10px !important;
    box-shadow:0 14px 30px rgba(0,0,0,.10);
    padding:6px 0 !important;
}
.main-categories .mainCat:before{ display:none !important; }        /* bỏ tam giác trắng cũ */
.main-categories .mainCat > li + li{ border-top:none !important; }
.main-categories .mainCat > li{ position:relative; transition:background .15s ease; background:transparent !important; }

/* Mỗi mục: icon + text nhỏ; xoá gradient/arrow/nền-xanh-đậm gốc */
.main-categories .mainCat > li > .title{
    display:flex !important; align-items:center; gap:12px;
    padding:12px 16px !important; position:relative; background:transparent !important;
}
.main-categories .mainCat > li > .title:before,
.main-categories .mainCat > li > .title:after{ display:none !important; }
.main-categories .mainCat > li > .title .cat-ico{
    color:var(--hh-green); font-size:17px; width:24px; text-align:center; flex-shrink:0;
}
.main-categories .mainCat > li > .title .text{
    color:#333 !important; font-size:14.5px !important; font-weight:500 !important;
    line-height:1.4 !important; height:auto !important; -webkit-line-clamp:2 !important;
}
/* Hover: nền xanh nhạt, chữ + icon xanh (ghi đè nền xanh đậm + last-child gốc) */
.main-categories .mainCat > li:hover{ background:var(--hh-green-light) !important; }
.main-categories .mainCat > li:hover > .title,
.main-categories .mainCat > li:last-child > .title{ background:transparent !important; }
.main-categories .mainCat > li:hover > .title .text,
.main-categories .mainCat > li:last-child > .title .text{ color:var(--hh-green) !important; }
.main-categories .mainCat > li:hover > .title .cat-ico,
.main-categories .mainCat > li:last-child > .title .cat-ico{ color:var(--hh-green-dark) !important; }
.main-categories .mainCat > li:last-child > .title:after{ display:none !important; }

/* Flyout submenu (class MỚI hh-fly/hh-sub để thoát CSS legacy .flycontent/.subCat).
   Chỉ item CÓ CON (.has-sub) mới render + hiện khi hover. */
.main-categories .mainCat > li > .hh-fly{
    display:none;
    position:absolute; top:-6px; left:100%; margin-left:8px;
    min-width:250px; padding:8px;
    background:#fff; border:1px solid #ececec;
    border-radius:10px; box-shadow:0 16px 36px rgba(0,0,0,.16);
    z-index:200;
}
.main-categories .mainCat > li.has-sub:hover > .hh-fly{ display:block; }
.main-categories .hh-fly:before{
    content:""; position:absolute; top:16px; left:-6px; width:12px; height:12px;
    background:#fff; border-left:1px solid #ececec; border-bottom:1px solid #ececec;
    transform:rotate(45deg);
}
.main-categories .hh-fly .hh-sub{ list-style:none; margin:0; padding:0; }
.main-categories .hh-fly .hh-sub li{ list-style:none; margin:0; padding:0; display:block; float:none; }
.main-categories .hh-fly .hh-sub li a{
    display:block; padding:9px 12px; border-radius:6px;
    color:#454545 !important; font-size:13.5px !important; font-weight:500; line-height:1.4;
    text-transform:none !important; background:transparent !important; white-space:nowrap;
    transition:background .15s ease, color .15s ease, padding .15s ease;
}
.main-categories .hh-fly .hh-sub li a:hover{
    background:var(--hh-green-light) !important; color:var(--hh-green) !important; padding-left:16px;
}

/* ============================================================================
   7) FOOTER-COMMITMENT — 4 mục -> dạng ICON + TEXT (giống dải "trải nghiệm")
   ============================================================================ */
.hh-commit-heading{
    text-align:center;
    font-size:24px;
    font-weight:700;
    color:var(--hh-green);
    margin:10px 0 22px;
}
.footer-commitment{ padding:26px 0 10px !important; }
.footer-commitment .commitment-item{ margin-bottom:0 !important; }
.footer-commitment .content{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border:0 !important;              /* bỏ viền dashed cũ */
    padding:6px 12px !important;
    background:transparent !important;
}
.footer-commitment .content .icon{
    width:66px; height:66px;
    margin:0 0 12px 0 !important;
    border-radius:50%;
    background:var(--hh-green);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:28px;
    box-shadow:0 6px 16px rgba(0,153,129,.28);
}
.footer-commitment .content .icon i{ color:#fff; }
.footer-commitment .content .text{ width:100%; }
.footer-commitment .content .title{
    color:var(--hh-ink) !important;
    font-size:16px !important;
    font-weight:700 !important;
    text-transform:uppercase;
    margin-bottom:4px;
}
.footer-commitment .content .subtitle{
    color:#777 !important;
    font-size:13.5px !important;
    font-weight:400;
}
@media (min-width:960px) and (max-width:1219px){
    .footer-commitment .content .icon{ width:56px; height:56px; font-size:24px; }
    .footer-commitment .content .title{ font-size:14px !important; }
}

/* ============================================================================
   8) FOOTER — 1 CARD bo góc nền xanh #009981 (không tràn viền) kiểu hoanghamobile
   ============================================================================ */
.footer{ background:transparent !important; margin-top:24px; padding:0; }
.footer > .uk-container > .footer-card{
    background:var(--hh-green);
    color:#fff;
    border-radius:16px;
    overflow:hidden;
    padding:30px 30px 0;
}
.footer a, .footer .heading, .footer .title{ color:#fff !important; }

/* slider đối tác: tự chạy 3s, ẩn nút mũi tên (gây rối hướng), logo trên card trắng */
.footer .middle{ padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid rgba(255,255,255,.18); }
.footer .slider-partner .uk-slidenav{ display:none !important; }
.footer .middle .item .image{
    background:#fff; border-radius:8px; padding:8px;
    display:flex; align-items:center; justify-content:center; height:62px;
}
.footer .middle .item .image img{ max-height:100%; width:auto; }

/* tiêu đề cột footer */
.footer .top .footer-infomation .panel-head .heading{
    color:#fff !important; font-size:15px !important; font-weight:700 !important;
    text-transform:uppercase; letter-spacing:.3px;
    margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.22);
}
.footer .top .list-article li a{
    color:rgba(255,255,255,.88) !important; font-size:13.5px; line-height:2;
    transition:padding .15s ease;
}
.footer .top .list-article li a:hover{ color:#fff !important; padding-left:4px; }

/* cột "Thông tin liên hệ" */
.footer .footer-contact .company-name{
    color:#fff; font-weight:700; font-size:14px; text-transform:uppercase;
    line-height:1.5; margin-bottom:14px;
}
.footer .footer-contact .contact-list{ margin:0; padding:0; }
.footer .footer-contact .contact-list li{
    color:rgba(255,255,255,.9); font-size:13px; line-height:1.5; margin-bottom:9px;
}
.footer .footer-contact .contact-list li .lb{ font-weight:700; color:#fff; margin-right:5px; }
.footer .footer-contact .contact-list li a{ color:rgba(255,255,255,.92) !important; text-decoration:none; background:transparent !important; }
.footer .footer-contact .contact-list li a:hover{ color:#fff !important; text-decoration:underline; }

/* kết nối mạng xã hội */
.footer .footer-connect .title{
    color:#fff !important; font-weight:700; text-transform:uppercase;
    margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.22);
}
.footer .footer-connect .social a{
    width:38px; height:38px; line-height:38px; display:inline-block; text-align:center;
    border-radius:50%; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.55);
    color:#fff !important; margin:0 7px 8px 0;
    transition:background .15s ease, color .15s ease, transform .15s ease;
}
.footer .footer-connect .social a:hover{ background:#fff; color:var(--hh-green) !important; transform:translateY(-2px); }
/* badge Bộ Công Thương: nền trong suốt (ảnh gốc đã có alpha) */
.footer .footer-connect .bct{ margin-top:12px; }
.footer .footer-connect .bct img{ background:transparent !important; padding:0 !important; }

/* thanh copyright ở đáy card (3 dòng, căn giữa, nền tối nhẹ tràn hết bề rộng card) */
.footer .footer-copyright{
    margin:24px -30px 0;
    padding:16px 30px 20px;
    background:rgba(0,0,0,.12);
    text-align:center;
}
.footer .footer-copyright p{ color:rgba(255,255,255,.9); font-size:12.5px; line-height:1.7; margin:0 0 4px; }
.footer .footer-copyright p:last-child{ margin-bottom:0; }
.footer .footer-copyright a{ color:#fff !important; }

/* nút Về đầu trang */
.goTop{ background:var(--hh-green-dark) !important; }

/* ============================================================================
   9) HEADER BOTTOM — bỏ nền xanh; thanh tìm kiếm sạch kiểu hoanghamobile;
   card danh mục đẩy XUỐNG DƯỚI (cột trái đè lên slideshow, không chung hàng search)
   ============================================================================ */
.header .bottom{ background:transparent !important; border-radius:0 !important; padding:6px 0 12px !important; }
.header .bottom .hh-bottom{ position:relative; }
.header .search{ padding:0 !important; }

/* Thanh tìm kiếm: viền mảnh, bo góc, nút xanh có icon */
.header .search .form{
    position:relative; background:#fff;
    border:1px solid #e3e3e3; border-radius:8px;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.header .search .form > .uk-grid{ display:flex; width:100%; margin:0; align-items:stretch; }
.header .search .form > .uk-grid > .uk-width-1-4{ width:190px; flex:0 0 190px; }
.header .search .form > .uk-grid > .uk-width-3-4{ flex:1 1 auto; width:auto; }
.header .search .label-select{ display:block; height:46px; position:relative; }
.header .search .label-select:before,
.header .search .label-select:after{ display:none !important; }
.header .search .form-select{
    height:46px !important; border:0 !important; border-right:1px solid #eee !important;
    border-radius:8px 0 0 8px !important; background:#fff !important; color:#555 !important;
    padding:0 14px !important; font-size:14px !important; box-shadow:none !important;
}
.header .serch-action{ position:relative; padding-right:132px !important; height:46px; display:block; }
.header .search .input-text{
    height:46px !important; border:0 !important; border-radius:0 !important;
    background:#fff !important; color:#333 !important; padding:0 16px !important;
    font-size:14px !important; box-shadow:none !important;
}
.header .search .input-text::-webkit-input-placeholder{ color:#9a9a9a !important; }
.header .search .input-text::placeholder{ color:#9a9a9a !important; }
.header .search .btn-submit{
    position:absolute; right:0; top:0; height:46px !important; width:auto !important; min-width:130px;
    padding:0 22px !important; border:0 !important; border-radius:0 8px 8px 0 !important;
    background:var(--hh-green) !important; color:#fff !important;
    font-size:14px !important; font-weight:600 !important; white-space:nowrap; cursor:pointer;
}
.header .search .btn-submit:hover{ background:var(--hh-green-dark) !important; }
.header .search .btn-submit .fa{ margin-right:6px; }
.header .search .form .searchResult{ z-index:140; }

/* Card danh mục: chỉ trang chủ (is-home) mới đẩy tuyệt đối xuống dưới, đè trái slideshow */
.header .bottom .hh-cat-wrap.is-home{
    position:absolute; top:100%; left:0; width:286px; z-index:130; margin-top:4px;
}
.header .bottom .hh-cat-wrap:not(.is-home){ margin-top:8px; max-width:320px; }

/* ============================================================================
   10) TRANG CHỦ — layout SIDEBAR trái + NỘI DUNG phải
   ============================================================================ */
.main-content .hh-home-layout{ display:flex; gap:20px; align-items:flex-start; }
.main-content .hh-sidebar{ width:290px; flex:0 0 290px; }
.main-content .hh-content{ flex:1 1 auto; min-width:0; }
.hh-sidebar > * + *{ margin-top:18px; }

/* Card danh mục: danh sách IN-FLOW (không absolute) */
.hh-home-catbox{ position:relative; }
.hh-home-catbox .panel-body{ position:static !important; display:block !important; }
.hh-home-catbox .mainCat{ box-shadow:none !important; border-radius:0 0 10px 10px !important; }

/* Banner hotline sidebar */
.hh-sidebar-banner img{ width:100%; height:auto; border-radius:10px; display:block; }

/* Card "Sản phẩm ngẫu nhiên" trong sidebar (dạng list dọc) */
.hh-sidebar .aside-article .banner{ margin-bottom:18px; border-radius:10px; overflow:hidden; }
.hh-sidebar .randoomProduct{ background:#fff; border:1px solid #ececec; border-radius:10px; overflow:hidden; }
.hh-sidebar .randoomProduct .panel-head{ background:#f26b06; padding:11px 15px; }
.hh-sidebar .randoomProduct .panel-head .heading span{ color:#fff !important; font-weight:700; text-transform:uppercase; font-size:14px; }
.hh-sidebar .randoomProduct .panel-body{ padding:12px; }
.hh-sidebar .randoomProduct .panel-body > .uk-grid{ display:block !important; margin:0 !important; }
.hh-sidebar .randoomProduct .product-item{ width:100% !important; padding:0 !important; margin:0 0 14px !important; float:none !important; }
.hh-sidebar .randoomProduct .product-item:last-child{ margin-bottom:0 !important; }
.hh-sidebar .randoomProduct .product{ display:flex; gap:10px; align-items:flex-start; border:1px solid #f0f0f0; border-radius:8px; padding:8px; transition:box-shadow .15s, border-color .15s; }
.hh-sidebar .randoomProduct .product:hover{ border-color:var(--hh-green); box-shadow:0 4px 12px rgba(0,0,0,.08); }
.hh-sidebar .randoomProduct .product .thumb{ width:74px; flex:0 0 74px; margin:0; }
.hh-sidebar .randoomProduct .product .thumb img{ width:100%; border-radius:6px; }
.hh-sidebar .randoomProduct .product .info{ flex:1; min-width:0; }
.hh-sidebar .randoomProduct .product .info .title{ font-size:13px; line-height:1.4; margin:0 0 5px; height:auto !important; }
.hh-sidebar .randoomProduct .product .info .title a{ color:#333 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hh-sidebar .randoomProduct .product .info .code{ font-size:11px; color:#999; margin-bottom:4px; }
.hh-sidebar .randoomProduct .product .info .price .new{ color:var(--hh-green) !important; font-weight:700; font-size:14px; }
.hh-sidebar .randoomProduct .product .info .price .old{ color:var(--hh-red) !important; text-decoration:line-through; font-size:12px; }
.hh-sidebar .randoomProduct .product .info .price .sale{ background:var(--hh-red) !important; color:#fff !important; font-size:10px; padding:2px 5px; border-radius:3px; }

/* Nội dung phải: ảnh slider bo góc, các section cách nhau */
.hh-content .slideshow_product{ margin-bottom:20px; }
.hh-content .mainslide .item .image{ border-radius:12px; overflow:hidden; display:block; }
.hh-content .mainslide .item .image img{ border-radius:12px; width:100%; }
.hh-content .panel-products, .hh-content .article-catalogue-1{ margin-bottom:26px; }

/* ============================================================================
   11) HEADER MIDDLE — logo trái + [menu chính trên / cam kết dưới] phải
   ============================================================================ */
.header .topbar{ padding:4px 0; }
.header .topbar .topbar-right{ display:flex; align-items:center; gap:14px; }
.header .topbar .topbar-right a{ color:#fff !important; font-size:18px; }

/* bỏ đường kẻ/shadow ngăn cách dưới header (search với nội dung) */
.header{ box-shadow:none !important; }
.header .middle{ padding:0; }
/* Header mirror cấu trúc content (leftbar 290px + gap 20px) để thẳng hàng tuyệt đối */
.header .middle .hh-middle{ display:flex; align-items:stretch; gap:20px; padding:14px 0; }
/* Ô logo = width leftbar (290px), logo căn giữa ngang + dọc.
   GHI ĐÈ legacy `.header .logo{max-width:250px;padding-left:60px}` (style.css @1220px) đã ép nhỏ + lệch phải */
.header .middle .hh-middle .logo{
    flex:0 0 290px; width:290px; max-width:none !important; padding-left:0 !important; margin:0 !important;
    display:flex; align-items:center; justify-content:center;
}
.header .middle .hh-middle .logo img{ height:150px; width:auto; max-width:280px; display:block; }
.header .middle .hh-middle-right{
    flex:1 1 auto; min-width:0;
    display:flex; flex-direction:column; justify-content:stretch; gap:12px;
}

/* Menu chính (hàng trên) — thanh nền xanh #009981, căn giữa, có giỏ hàng + cờ */
.header .hh-mainnav{
    flex:0 0 auto;
    background:var(--hh-green); border-radius:8px; padding:3px 8px;
    display:flex; justify-content:center;
}
.header .hh-mainnav ul{
    display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:2px;
    list-style:none; margin:0; padding:0;
}
.header .hh-mainnav li{ list-style:none; }
.header .hh-mainnav li a{
    display:block; padding:8px 13px; border-radius:6px;
    color:#fff !important; font-weight:600; font-size:14px; white-space:nowrap;
    transition:background .15s ease;
}
.header .hh-mainnav li a:hover{ background:rgba(255,255,255,.20); color:#fff !important; }
.header .hh-mainnav .nav-cart a{ font-size:16px; padding:7px 10px; }
.header .hh-mainnav .nav-lang a{ padding:6px 8px; }
.header .hh-mainnav .nav-lang img{ height:15px; width:auto; vertical-align:middle; border-radius:2px; display:inline-block; }

/* Thanh tìm kiếm: giờ là hàng 2 (cuối) trong cột phải — GIÃN chiếm hết chiều cao còn
   lại (chỗ của cam kết cũ + của chính nó) để có nhiều khoảng trắng bao quanh hơn */
.header .hh-middle-right .hh-search-row{
    width:100%; flex:1 1 auto;
    display:flex; flex-direction:column; justify-content:center;
}
.header .hh-middle-right .hh-search-row .offcanvas-bar{ margin-bottom:6px; }

/* ============================================================================
   12) TRANG CHI TIẾT SẢN PHẨM — UI đẹp hơn (tham khảo ảnh mẫu)
   ============================================================================ */
/* Tên sản phẩm: to + đậm, kèm badge "Còn hàng" */
.productDetail-intro .pd-head{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.productDetail-intro .title{
    font-size:27px !important; font-weight:800 !important; line-height:1.3 !important;
    color:#222 !important; margin:0 !important; flex:1 1 auto;
}
.productDetail-intro .pd-stock{
    display:inline-flex; align-items:center; gap:5px; flex-shrink:0; margin-top:5px;
    background:var(--hh-green-light); color:var(--hh-green); font-weight:700; font-size:13px;
    padding:4px 12px; border-radius:20px;
}
/* Meta: sao + số đánh giá + mã SP */
.productDetail-intro .pd-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; margin:4px 0 14px; }
.productDetail-intro .pd-stars{ color:#f5a623; font-size:15px; letter-spacing:1px; }
.productDetail-intro .pd-rating-count{ color:#888; font-size:13px; }
.productDetail-intro .pd-code{ color:#555; font-size:13px; }
.productDetail-intro .pd-code b{ color:#222; }
/* Giá: viền trên/dưới, giá mới to xanh */
.productDetail-intro .productDetail-price{ gap:14px; padding:14px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; margin-bottom:16px; }
.productDetail-intro .product-pricenew{ font-size:30px !important; font-weight:800 !important; color:var(--hh-green) !important; }
.productDetail-intro .product-priceold{ font-size:18px !important; color:var(--hh-red) !important; text-decoration:line-through !important; }
.productDetail-intro .product-percent{ background:var(--hh-red) !important; color:#fff !important; padding:3px 8px; border-radius:5px; font-size:13px; font-weight:700; }

/* Mô tả: card nhẹ, chuẩn hoá font, checklist icon xanh */
.productDetail-description{
    background:#f8faf9; border:1px solid #ececec; border-left:3px solid var(--hh-green);
    border-radius:8px; padding:15px 18px; margin:0 0 18px;
    font-size:14.5px; line-height:1.85; color:#3a3a3a;
}
.productDetail-description *{ font-family:'Inter',-apple-system,sans-serif !important; }
.productDetail-description .fa{ font-family:'FontAwesome' !important; }   /* KHÔI PHỤC font icon (bị * ép sang Inter -> ô vuông) */
.productDetail-description span[style]{ font-size:14.5px !important; }
.productDetail-description .pd-feat{ display:flex; align-items:flex-start; gap:9px; margin-bottom:10px; }
.productDetail-description .pd-feat:last-child{ margin-bottom:0; }
.productDetail-description .pd-feat > i{ color:var(--hh-green); font-size:15px; margin-top:3px; flex-shrink:0; }
.productDetail-description .pd-feat > span{ flex:1; min-width:0; }

/* Chọn số lượng */
.productDetail-buy .pd-buyrow{ margin-bottom:15px; }
.productDetail-buy .quantity .label{ font-weight:600; margin-right:12px; color:#333; }
.productDetail-buy .qty-box{ display:inline-flex; align-items:center; border:1px solid #ddd; border-radius:8px; overflow:hidden; }
/* override legacy `.productDetail-buy .quantity .btn{position:absolute;right:5px}` khiến nút - biến mất */
.productDetail-buy .qty-box .btn{ position:static !important; right:auto !important; top:auto !important; bottom:auto !important; width:38px; height:40px; display:flex; align-items:center; justify-content:center; background:#f5f5f5; color:#555 !important; cursor:pointer; border:0; font-size:13px !important; }
.productDetail-buy .qty-box .btn:hover{ background:var(--hh-green); color:#fff; }
.productDetail-buy .qty-box .quantity-input{ width:54px; height:40px; text-align:center; border:0; border-left:1px solid #ddd; border-right:1px solid #ddd; font-size:15px; padding:0; }

/* 2 nút hành động: gradient trái→phải, có ghi chú */
.productDetail-buy .pd-actions{ display:flex; gap:14px; margin-bottom:16px; }
.productDetail-buy .pd-btn{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:10px 8px; border-radius:10px; text-align:center; color:#fff !important; text-decoration:none !important;
    transition:filter .15s ease, transform .15s ease; box-shadow:0 5px 14px rgba(0,0,0,.13); cursor:pointer;
}
.productDetail-buy .pd-btn:hover{ filter:brightness(1.07); transform:translateY(-1px); color:#fff !important; }
.productDetail-buy .pd-btn .pd-btn-main{ font-weight:800; font-size:16px; letter-spacing:.3px; }
.productDetail-buy .pd-btn .pd-btn-sub{ font-size:12px; opacity:.95; font-weight:400; margin-top:2px; }
.productDetail-buy .pd-btn-buy{ background:linear-gradient(90deg,#ff9500,#ff5722); }
.productDetail-buy .pd-btn-call{ background:linear-gradient(90deg,#4aa3f0,#2b6fd6); }

/* Hỗ trợ CSKH */
.productDetail-buy .pd-support{
    background:#fff8f2; border-left:3px solid #ff8a00; border-radius:6px;
    padding:11px 15px; font-size:13.5px; color:#666; line-height:1.6;
}
.productDetail-buy .pd-support a{ color:#2b6fd6 !important; font-weight:700; white-space:nowrap; }

@media (max-width:640px){
    .productDetail-buy .pd-actions{ flex-direction:column; }
    .productDetail-intro .title{ font-size:22px !important; }
}

/* ============================================================================
   12) MOBILE HEADER + MENU ĐA CẤP (trượt panel con) + FLYOUT CẤP 3 DESKTOP
   ============================================================================ */
/* Header mobile: hamburger trái + logo giữa + giỏ hàng phải (hết đè chữ Menu/Danh mục) */
.header .upper-small.hh-msmall{
    display:flex !important; align-items:center; justify-content:space-between;
    padding:8px 12px !important; text-align:left; gap:10px;
}
.header .hh-msmall .hh-mtoggle,
.header .hh-msmall .hh-mcart{
    flex:0 0 auto; width:40px; height:40px; line-height:40px; text-align:center;
    background:var(--hh-green); color:#fff !important; border-radius:8px;
    font-size:18px; position:static !important; transform:none !important; background-image:none;
}
.header .hh-msmall .logo{ flex:1 1 auto; text-align:center; max-width:none !important; margin:0; }
.header .hh-msmall .logo img{ height:48px; width:auto; display:inline-block; max-width:75%; }

/* Offcanvas drawer rộng hơn */
.hh-mm-oc .uk-offcanvas-bar{ width:86vw; max-width:360px; padding:0 !important; background:#fff; }

/* Khung menu đa cấp */
.hh-mm{ height:100%; display:flex; flex-direction:column; background:#fff; font-family:'Inter',sans-serif; }
.hh-mm-head{ flex:0 0 54px; height:54px; background:var(--hh-green); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.hh-mm-head .hh-mm-title{ font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.3px; color:#fff; }
.hh-mm-head .hh-mm-x{ color:#fff !important; font-size:20px; width:32px; text-align:center; }
.hh-mm-body{ flex:1 1 auto; position:relative; overflow:hidden; }
.hh-mm-root{ position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.hh-mm-sec{ padding:13px 16px 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--hh-green); background:#f6f7f9; }
.hh-mm-list{ list-style:none; margin:0; padding:0; }
.hh-mm-list li{ list-style:none; margin:0; border-bottom:1px solid #f0f0f0; position:static; float:none; }
.hh-mm-row{ display:flex; align-items:stretch; }
.hh-mm-link{ flex:1 1 auto; display:block; padding:13px 16px; color:#333 !important; font-size:14px; text-decoration:none; line-height:1.3; }
.hh-mm-open{ flex:0 0 48px; width:48px; border:0; background:transparent; border-left:1px solid #f0f0f0; color:var(--hh-green); font-size:18px; cursor:pointer; }
.hh-mm-open:active{ background:var(--hh-green-light); }
/* Panel con: TRƯỢT VÀO TỪ CẠNH TRÁI, hẹp hơn cha 34px để lộ mép phải các cấp phía sau (stack) */
.hh-mm-sub{
    position:absolute; top:0; left:0; bottom:0; width:calc(100% - 34px);
    overflow-y:auto; -webkit-overflow-scrolling:touch; background:#fff;
    transform:translateX(-100%); transition:transform .28s ease; z-index:2;
    box-shadow:3px 0 18px rgba(0,0,0,.22); border-right:1px solid #ececec;
}
.hh-mm-sub.open{ transform:translateX(0); }
/* Panel phía sau (đang có con mở) -> làm tối mép lộ ra để thấy độ sâu các cấp */
.hh-mm-root.pushed::after, .hh-mm-sub.pushed::after{
    content:''; position:absolute; inset:0; background:rgba(0,0,0,.16); z-index:1; pointer-events:none;
}
.hh-mm-back{ display:flex; align-items:center; gap:8px; width:100%; padding:13px 16px; border:0; border-bottom:1px solid #eee; background:var(--hh-green-light); color:var(--hh-green); font-weight:700; font-size:14px; cursor:pointer; text-align:left; }
.hh-mm-viewall{ display:block; padding:11px 16px; color:var(--hh-green) !important; font-weight:600; font-size:13px; border-bottom:1px solid #f0f0f0; background:#fafafa; }

/* Desktop flyout CẤP 3 (khi danh mục con có con) */
.main-categories .hh-fly{ overflow:visible !important; }
.main-categories .hh-fly .hh-sub li.has-sub2{ position:relative; }
.main-categories .hh-fly .hh-sub li.has-sub2 > a{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.main-categories .hh-fly .hh-sub li .hh-sub-arrow{ color:#aaa; font-size:12px; flex:0 0 auto; }
.main-categories .hh-fly .hh-sub li.has-sub2:hover > a .hh-sub-arrow{ color:var(--hh-green); }
.main-categories .hh-fly2{ display:none; position:absolute; top:-8px; left:100%; min-width:220px; background:#fff; border:1px solid #e6e6e6; border-radius:8px; box-shadow:0 10px 26px rgba(0,0,0,.12); padding:8px 0; z-index:6; }
.main-categories .hh-fly .hh-sub li.has-sub2:hover > .hh-fly2{ display:block; }

/* ============================================================================
   13) FIX MOBILE (2026-07-27):
   (a) Nút X đóng drawer "Danh mục & Menu" đôi khi không ăn.
   (b) Nút "Gọi điện" ở thanh liên hệ nổi mobile thiếu icon.
   ============================================================================ */
/* (a) UIKit v2 chỉ đóng offcanvas khi e.target CÓ class .uk-offcanvas-close.
   Khi tap trúng glyph × (thẻ <i> con) thì target là <i> -> rơi vào nhánh
   "đang trong .uk-offcanvas-bar" -> return (không đóng). Cho <i> không nhận
   click để e.target LUÔN là <a.uk-offcanvas-close> -> luôn đóng. */
.hh-mm-oc .uk-offcanvas-close *,
.hh-mm-x *{ pointer-events:none !important; }
/* mở rộng vùng chạm cho nút X (dễ bấm hơn trên mobile) */
.hh-mm-head .hh-mm-x{ display:flex; align-items:center; justify-content:center; height:54px; min-width:44px; margin-right:-6px; }

/* (b) icon-phone-w.png là hình điện thoại MÀU TRẮNG, nền trong suốt -> tàng hình
   trên thanh liên hệ nền trắng. Thay bằng glyph FontAwesome màu xanh thương hiệu
   (đồng bộ với 4 icon phẳng còn lại, luôn hiển thị). */
.giuseart-nav .phone-mobile .phone_animation{
    display:block; width:36px; height:36px; margin:0 auto;
    background:none !important; box-shadow:none !important;
    -webkit-animation:none !important; animation:none !important; border-radius:0 !important;
}
.giuseart-nav .phone-mobile a i.icon-phone-w{
    width:36px !important; height:36px !important; margin:0 !important; display:block;
    background:none !important;
    font-family:'FontAwesome' !important; font-style:normal !important; font-weight:400 !important;
    color:var(--hh-green); font-size:31px; line-height:36px; text-align:center;
}
.giuseart-nav .phone-mobile a i.icon-phone-w::before{ content:"\f095"; }  /* fa-phone */

/* ============================================================================
   14) TOP BAR trên header (desktop) — slider chứa khối "cam kết" (slide 1) +
   nội dung admin tự thêm (Slide keyword header-top*), có nút prev/next.
   ============================================================================ */
.hh-topbar{ background:var(--hh-green-light); border-bottom:1px solid #d6ece5; }
.hh-topbar-inner{ display:flex; align-items:center; gap:10px; min-height:48px; }
.hh-topbar-viewport{ flex:1 1 auto; min-width:0; position:relative; overflow:hidden; }
.hh-topbar-track{ position:relative; }
.hh-topbar-slide{ display:none; width:100%; align-items:center; justify-content:space-between; gap:14px; padding:6px 2px; }
.hh-topbar-slide.active{ display:flex; }
.hh-topbar-item{
    display:flex; align-items:center; gap:9px; flex:1 1 0; min-width:0; justify-content:center;
    color:var(--hh-ink) !important; text-decoration:none !important;
}
.hh-topbar-item + .hh-topbar-item{ border-left:1px solid #cfe7e0; }
.hh-topbar-ico{ flex:0 0 auto; line-height:0; }
.hh-topbar-ico img{ width:26px; height:26px; object-fit:contain; display:block; }
.hh-topbar-txt{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.hh-topbar-title{
    font-weight:700; font-size:12.5px; color:var(--hh-green-dark);
    text-transform:uppercase; letter-spacing:.2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hh-topbar-sub{ font-size:11.5px; color:#6b7c77; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-topbar-arrow{
    flex:0 0 auto; width:28px; height:28px; padding:0; border-radius:50%;
    border:1px solid var(--hh-green); background:#fff; color:var(--hh-green);
    cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px;
    transition:background .15s ease, color .15s ease;
}
.hh-topbar-arrow:hover{ background:var(--hh-green); color:#fff; }

/* ============================================================================
   15) DANH MỤC SẢN PHẨM — item cấp 1 CÓ menu con hiện dấu ">" ở cuối
   (ghi đè rule ẩn .title:after ở Section 6 bằng specificity cao hơn nhờ .has-sub)
   ============================================================================ */
.main-categories .mainCat > li.has-sub > .title{ padding-right:30px !important; }
.main-categories .mainCat > li.has-sub > .title::after{
    display:block !important;
    content:"\f105" !important;               /* fa-angle-right = ">" */
    font-family:'FontAwesome' !important; font-weight:400 !important; font-style:normal !important;
    /* Ghim SÁT MÉP PHẢI card, căn giữa dọc bằng top:0+bottom:0+margin:auto
       (ghi đè top !important của CSS gốc nhờ specificity cao hơn của .has-sub) */
    position:absolute !important;
    right:12px !important; left:auto !important;
    top:0 !important; bottom:0 !important;
    height:15px !important; line-height:15px !important;
    margin:auto 0 !important;
    transform:none !important;
    width:10px; text-align:center;
    color:#b3b3b3; font-size:15px;
}
.main-categories .mainCat > li.has-sub:hover > .title::after{ color:var(--hh-green) !important; }

/* ============================================================================
   16) ANIMATION menu danh mục:
   - Dropdown cấp 2 (.hh-fly) & cấp 3 (.hh-fly2) TRƯỢT-MỜ từ trái sang khi hover
     (thay vì hiện ngay). Luôn render, ẩn bằng opacity+visibility (không phải display).
   - Item các cấp DỊCH NHẸ sang phải khi hover.
   ============================================================================ */
.main-categories .mainCat > li > .hh-fly,
.main-categories .hh-fly .hh-sub li.has-sub2 > .hh-fly2{
    display:block !important;
    opacity:0; visibility:hidden;
    transform:translateX(-12px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    pointer-events:none;
}
.main-categories .mainCat > li.has-sub:hover > .hh-fly,
.main-categories .hh-fly .hh-sub li.has-sub2:hover > .hh-fly2{
    opacity:1; visibility:visible;
    transform:translateX(0);
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
    pointer-events:auto;
}
/* Item cấp 1: dịch nhẹ sang phải khi hover (đồng bộ với indent của cấp 2 & 3) */
.main-categories .mainCat > li > .title{ transition:transform .18s ease, background .15s ease !important; }
.main-categories .mainCat > li:hover > .title{ transform:translateX(5px); }

/* ============================================================================
   17) BREADCRUMB (Trang chủ >> ... >> ...) — chữ nhỏ hơn 1 chút; trên mobile gọn
   trên 1 dòng cuộn ngang thay vì rớt xuống dòng cắt giữa câu.
   ============================================================================ */
.breadcrumb ul a,
.breadcrumb .uk-breadcrumb > li,
.breadcrumb .uk-breadcrumb > li > a,
.breadcrumb .uk-breadcrumb > li > span{ font-size:14px !important; line-height:1.55 !important; }
/* Mobile: MỖI mục 1 dòng riêng, dấu ">>" đứng đầu dòng (không cuộn ngang) */
@media (max-width:767px){
    .breadcrumb{ padding:10px 0 !important; }
    .breadcrumb ul{ padding-left:0 !important; }              /* bỏ thụt lề 22% */
    .breadcrumb .uk-breadcrumb > li{ display:block !important; font-size:14px !important; line-height:1.9; white-space:normal; }
    .breadcrumb ul a{ font-size:14px !important; }
    .breadcrumb .uk-breadcrumb > li:nth-child(n+2):before{ margin:0 6px 0 0 !important; }
}