/* LKCG – Sidebar danh mục (desktop) + Drawer (mobile)
   Đổi màu thương hiệu tại :root, không cần sửa chỗ khác. */
:root{
  --lk-accent:#0b63ce;        /* màu nhấn chính */
  --lk-accent-soft:#e8f1fc;   /* nền mục đang chọn / hover */
  --lk-text:#1d2733;
  --lk-muted:#5f6b7a;
  --lk-line:#e3e8ef;
  --lk-bg:#ffffff;
  --lk-radius:10px;
  --lk-width:280px;
  --lk-top:16px;              /* khoảng cách sticky tính từ đỉnh màn hình */
}

/* ---------- Khung chung ---------- */
.lkcg-cat{background:var(--lk-bg);border:1px solid var(--lk-line);border-radius:var(--lk-radius);
  font-size:14px;line-height:1.35;color:var(--lk-text);overflow:hidden}
.lkcg-cat *{box-sizing:border-box}
nav.lkcg-cat{height:auto;min-height:0;float:none;margin:0;padding:0} /* theme Golden Mart đặt nav{height:50px} */
.lkcg-cat__head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px;background:var(--lk-accent);color:#fff;font-weight:700;font-size:15px;letter-spacing:.2px}
.lkcg-cat__head a{color:#fff;font-weight:500;font-size:12.5px;text-decoration:none;opacity:.9}
.lkcg-cat__head a:hover{opacity:1;text-decoration:underline}
.lkcg-cat__close{display:none;background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.lkcg-cat ul{list-style:none;margin:0;padding:0}

/* ---------- Mỗi dòng ---------- */
.lkcg-cat__row{display:flex;align-items:stretch;min-height:40px}
.lkcg-cat__link{flex:1;display:flex;align-items:center;gap:10px;padding:8px 6px 8px 14px;
  color:inherit;text-decoration:none;min-width:0}
.lkcg-cat__link span{overflow:hidden;text-overflow:ellipsis}
.lkcg-cat__link:hover{color:var(--lk-accent)}
.lkcg-cat__ico{flex:0 0 20px;width:20px;height:20px;color:var(--lk-accent)}
.lkcg-cat__tog{flex:0 0 40px;display:flex;align-items:center;justify-content:center;background:none;border:0;
  color:var(--lk-muted);cursor:pointer;border-radius:8px}
.lkcg-cat__tog:hover{background:var(--lk-accent-soft);color:var(--lk-accent)}
.lkcg-cat__tog svg{width:14px;height:14px;transition:transform .2s ease}
.is-open>.lkcg-cat__row .lkcg-cat__tog svg{transform:rotate(90deg)}

/* Cấp 1 */
.lkcg-cat__l1>li{border-top:1px solid var(--lk-line)}
.lkcg-cat__l1>li:first-child{border-top:0}
.lkcg-cat__l1>li>.lkcg-cat__row .lkcg-cat__link{font-weight:600}
.lkcg-cat__l1>li.is-open>.lkcg-cat__row{background:var(--lk-accent-soft)}

/* Cấp 2, 3 – accordion */
.lkcg-cat__sub{display:none;padding:2px 0 8px}
.is-open>.lkcg-cat__sub{display:block}
.lkcg-cat__l2 .lkcg-cat__row{min-height:34px}
.lkcg-cat__l2 .lkcg-cat__link{padding:6px 6px 6px 44px;font-size:13.5px;color:#334155}
.lkcg-cat__l3 .lkcg-cat__link{padding:5px 6px 5px 60px;font-size:13px;color:var(--lk-muted)}
.lkcg-cat__l3 .lkcg-cat__link::before{content:"";width:5px;height:5px;border-radius:50%;background:#c3ccd8;flex:0 0 5px}
.lkcg-cat__l2 .lkcg-cat__tog{flex-basis:34px}

/* Mục đang xem */
.lkcg-cat .is-current>.lkcg-cat__row .lkcg-cat__link{color:var(--lk-accent);font-weight:700}
.lkcg-cat__l2 .is-current>.lkcg-cat__row,.lkcg-cat__l3 .is-current>.lkcg-cat__row{
  box-shadow:inset 3px 0 0 var(--lk-accent);background:var(--lk-accent-soft)}

/* ---------- Chế độ NGĂN KÉO (mặc định: mobile + mọi trang không có cột trái) ---------- */
.lkcg-cat{position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);z-index:10001;border-radius:0;border:0;
  transform:translateX(-102%);overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 0 40px rgba(0,0,0,.18);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.lkcg-cat.is-drawer-open{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
.lkcg-cat__head{position:sticky;top:0;z-index:1}
.lkcg-cat__close{display:block}
.lkcg-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:10000;opacity:0;pointer-events:none;transition:opacity .25s}
.lkcg-overlay.is-open{opacity:1;pointer-events:auto}
body.lkcg-lock{overflow:hidden}

/* ---------- Chế độ GẮN CỘT TRÁI (desktop, trang chủ + trang danh mục) ---------- */
@media (min-width:992px){
  .lkcg-dock>.lkcg-cat{position:static;width:auto;transform:none;visibility:visible;box-shadow:none;
    border:1px solid var(--lk-line);border-radius:var(--lk-radius);z-index:auto;overflow:hidden}
  .lkcg-dock>.lkcg-cat .lkcg-cat__close{display:none}
  .lkcg-dock>.lkcg-cat .lkcg-cat__head{position:static}
  .lkcg-dock{margin-bottom:15px}
  /* Trang chủ: lưới 2 cột, cột trái dính khi cuộn */
  .lkcg-layout{display:grid;grid-template-columns:var(--lk-width) minmax(0,1fr);gap:20px;align-items:start}
  .lkcg-layout>.lkcg-dock{position:sticky;top:var(--lk-top);margin-bottom:0}
  .lkcg-layout>.lkcg-dock>.lkcg-cat{max-height:calc(100vh - var(--lk-top)*2);overflow:auto}
  .lkcg-home{--lk-width:260px;margin-top:15px}
  /* các khối trang chủ vốn dùng .container riêng → bỏ độ rộng cố định khi nằm trong cột phải */
  .lkcg-home-main .container{width:auto!important;max-width:none!important;padding-left:0;padding-right:0}
}
.lkcg-cat.lkcg-flash{box-shadow:0 0 0 3px rgba(11,99,206,.35)!important;transition:box-shadow .3s}
.lkcg-cat::-webkit-scrollbar{width:6px}.lkcg-cat::-webkit-scrollbar-thumb{background:#cfd6df;border-radius:6px}

/* ---------- Nút mở danh mục (mobile) ---------- */
.lkcg-cat-btn{display:none;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--lk-line);
  border-radius:999px;background:#fff;color:var(--lk-text);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.lkcg-cat-btn svg{width:18px;height:18px;color:var(--lk-accent)}
@media (max-width:991px){
  .lkcg-cat-btn{display:inline-flex}
  .lkcg-cat__row{min-height:46px}
  .lkcg-cat__l2 .lkcg-cat__row{min-height:42px}
  .lkcg-layout{display:block}
  .search_form_mobile{display:flex;align-items:center;gap:8px}
  .search_form_mobile .search-form{flex:1;min-width:0}
  .lkcg-mbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px}
  /* Golden Mart: icon tìm kiếm định vị theo cột → định vị lại theo form */
  .search_form_mobile .search-form{position:relative}
  .search_form_mobile .search-form .submit_button{left:10px}
  /* Golden Mart: .button_right_cl vốn bị đẩy lên (top:-45px) */
  .lkcg-mbar .button_right_cl{position:static!important;top:auto!important;right:auto!important;float:none!important;
    display:flex;align-items:center;gap:12px}
}

/* ---------- Chip danh mục con (đầu trang danh mục) ---------- */
.lkcg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.lkcg-chips a{padding:7px 12px;border:1px solid var(--lk-line);border-radius:999px;background:#fff;
  color:var(--lk-text);text-decoration:none;font-size:13.5px;white-space:nowrap}
.lkcg-chips a:hover{border-color:var(--lk-accent);color:var(--lk-accent);background:var(--lk-accent-soft)}

@media (max-width:991px){.lkcg-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:4px 0 12px;padding:0 10px 4px}}
/* Trang chủ: lưới sản phẩm dùng float → ô cao thấp khác nhau bị kẹt, xuống dòng lệch. Chuyển sang flex. */
.lkcg-home-main .child_tab,.lkcg-home-main .wrap-product>ul{display:flex;flex-wrap:wrap}
.lkcg-home-main .child_tab::before,.lkcg-home-main .child_tab::after,
.lkcg-home-main .wrap-product>ul::before,.lkcg-home-main .wrap-product>ul::after{content:none;display:none}
.lkcg-home-main .child_tab>*,.lkcg-home-main .wrap-product>ul>li{float:none}
.lkcg-home-main .child_tab>.tab_more{flex-basis:100%}
/* Banner trang chủ: nằm cột phải cạnh sidebar, khung cố định 2:1, ảnh tự co/căn giữa.
   Kích thước ảnh khuyên dùng: 1600 x 800 px (tối thiểu 1200 x 600), JPG/WebP < 300 KB.
   Chữ & logo nên nằm trong vùng an toàn giữa ảnh, cách mép trên/dưới >= 8%. */
.lkcg-hero{margin:0 0 20px;border-radius:var(--lk-radius);overflow:hidden;background:#eef4fb}
.lkcg-hero #slide_banner .item{aspect-ratio:2/1!important;height:auto!important}
.lkcg-hero #slide_banner .item a{height:100%!important}
.lkcg-hero #slide_banner .item img{width:100%!important;height:100%!important;object-fit:cover;object-position:center}
.lkcg-hero .owl-controls{position:absolute!important;left:0;right:0;bottom:6px;margin:0!important;text-align:center}
.lkcg-hero #slide_banner{position:relative}
@media (max-width:991px){.lkcg-hero{margin:10px 0 15px;border-radius:6px}}
@media (prefers-reduced-motion:reduce){.lkcg-cat,.lkcg-cat__tog svg,.lkcg-overlay{transition:none}}