/*
Theme Name:  Nội thất phòng lab – Lý Sơn Sa Kỳ
Theme URI:   https://lysonsaky.vn
Author:      Lý Sơn Sa Kỳ Lab
Version:     4.0.17
Requires at least: 5.8
Requires PHP: 7.4
Tested up to PHP: 8.3
License: Private
Text Domain: lysonsaky
*/

/* ══ 1. VARIABLES ══ */
:root {
  --c-green:   #018957;
  --c-dark:    #005f3a;
  --c-light:   #e8f5ee;
  --c-accent:  #91C03E;
  --c-ink:     #0d1f0d;
  --c-text:    #2d2d2d;
  --c-muted:   #666;
  --c-border:  #e2e8e4;
  --c-bg:      #fff;
  --c-bg2:     #f7fdf9;

  --font:  'Roboto', 'Segoe UI', Arial, sans-serif;

  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-full: 9999px;

  --sh-sm: 0 2px 8px rgba(0,0,0,.06);
  --sh-md: 0 4px 20px rgba(0,0,0,.09);
  --sh-lg: 0 8px 36px rgba(0,0,0,.13);

  --top-h:   36px;
  --main-h:  68px;
  --hdr-h:   calc(var(--top-h) + var(--main-h));

  --py: 72px;  /* section padding */
  --t: .2s ease;
}

/* ══ 2. RESET ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: 15px; color: var(--c-text); background: var(--c-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1.25; font-weight: 700; color: var(--c-text); }
button { font-family: var(--font); cursor: pointer; border: none; background: none; padding: 0; }
input, select, textarea { font-family: var(--font); }
h1 { font-size: clamp(22px,4vw,38px); }
h2 { font-size: clamp(20px,3vw,30px); }
h3 { font-size: clamp(16px,2.5vw,22px); }
h4 { font-size: 17px; }

/* ══ 3. UTILITIES ══ */
.lssk-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.lssk-section   { padding: var(--py) 0; }
.lssk-section-header { text-align: center; margin-bottom: 52px; }
.lssk-section-footer { text-align: center; margin-top: 40px; }

.lssk-section-title {
  font-size: clamp(22px,3vw,32px); color: var(--c-green);
  text-transform: uppercase; letter-spacing: .5px;
  text-align: center; position: relative; padding-bottom: 20px; margin-bottom: 10px;
}
.lssk-section-title::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 52px; height: 3px; background: var(--c-accent); border-radius: var(--r-full);
}
.lssk-section-title.align-left { text-align: left; }
.lssk-section-title.align-left::after { left: 0; transform: none; }
.lssk-section-subtitle { text-align: center; color: var(--c-muted); font-size: 16px; margin-top: 8px; }

/* Buttons */
.lssk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 26px; border-radius: var(--r-md);
  font-weight: 600; font-size: 14px; letter-spacing: .2px;
  border: 2px solid transparent; transition: all var(--t);
  white-space: nowrap; text-decoration: none; cursor: pointer;
  font-family: var(--font);
}
.lssk-btn-primary { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.lssk-btn-primary:hover { background: var(--c-dark); border-color: var(--c-dark); color: #fff; }
.lssk-btn-outline { background: transparent; border-color: var(--c-green); color: var(--c-green); }
.lssk-btn-outline:hover { background: var(--c-green); color: #fff; }
.lssk-btn-white { background: #fff; border-color: #fff; color: var(--c-green); }
.lssk-btn-white:hover { background: var(--c-light); color: var(--c-dark); }
.lssk-btn-outline-white { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.lssk-btn-outline-white:hover { background: rgba(255,255,255,.15); }
.lssk-btn-accent { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.lssk-btn-accent:hover { background: #7aaa2e; border-color: #7aaa2e; color: #fff; }
.lssk-btn-lg { padding: 14px 36px; font-size: 16px; }

/* Grids */
.lssk-grid   { display: grid; gap: 28px; }
.lssk-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lssk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lssk-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Term badges */
.lssk-term-badge {
  display: inline-block; background: var(--c-light); color: var(--c-green);
  border: 1px solid #c1e0cf; padding: 2px 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; transition: background var(--t), color var(--t);
}
.lssk-term-badge:hover { background: var(--c-green); color: #fff; }

/* Accessibility */
.lssk-skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 99999;
  background: var(--c-green); color: #fff;
  padding: 10px 18px; border-radius: 0 0 var(--r-md) var(--r-md); transition: top .2s;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-green); outline-offset: 3px; border-radius: var(--r-sm);
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ══ 4. LAYOUT — SITE WRAPPER ══ */
.lssk-site-content { padding-top: var(--hdr-h); }

/* Content layout (page, blog) */
.lssk-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}
.lssk-content-layout--full { grid-template-columns: 1fr; }
.lssk-content-layout--full .lssk-content-main { max-width: 900px; margin: 0 auto; width: 100%; }
.lssk-content-main { min-width: 0; overflow: visible; }

/* Single CPT layout (du-an, thiet-ke) → full grid definition below */
.lssk-single-layout--full { grid-template-columns: 1fr; }
.lssk-single-layout--full .lssk-single-main { max-width: 900px; margin: 0 auto; width: 100%; }
/* Base single-layout: 2-column (main + sidebar) on desktop */
.lssk-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}
.lssk-single-main { min-width: 0; overflow: visible; }
.lssk-single-aside {
  position: sticky;
  top: calc(var(--hdr-h) + 20px);
}

/* Single SP layout */
.lssk-sp-single-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

/* ══ 5. HEADER ══ */
.lssk-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: #fff; box-shadow: var(--sh-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.lssk-header.is-sticky { box-shadow: 0 4px 24px rgba(0,0,0,.12); }

/* Topbar */
.lssk-topbar { background: var(--c-ink); height: var(--top-h); overflow: hidden; }
.lssk-topbar-inner {
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.lssk-topbar-left  { display: flex; align-items: center; gap: 20px; }
.lssk-topbar-right { display: flex; align-items: center; gap: 14px; }
.lssk-topbar-link {
  color: rgba(255,255,255,.78); font-size: 12px;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; padding: 2px 6px;
}
.lssk-topbar-link i { color: var(--c-accent); font-size: 10px; }
.lssk-topbar-link:hover { color: #fff; }
.lssk-topbar-link:hover { color: #fff; }
.lssk-topbar-social-link a:hover { background: var(--c-green); color: #fff; }
.lssk-topbar-zalo, .lssk-topbar-facebook, .lssk-topbar-youtube { width: 25px; height: 25px; object-fit: contain; /*filter: brightness(0) invert(.75);*/ }
.lssk-topbar-social-link:hover img { /* filter: brightness(0) invert(1); */ transition: 0.3s; }
/* Main bar */
.lssk-header-main { height: var(--main-h); }
.lssk-header-main-inner {
  display: flex; align-items: center; height: 100%; gap: 20px;
}

/* Logo */
.lssk-logo { flex-shrink: 0; }
.lssk-logo a { display: flex; align-items: center; }
.lssk-logo img { height: 60px; width: auto; object-fit: contain;}

/* ══ 6. NAVIGATION — MULTI-LEVEL ══ */
/*.lssk-nav { flex: 1; display: flex; align-items: center; }
.lssk-menu { display: flex; align-items: center; gap: 2px; }
.lssk-menu-item { position: relative; }*/
/* NAV */
.lssk-nav {
    flex: 1;
    display: flex;
    align-items: center;
}

/* MENU */
.lssk-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ITEM */
.lssk-menu-item {
    position: relative;
    margin: 0;
    padding: 0;
}

/* LINK */
.lssk-menu-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    color: #222;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: all .25s ease;
    border-radius: 6px;
}

/* HOVER */
.lssk-menu-item > a:hover {
    color: #0a7cff;
    background: rgba(10,124,255,.08);
}

/* ACTIVE */
.lssk-menu-item.current-menu-item > a,
.lssk-menu-item.current_page_item > a {
    color: #0a7cff;
    font-weight: 600;
}

/* UNDERLINE EFFECT */
.lssk-menu-item > a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 8px;
    height: 2px;
    background: #0a7cff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.lssk-menu-item:hover > a::after,
.lssk-menu-item.current-menu-item > a::after,
.lssk-menu-item.current_page_item > a::after {
    transform: scaleX(1);
}

/* SUB MENU */
.lssk-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    z-index: 100;
}

.lssk-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lssk-menu .sub-menu li {
    margin: 0;
}

.lssk-menu .sub-menu a {
    display: block;
    padding: 10px 16px;
    color: #222;
    text-decoration: none;
    transition: .2s;
}

.lssk-menu .sub-menu a:hover {
    background: #f5f7fa;
    color: #0a7cff;
}

/* MOBILE */
@media (max-width: 991px) {
    .lssk-menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .lssk-menu-item > a {
        justify-content: flex-start;
        padding: 14px 16px;
    }

    .lssk-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none;
        padding-left: 16px;
    }

    .lssk-menu .menu-item-has-children.open > .sub-menu {
        display: block;
    }
}

.lssk-menu-item--d0 {
  /* Extend hit area 10px below link — cursor không rời li khi vào khoảng trống trước dropdown */
  padding-bottom: 10px;
  margin-bottom: -10px;
}
.lssk-menu-item--d0 > a {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 14px; font-weight: 500;
  color: var(--c-ink); white-space: nowrap;
  border-radius: var(--r-md); position: relative;
  transition: color var(--t), background var(--t);
}
.lssk-menu-item--d0 > a:hover { color: var(--c-green); background: var(--c-light); }

/* Mũi tên */
.lssk-arrow { font-size: 10px; transition: transform var(--t); flex-shrink: 0; line-height: 1; margin-top: 1px; margin-left: auto;}
.lssk-menu-item--d0.is-hovered > a .lssk-arrow { transform: rotate(180deg); }
.lssk-arrow--right { transform: rotate(90deg) !important; }
.lssk-has-children:hover > a .lssk-arrow--right { transform: rotate(-90deg) !important; }

/* ── Dropdown level 1 ── */
.lssk-submenu--d0 {
  position: absolute;
  top: 100%; left: 0;  /* Ngay dưới li (bao gồm padding-bottom 10px) */
  min-width: 220px;
  background: #fff;
  box-shadow: var(--sh-lg);
  border-radius: var(--r-md);
  border-top: 3px solid var(--c-green);
  padding: 8px 0;
  margin-top: 0;  /* Visual gap từ padding-bottom của li */
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 100;
  pointer-events: none;
}
/* Dropdown chỉ mở qua JS .is-hovered class — tránh CSS :hover gap flicker */
.lssk-menu-item--d0.is-hovered > .lssk-submenu--d0 {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* Hover bridge handled by padding-bottom on .lssk-menu-item--d0 */

/* Active indicator — gạch xanh dưới top-level active item */
.lssk-menu-item--d0.is-active > a::before {
  content: '';
  position: absolute; bottom: -1px; left: 14px; right: 14px; height: 2px;
  background: var(--c-green); border-radius: 2px;
}
.lssk-submenu--d0 .lssk-menu-item { position: relative; }
.lssk-submenu--d0 .lssk-menu-item > a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 14px;
  color: var(--c-text);
  transition: background var(--t), color var(--t);
}
.lssk-submenu--d0 .lssk-menu-item > a:hover { background: var(--c-light); color: var(--c-green); }
.lssk-submenu--d0 .lssk-menu-item.is-active > a { color: var(--c-green); font-weight: 600; }
.lssk-arrow--right { transform: rotate(-90deg); }

/* ── Dropdown level 2 (flyout) ── */
.lssk-submenu--d1 {
  position: absolute;
  top: -8px; left: 100%;
  min-width: 200px;
  background: #fff;
  box-shadow: var(--sh-lg);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-accent);
  padding: 8px 0;
  opacity: 0; visibility: hidden;
  transform: translateX(8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: 101;
  pointer-events: none;
}
.lssk-submenu--d0 .lssk-has-children:hover > .lssk-submenu--d1 {
  opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto;
}
.lssk-submenu--d1 .lssk-menu-item > a {
  display: block; padding: 8px 16px; font-size: 13px;
  color: var(--c-text); white-space: nowrap;
  transition: background var(--t), color var(--t), padding-left var(--t);
}
.lssk-submenu--d1 .lssk-menu-item > a:hover { background: var(--c-light); color: var(--c-green); padding-left: 20px; }

/* Mobile nav overlay */
.lssk-nav-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 899;
  opacity: 0; transition: opacity var(--t);
}
.lssk-nav-overlay.is-visible { opacity: 1; }

/* Drawer elements (hidden on desktop) */
.lssk-drawer-header { display: none; } /* Hidden on desktop, shown in mobile via @media */

/* Header actions */
.lssk-header-actions {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; flex-shrink: 0;
}

/* Hotline button (desktop) */
.lssk-header-hotline {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 10px;
  background: var(--c-light); border-radius: var(--r-full);
  border: 1px solid #c1e0cf; text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
.lssk-header-hotline:hover { background: var(--c-green); border-color: var(--c-green); }
.lssk-header-hotline:hover * { color: #fff !important; }
.lssk-header-hotline__icon {
  width: 34px; height: 34px; background: var(--c-green);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; flex-shrink: 0;
  transition: background var(--t);
}
.lssk-header-hotline:hover .lssk-header-hotline__icon { background: rgba(255,255,255,.25); }
.lssk-header-hotline__text { display: flex; flex-direction: column; line-height: 1.2; }
.lssk-header-hotline__text small { font-size: 10px; color: var(--c-muted); font-weight: 400; }
.lssk-header-hotline__text strong { font-size: 14px; color: var(--c-green); font-weight: 700; white-space: nowrap; }

/* Search button */
.lssk-search-trigger {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--c-text); font-size: 15px;
  transition: background var(--t), color var(--t);
}
.lssk-search-trigger:hover { background: var(--c-light); color: var(--c-green); }

/* CTA */
.lssk-header-cta { padding: 8px 20px; font-size: 13px; }

/* Hamburger */
.lssk-hamburger {
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; width: 40px; height: 40px;
}
.lssk-hamburger span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.lssk-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lssk-hamburger.is-active span:nth-child(2) { opacity: 0; }
.lssk-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ 7. LIVE SEARCH ══ */
.lssk-search-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(5,20,5,.75); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 100px; opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.lssk-search-overlay.is-active { opacity: 1; visibility: visible; }
.lssk-search-box { width: 100%; max-width: 700px; margin: 0 20px; }
.lssk-search-input-row {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: var(--r-full);
  padding: 4px 4px 4px 20px; box-shadow: var(--sh-lg);
}
.lssk-search-input-row i.fa-search { color: var(--c-green); font-size: 16px; flex-shrink: 0; }
#lssk-search-input {
  flex: 1; border: none; outline: none;
  padding: 12px 0; font-size: 17px; background: transparent; color: var(--c-text);
}
#lssk-search-input::placeholder { color: #aaa; }
.lssk-search-close-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #888; font-size: 16px; flex-shrink: 0;
  transition: background var(--t);
}
.lssk-search-close-btn:hover { background: #f0f0f0; color: var(--c-text); }
.lssk-search-results {
  background: #fff; border-radius: var(--r-md); margin-top: 8px;
  max-height: 60vh; overflow-y: auto; box-shadow: var(--sh-md);
}
.lssk-search-loading, .lssk-search-empty { padding: 28px; text-align: center; color: var(--c-muted); }
.lssk-search-empty i { font-size: 40px; color: #ddd; display: block; margin-bottom: 12px; }
.lssk-search-list { padding: 6px 0; }
.lssk-search-list li a { display: flex; align-items: center; gap: 14px; padding: 10px 16px; transition: background var(--t); }
.lssk-search-list li a:hover { background: var(--c-light); }
.lssk-search-list img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.lssk-search-item-body { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.lssk-search-type { font-size: 11px; color: var(--c-green); font-weight: 700; text-transform: uppercase; }
.lssk-search-item-body strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text); }
.lssk-search-excerpt { font-size: 12px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lssk-search-all-row { border-top: 1px solid var(--c-border); padding: 10px 16px; text-align: right; }
.lssk-search-all-row a { color: var(--c-green); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }

/* ══ 8. HERO SLIDER ══ */
.lssk-hero { position: relative; overflow: hidden; }
.lssk-hero-static {
  position: relative; min-height: 540px;
  background-size: cover; background-position: center;
  display: flex; align-items: center;
}
.lssk-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(1,50,30,.82) 0%, rgba(0,0,0,.35) 60%, transparent 100%);
}
.lssk-slide-content--left   { margin-right: auto; text-align: left; }
.lssk-slide-content--center { margin: 0 auto; text-align: center; }
.lssk-slide-content--right  { margin-left: auto; text-align: right; }
.lssk-slide-title {
  font-size: clamp(26px,4.5vw,54px); font-weight: 800; line-height: 1.15;
  color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.4); margin-bottom: 16px;
}
.lssk-slide-title span { color: var(--c-accent); }
.lssk-slide-subtitle {
  font-size: clamp(15px,2vw,20px); color: rgba(255,255,255,.88);
  text-shadow: 0 1px 6px rgba(0,0,0,.35); margin-bottom: 30px; line-height: 1.6;
}
.lssk-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══ 9. HOMEPAGE ══ */
/* About */
.lssk-about { background: #fff; }
.lssk-about-image img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.lssk-about-badge i { font-size: 22px; color: var(--c-accent); }
.lssk-about-text p { color: #555; line-height: 1.85; margin-bottom: 16px; }
.lssk-stat-item { display: flex; flex-direction: column; }
.lssk-stat-num { font-size: 42px; font-weight: 900; color: var(--c-green); line-height: 1; font-variant-numeric: tabular-nums; }
.lssk-stat-num::after { content: '+'; font-size: 26px; }
.lssk-stat-label { font-size: 13px; color: var(--c-muted); margin-top: 4px; }

/* Cam kết */
.lssk-camket { position: relative; padding: var(--py) 0; background: var(--c-ink); }
.lssk-camket::before { content: ''; position: absolute; inset: 0; background: rgba(3,18,3,.82); }
.lssk-camket-inner { position: relative; z-index: 1; }
.lssk-camket .lssk-section-title { color: #fff; }
.lssk-camket .lssk-section-title::after { background: var(--c-accent); }
.lssk-camket-item {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); padding: 32px 22px; text-align: center;
  transition: background var(--t), transform var(--t);
}
.lssk-camket-item:hover { background: rgba(255,255,255,.12); transform: translateY(-4px); }
.lssk-camket-icon { margin-bottom: 18px; }
.lssk-camket-icon i { font-size: 44px; color: var(--c-accent); }
.lssk-camket-item h3 { color: var(--c-accent); font-size: 14px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.lssk-camket-item p { color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.75; }

/* CTA section */
.lssk-cta-section { background: linear-gradient(135deg, var(--c-ink) 0%, var(--c-dark) 100%); padding: var(--py) 0; }
.lssk-cta-text h2 { font-size: clamp(24px,3.5vw,40px); color: #fff; margin-bottom: 14px; line-height: 1.2; }
.lssk-cta-text h2 span { color: var(--c-accent); }
.lssk-cta-text p { color: rgba(255,255,255,.8); font-size: 16px; margin-bottom: 20px; }
.lssk-cta-list { list-style: none; margin: 0; }
.lssk-cta-list li { color: rgba(255,255,255,.9); font-size: 15px; padding: 5px 0; display: flex; align-items: center; gap: 10px; }
.lssk-cta-list i { color: var(--c-accent); font-size: 16px; flex-shrink: 0; }

/* Brands */
.lssk-brands { background: #f2f5f2; overflow: hidden; padding: 52px 0; }
.lssk-brands-track-wrap { overflow: hidden; }
.lssk-brands-track { display: flex; align-items: center; gap: 28px; animation: brand-scroll 30s linear infinite; width: max-content; }
.lssk-brands-track:hover { animation-play-state: paused; }
.lssk-brand-item { flex-shrink: 0; width: 160px; height: 80px; background: #fff; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; padding: 12px; box-shadow: var(--sh-sm); }
.lssk-brand-item img { max-width: 100%; max-height: 54px; object-fit: contain; filter: none; opacity: 1; transition: transform var(--t); }
.lssk-brand-item:hover img { transform: scale(1.03); }
@keyframes brand-scroll { 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }

/* Animations */
.lssk-animate { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.lssk-animate.is-visible { opacity: 1; transform: translateY(0); }
.lssk-animate:nth-child(2) { transition-delay: .1s; }
.lssk-animate:nth-child(3) { transition-delay: .2s; }
.lssk-animate:nth-child(4) { transition-delay: .3s; }

/* ══ 10. PAGE BANNER ══ */
.lssk-page-banner {
  background: linear-gradient(135deg, var(--c-ink) 0%, var(--c-dark) 100%);
  padding: 48px 0 36px; position: relative; overflow: hidden;
}
.lssk-page-banner::after {
  content: ''; position: absolute; right: -5%; top: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(145,192,62,.18) 0%, transparent 70%);
  pointer-events: none;
}
.lssk-page-banner__inner { position: relative; z-index: 1; }
.lssk-page-banner__breadcrumb { margin-bottom: 10px; }
.lssk-page-banner__breadcrumb span,
.lssk-page-banner__breadcrumb a { font-size: 13px; color: rgba(255,255,255,.6); }
.lssk-page-banner__breadcrumb a:hover { color: rgba(255,255,255,.9); }
.lssk-page-banner__breadcrumb .sep { margin: 0 6px; }
.lssk-page-banner__title { font-size: clamp(22px,3vw,36px); color: #fff; font-weight: 700; margin-bottom: 8px; }
.lssk-page-banner__desc  { color: rgba(255,255,255,.78); font-size: 15px; }
/* Rank Math breadcrumb */
.rank-math-breadcrumb { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.rank-math-breadcrumb a { color: rgba(255,255,255,.78); }
.rank-math-breadcrumb a:hover { color: #fff; }
.rank-math-breadcrumb .separator { margin: 0 6px; }

/* ══ 11. CARDS ══ */
.lssk-card {
  background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--c-border);
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease;
}
.lssk-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.lssk-card__thumb { display: block; overflow: hidden; position: relative; aspect-ratio: 4/3; background: var(--c-border); flex-shrink: 0; }
.lssk-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.lssk-card:hover .lssk-card__thumb img { transform: scale(1.07); }
.lssk-card__badge { position: absolute; top: 12px; left: 12px; background: var(--c-accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); }
.lssk-card__body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.lssk-card__terms { display: flex; flex-wrap: wrap; gap: 5px; }
.lssk-card__title { font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0; }
.lssk-card__title a { color: var(--c-text); }
.lssk-card__title a:hover { color: var(--c-green); }
.lssk-card__excerpt { color: var(--c-muted); font-size: 13px; line-height: 1.65; flex: 1; }
.lssk-card__date    { color: #aaa; font-size: 12px; }
.lssk-card__meta    { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--c-muted); }
.lssk-card__meta i  { color: var(--c-green); margin-right: 3px; }
.lssk-card__more { display: inline-flex; align-items: center; gap: 6px; color: var(--c-green); font-size: 13px; font-weight: 600; margin-top: auto; }
.lssk-card__more:hover { color: var(--c-dark); }
/* SP card */
.lssk-card__specs { display: flex; gap: 6px; flex-wrap: wrap; }
.lssk-spec-tag { font-size: 11px; color: var(--c-muted); background: #f5f5f5; padding: 2px 8px; border-radius: var(--r-full); }
.lssk-card__sku { font-size: 11px; color: var(--c-muted); margin: 0; font-family: monospace; }
.lssk-card--san-pham .lssk-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-border); }
.lssk-card__quote { font-size: 12px; color: var(--c-green); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.lssk-card__quote:hover { color: var(--c-dark); }

/* ══ 12. ARCHIVE & FILTER ══ */

/* Archive wrapper */
.lssk-archive-wrap    { position: relative; }
.lssk-archive-section { padding-bottom: 60px; }

/* ── Toolbar ── */
.lssk-filter-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 16px; margin-bottom: 24px;
  padding: 14px 18px;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.lssk-filter-toolbar__left {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; flex: 1; min-width: 0;
}
.lssk-filter-toolbar__right {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

/* Result count */
.lssk-filter-result-count {
  font-size: 14px; color: var(--c-muted); margin: 0;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.lssk-filter-result-count__num {
  font-size: 16px; font-weight: 700; color: var(--c-text);
  transition: transform .2s;
}
.lssk-count-bump { animation: lssk-bump .3s ease; }
@keyframes lssk-bump { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.25); } }

/* Active chips */
.lssk-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lssk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--c-light); border: 1px solid #b8e0cb;
  border-radius: var(--r-full); padding: 4px 6px 4px 10px;
  font-size: 12px; color: var(--c-dark); line-height: 1.4;
  animation: lssk-chip-in .2s ease;
}
@keyframes lssk-chip-in { from { opacity:0; transform: scale(.85); } to { opacity:1; transform: scale(1); } }
.lssk-chip__text strong { color: var(--c-green); }
.lssk-chip__remove {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(1,137,87,.1); color: var(--c-green);
  font-size: 9px; display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.lssk-chip__remove:hover { background: #e74c3c; color: #fff; }

/* Reset all */
.lssk-filter-reset-all {
  font-size: 12px; color: #e74c3c; display: flex;
  align-items: center; gap: 4px; white-space: nowrap;
  opacity: .85; transition: opacity var(--t);
}
.lssk-filter-reset-all:hover { opacity: 1; }
.lssk-link-btn { background: none; border: none; cursor: pointer; color: var(--c-green); font-size: inherit; text-decoration: underline; }

/* Sort select */
.lssk-filter-sort { position: relative; }
.lssk-filter__select-wrap { position: relative; display: flex; align-items: center; }
.lssk-filter__select-wrap > .fa-sort-amount-down {
  position: absolute; left: 10px; color: var(--c-muted); font-size: 12px; pointer-events: none; z-index: 1;
}
.lssk-filter-sort__select {
  padding: 8px 30px 8px 30px;
  border: 1.5px solid var(--c-border); border-radius: var(--r-md);
  font-size: 13px; color: var(--c-text); background: #fff;
  appearance: none; cursor: pointer; font-family: var(--font);
  transition: border-color var(--t);
}
.lssk-filter-sort__select:focus { border-color: var(--c-green); outline: none; box-shadow: 0 0 0 3px rgba(1,137,87,.12); }
.lssk-filter__select-icon {
  position: absolute; right: 10px; color: var(--c-muted);
  font-size: 9px; pointer-events: none; top: 50%; line-height: 1; transform: translateY(-50%);
}

/* View toggle */
.lssk-view-toggle {
  display: flex; border: 1.5px solid var(--c-border);
  border-radius: var(--r-md); overflow: hidden;
}
.lssk-view-toggle__btn {
  width: 36px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--c-muted);
  border: none; background: #fff;
  transition: background var(--t), color var(--t);
}
.lssk-view-toggle__btn + .lssk-view-toggle__btn { border-left: 1.5px solid var(--c-border); }
.lssk-view-toggle__btn:hover { background: var(--c-bg2); color: var(--c-text); }
.lssk-view-toggle__btn.is-active { background: var(--c-green); color: #fff; }

/* Filter toggle (mobile) */
.lssk-filter-toggle-btn {
  display: none; /* shown via media query */
  align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  color: var(--c-text); background: #fff;
  border: 1.5px solid var(--c-border); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--t), box-shadow var(--t);
  position: relative;
}
.lssk-filter-toggle-btn:hover { border-color: var(--c-green); }
.lssk-filter-toggle-btn__badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--c-green); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: var(--r-full); display: flex; align-items: center; justify-content: center;
}

/* ── Filter panel (desktop: sidebar / mobile: drawer) ── */
.lssk-filter-panel {
  margin-bottom: 28px;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  overflow: hidden;
}
.lssk-filter-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--c-border);
  background: var(--c-bg2);
}
.lssk-filter-panel__title {
  font-size: 14px; font-weight: 700; color: var(--c-text);
  display: flex; align-items: center; gap: 8px; margin: 0;
}
.lssk-filter-panel__title i { color: var(--c-green); }
.lssk-filter-panel__close:hover { background: rgba(0,0,0,.12); }

/* Filter form */
.lssk-filter-form { padding: 16px 20px; }
.lssk-filter-group { border: none; padding: 0; margin: 0; }
.lssk-filter-group__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--c-muted); margin-bottom: 6px;
}
.lssk-filter-group__label i { color: var(--c-green); font-size: 10px; }
.lssk-filter-group__select-wrap { position: relative; }
.lssk-filter__select {
  width: 100%; padding: 9px 30px 9px 12px;
  border: 1.5px solid var(--c-border); border-radius: var(--r-md);
  font-size: 13px; color: var(--c-text); background: #fff;
  appearance: none; cursor: pointer; font-family: var(--font);
  transition: border-color var(--t), box-shadow var(--t);
}
.lssk-filter__select:focus {
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(1,137,87,.12);
  outline: none;
}
.lssk-filter__select:hover:not(:focus) { border-color: var(--c-muted); }
.lssk-filter__select option[value=""] { color: var(--c-muted); }

/* Mobile footer */
.lssk-filter-form__footer {
  display: none; /* shown on mobile */
  gap: 10px; padding-top: 16px; margin-top: 16px;
  border-top: 1px solid var(--c-border);
}
.lssk-filter-form__apply-count { font-size: 11px; opacity: .8; }

/* Drawer overlay */
.lssk-filter-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 498;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s;
}
.lssk-filter-overlay.is-visible { opacity: 1; }

/* ── Results grid ── */
.lssk-filter-results { min-height: 300px; }
.lssk-filter-results--loading { pointer-events: none; }
.lssk-filter-results--loading .lssk-card { opacity: .4; }

/* List view */
.lssk-grid--list {
  display: flex; flex-direction: column; gap: 16px;
}

/* Skeleton */
.lssk-skeleton { pointer-events: none; }
.lssk-skeleton__thumb {
  aspect-ratio: 4/3;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.lssk-skeleton__body { padding: 18px; }
.lssk-skeleton__line {
  height: 12px; margin-bottom: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.lssk-skeleton__line--short  { width: 55%; }
.lssk-skeleton__line--xshort { width: 35%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Load More */
.lssk-loadmore-wrap {
  text-align: center; margin-top: 48px;
  padding-top: 32px; border-top: 1px solid var(--c-border);
}
.lssk-loadmore-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 36px; font-size: 14px; font-weight: 600;
  color: var(--c-green); background: #fff;
  border: 2px solid var(--c-green); border-radius: var(--r-full);
  cursor: pointer; transition: background var(--t), color var(--t), transform var(--t);
}
.lssk-loadmore-btn:hover { background: var(--c-green); color: #fff; transform: translateY(-2px); }
.lssk-loadmore-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.lssk-loadmore-btn.is-loading .lssk-loadmore-btn__text { opacity: .5; }
.lssk-loadmore-btn.is-loading .lssk-loadmore-btn__icon { display: none; }
.lssk-loadmore-btn__loading { display: none; }
.lssk-loadmore-btn.is-loading .lssk-loadmore-btn__loading { display: inline; }
.lssk-loadmore-done {
  font-size: 13px; color: var(--c-muted);
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
}
.lssk-loadmore-done i { color: var(--c-green); }

/* No results */
.lssk-no-results-inline {
  grid-column: 1 / -1; text-align: center;
  padding: 64px 24px; color: var(--c-muted);
}
.lssk-no-results-inline i { font-size: 48px; color: #ddd; display: block; margin-bottom: 16px; }
.lssk-no-results-inline p { font-size: 15px; margin: 6px 0; }
.lssk-no-results-inline__hint { font-size: 13px; }

/* Body lock when drawer open */
body.lssk-drawer-open { overflow: hidden; }

/* ══════════════════════════════════════
   RESPONSIVE — Filter drawer on mobile
═══════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Toggle button hiện trên mobile */
  .lssk-filter-toggle-btn { display: flex; }

  /* Filter panel → fixed drawer from bottom */
  .lssk-filter-panel {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 499;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 90vh; overflow-y: auto;
    transform: translateY(105%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    margin: 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.18);
  }
  .lssk-filter-panel.is-open { transform: translateY(0); }.lssk-filter-panel__close {
  display: flex;
  /* shown on mobile */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: var(--c-text);
  font-size: 13px;
  align-items: center;
  justify-content: center;
  transition: background var(--t);
}

  .lssk-filter-form__footer { display: flex; }
  .lssk-filter-overlay { display: block; }
}

@media (max-width: 600px) {.lssk-filter-form__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
  .lssk-filter-toolbar { padding: 12px 14px; }
  .lssk-view-toggle { display: none; } /* ẩn trên mobile nhỏ */
}

/* ══ 13. SINGLE CPT ══ */
/* Badges */
.lssk-single-badges { margin-bottom: 20px; }
.lssk-tax-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.lssk-tax-row__label { font-size: 12px; font-weight: 600; color: var(--c-muted); min-width: 72px; flex-shrink: 0; }

/* Project info */
.lssk-project-info {
  background: var(--c-bg2); border-radius: var(--r-lg);
  padding: 0; margin-bottom: 28px;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-green);
  overflow: hidden;
}
.lssk-project-info__title {
  font-size: 14px; font-weight: 700; color: var(--c-green);
  padding: 12px 16px; margin: 0; background: var(--c-bg2);
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--c-border);
}
/* project-info sub-elements → see "Project info table" section below */

/* Specs (SP) */
.lssk-specs-table th, .lssk-specs-table td { padding: 9px 12px; border-bottom: 1px solid var(--c-border); vertical-align: middle; text-align: left; }
.lssk-specs-table tr:last-child th, .lssk-specs-table tr:last-child td { border-bottom: none; }

/* SP CTA */
.lssk-sp-cta { background: var(--c-light); border: 1px solid #b8dfc9; border-radius: var(--r-lg); padding: 20px 24px; margin: 22px 0; }
.lssk-sp-cta__content h3 { font-size: 16px; color: var(--c-green); margin-bottom: 5px; }
.lssk-sp-cta__content p  { font-size: 13px; color: var(--c-muted); margin-bottom: 14px; }
.lssk-sp-cta__actions .lssk-btn { font-size: 13px; padding: 9px 20px; }
.lssk-sp-desc__title { font-size: 16px; color: var(--c-green); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--c-border); }

/* CTA bar */

/* Media sections */
.lssk-media-section { margin: 36px 0; padding-top: 30px; border-top: 1px solid var(--c-border); }
.lssk-media-section__title { font-size: 16px; font-weight: 700; color: var(--c-green); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.lssk-video-wrap { border-radius: var(--r-md); overflow: hidden; }
.lssk-video-wrap iframe { display: block; max-width: 100%; }
.lssk-video-wrap video  { width: 100%; border-radius: var(--r-md); display: block; }
.lssk-model-hint { text-align: center; color: var(--c-muted); font-size: 13px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lssk-model-hint i { color: var(--c-green); }

/* Related CPT */
.lssk-related-cpt { margin-top: 52px; padding-top: 40px; border-top: 1px solid var(--c-border); }
.lssk-related-cpt__title { font-size: 20px; color: var(--c-green); margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }

/* Post nav (CPT) */
.lssk-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--c-border); }
.lssk-post-nav__prev, .lssk-post-nav__next {
  display: flex; flex-direction: column; padding: 14px 16px;
  background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--r-md);
  text-decoration: none; transition: background var(--t), border-color var(--t);
}
.lssk-post-nav__prev:hover, .lssk-post-nav__next:hover { background: var(--c-light); border-color: var(--c-green); }
.lssk-post-nav__dir { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--c-green); font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.lssk-post-nav__next .lssk-post-nav__dir { justify-content: flex-end; }
.lssk-post-nav__title { font-size: 14px; color: var(--c-text); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ══ 14. GALLERY ══ */
.lssk-gallery { margin: 24px 0; }
.lssk-gallery__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--c-border); }
.lssk-gallery__title { font-size: 16px; font-weight: 700; color: var(--c-green); margin: 0; display: flex; align-items: center; gap: 8px; }
.lssk-gallery__count { font-size: 12px; color: var(--c-muted); background: var(--c-bg2); padding: 3px 10px; border-radius: var(--r-full); border: 1px solid var(--c-border); }
/* Stage */


/* Trigger — base reset (áp dụng cho cả main và grid) */
.lssk-gallery-trigger {
  padding: 0; margin: 0;
  border: none; background: none;
  cursor: zoom-in; font-size: 0; line-height: 0;
  display: block; overflow: hidden; position: relative;
}
.lssk-gallery-trigger:focus-visible {
  outline: 3px solid var(--c-green); outline-offset: 2px;
}
/* Trigger trong main image — absolute fill container */

/* Image fill — luôn đúng kích thước, object-fit contain giữ tỷ lệ */

/* Zoom icon overlay */

/* Counter badge */

/* Prev/Next navigation arrows on main image — handled by .lssk-glr-nav */

/* Thumbnails strip */

/* Grid gallery */
.lssk-gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.lssk-grid-item {
  display: block; width: 100%; height: 100%;
  font-size: 0; cursor: zoom-in;
}
.lssk-grid-item img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .3s;
}
.lssk-gallery-card:hover .lssk-grid-item img { transform: scale(1.06); }

@media (max-width: 480px) {
}

/* ══ 15. ENTRY CONTENT ══ */
.lssk-entry-content {
  font-size: 16px; line-height: 1.85; color: var(--c-text);
  overflow-wrap: break-word; word-break: break-word; min-width: 0;
}
.lssk-entry-content * { max-width: 100%; }
.lssk-entry-content > img { max-width: 100% !important; height: auto !important; display: block; border-radius: var(--r-sm); margin: 1em 0; }
.lssk-entry-content iframe, .lssk-entry-content video, .lssk-entry-content embed { max-width: 100%; display: block; }
.lssk-entry-content h2 { font-size: clamp(18px,2.8vw,26px); margin: 32px 0 12px; color: var(--c-green); padding-bottom: 8px; border-bottom: 2px solid var(--c-light); }
.lssk-entry-content h3 { font-size: clamp(16px,2.2vw,21px); margin: 28px 0 10px; color: var(--c-green); }
.lssk-entry-content h4 { font-size: 17px; margin: 22px 0 8px; }
.lssk-entry-content h5 { font-size: 15px; margin: 18px 0 6px; font-weight: 700; }
.lssk-entry-content p  { margin: 0 0 1.3em; }
.lssk-entry-content > *:first-child { margin-top: 0; }
.lssk-entry-content > *:last-child  { margin-bottom: 0; }
.lssk-entry-content strong, .lssk-entry-content b { font-weight: 700; }
.lssk-entry-content em, .lssk-entry-content i { font-style: italic; }
.lssk-entry-content ul, .lssk-entry-content ol { margin: 0 0 1.3em 1.6em; padding: 0; }
.lssk-entry-content ul { list-style: disc; }
.lssk-entry-content blockquote p { margin: 0; }
.lssk-entry-content code { font-size: .88em; background: #f4f6f8; color: #c7254e; padding: 2px 6px; border-radius: 4px; }.lssk-entry-content pre {
  overflow-x: auto;
  margin: 1.3em 0;
  padding: 18px 22px;
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: var(--r-md);
  font-size: .88em;
  line-height: 1.65;
}
.lssk-entry-content pre code { background: none; color: inherit; padding: 0; }
.lssk-entry-content hr { margin: 2em 0; border: none; border-top: 2px solid var(--c-border); }
.lssk-entry-content figure { margin: 1.5em 0; }
.lssk-entry-content figcaption { text-align: center; font-size: 13px; color: var(--c-muted); font-style: italic; margin-top: 8px; }
.lssk-entry-content thead { background: var(--c-green); color: #fff; }
.lssk-entry-content th { padding: 10px 14px; text-align: left; font-weight: 700; font-size: 13px; }
.lssk-entry-content td { padding: 10px 14px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.lssk-entry-content tr:nth-child(even) td { background: var(--c-bg2); }
.lssk-entry-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--c-muted); font-size: 13px; margin-bottom: 16px; }
.lssk-entry-meta i { color: var(--c-green); margin-right: 4px; }
.lssk-entry-meta a { color: var(--c-green); }
.lssk-page-thumb { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px; }
.lssk-page-thumb img { width: 100%; height: auto; display: block; }

/* WP */
.alignleft  { float: left; margin: 0 1.5em 1em 0; max-width: 50%; }
.alignright { float: right; margin: 0 0 1em 1.5em; max-width: 50%; }
.aligncenter, .alignnone { display: block; margin: 1em auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--c-muted); font-style: italic; text-align: center; margin-top: 6px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
figure.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-block-image.aligncenter { text-align: center; }
.wp-block-image.aligncenter img { margin: auto; }

/* ══ 16. BLOG ══ */
.lssk-post-item { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--c-border); }
.lssk-post-item:last-child { border: none; }
.lssk-post-item__thumb:hover img { transform: scale(1.05); }
/* Ẩn khi overlay/lightbox mở để tránh xung đột z-index và tránh nhảy về 0 */
body.nav-open    .lssk-reading-progress,
body.search-open .lssk-reading-progress,
body.lssk-lb-open .lssk-reading-progress,
body.wplb-open   .lssk-reading-progress { opacity: 0; transition: none; }
.lssk-toc-box { background: var(--c-bg2); border: 1px solid var(--c-border); border-left: 4px solid var(--c-green); border-radius: 0 var(--r-md) var(--r-md) 0; margin: 28px 0; overflow: hidden; display: none; }
.lssk-toc-box.is-ready { display: block; }
.lssk-toc-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--c-border); }
.lssk-toc-title { font-size: 14px; font-weight: 700; color: var(--c-green); display: flex; align-items: center; gap: 8px; }
#lssk-toc { padding: 12px 18px; }
.lssk-toc-list { padding: 0; counter-reset: toc; }
.lssk-toc-item { padding: 5px 0; font-size: 14px; counter-increment: toc; }
.lssk-toc-item a { color: var(--c-text); text-decoration: none; display: flex; align-items: baseline; gap: 8px; transition: color var(--t); }
.lssk-toc-item a::before { content: counter(toc) '.'; color: var(--c-green); font-weight: 600; font-size: 12px; flex-shrink: 0; }
.lssk-toc-item a:hover, .lssk-toc-item a.is-active { color: var(--c-green); }
.lssk-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); margin: 24px 0; }
.lssk-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; border: none; cursor: pointer; font-family: var(--font); transition: opacity var(--t); }
.lssk-share-btn:hover { opacity: .85; }
.lssk-share-btn--fb   { background: #1877f2; color: #fff; }
.lssk-share-btn--zalo { background: #0068ff; color: #fff; }
.lssk-share-copy { background: #f0f0f0; color: var(--c-text); }
.lssk-author-box__img { border-radius: 50%; width: 80px; height: 80px; object-fit: cover; flex-shrink: 0; }
.lssk-related-posts { margin-top: 48px; }
.lssk-related-posts__title { font-size: 20px; color: var(--c-green); margin-bottom: 24px; }

/* ══ 17. SIDEBAR ══ */
.lssk-widget { margin-bottom: 32px; }
.lssk-widget-title { font-size: 15px; font-weight: 700; color: var(--c-green); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--c-green); display: block; }
.lssk-widget ul { padding: 0; }
.lssk-widget li { padding: 6px 0; border-bottom: 1px solid var(--c-border); font-size: 14px; }
.lssk-widget li:last-child { border-bottom: none; }
.lssk-widget a { color: var(--c-text); }
.lssk-widget a:hover { color: var(--c-green); }

/* ══ 18. FORMS ══ */
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],
input[type="number"],input[type="password"],input[type="search"],textarea,select {
  width: 100%; padding: 11px 14px; font-family: var(--font); font-size: 14px;
  color: var(--c-text); background: #fff; border: 1.5px solid var(--c-border);
  border-radius: var(--r-md); outline: none;
  transition: border-color var(--t), box-shadow var(--t); -webkit-appearance: none;
}
input:focus,textarea:focus,select:focus { border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(1,137,87,.14); }
input::placeholder,textarea::placeholder { color: #aaa; }
textarea { resize: vertical; min-height: 130px; }
input[type="checkbox"],input[type="radio"] { width: auto; accent-color: var(--c-green); }
input[type="submit"],button[type="submit"],.wpcf7-submit {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 28px;
  background: var(--c-green); color: #fff; font-size: 14px; font-weight: 700;
  border: 2px solid var(--c-green); border-radius: var(--r-md);
  cursor: pointer; font-family: var(--font); -webkit-appearance: none;
  transition: background var(--t), border-color var(--t);
}
input[type="submit"]:hover,button[type="submit"]:hover,.wpcf7-submit:hover { background: var(--c-dark); border-color: var(--c-dark); }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.wpcf7-not-valid-tip { color: #dc3232; font-size: 12px; margin-top: 4px; display: block; }
.wpcf7-response-output { padding: 12px 16px; border-radius: var(--r-sm); margin-top: 12px; font-size: 14px; }
.wpcf7-mail-sent-ok  { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.wpcf7-validation-errors { background: #fff3cd; border: 1px solid #ffeeba; color: #856404; }

/* ══ 19. PAGINATION ══ */
.lssk-pagination { margin-top: 40px; }
.lssk-pagination ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lssk-pagination li a,.lssk-pagination li span { display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--c-text); transition: all var(--t); }
.lssk-pagination li a:hover { background: var(--c-light); border-color: var(--c-green); color: var(--c-green); }
.lssk-pagination .current span { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--c-text); text-decoration: none; transition: all var(--t); margin: 0 2px; }
.page-numbers:hover { background: var(--c-light); border-color: var(--c-green); color: var(--c-green); }
.page-numbers.current { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.page-numbers.dots { border: none; pointer-events: none; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 40px; }

/* ══ 20. COMMENTS ══ */
.lssk-comments { margin-top: 56px; }
.lssk-comments-title { font-size: 20px; color: var(--c-green); margin-bottom: 28px; padding-bottom: 12px; border-bottom: 2px solid var(--c-light); }
.comment-list { padding: 0; list-style: none; }
.comment-list .children { padding-left: 40px; margin-top: 16px; list-style: none; }
.comment { display: flex; gap: 16px; margin-bottom: 24px; }
.comment-author .avatar { border-radius: 50%; width: 50px; height: 50px; flex-shrink: 0; }
.comment-body { flex: 1; background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 16px 20px; }
.comment-meta { font-size: 13px; color: var(--c-muted); margin-bottom: 8px; }
.comment-author .fn { font-weight: 700; color: var(--c-text); font-size: 14px; }
.comment-meta .says { display: none; }
.comment-content p { font-size: 14px; line-height: 1.7; }
.reply a { font-size: 12px; color: var(--c-green); font-weight: 600; }
.bypostauthor > .comment-body { background: #e8f5ee; border-color: var(--c-green); }
#respond { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--c-border); }

/* ══ 21. FOOTER ══ */
.lssk-footer { background: var(--c-ink); color: rgba(255,255,255,.78); }
.lssk-footer-logo img { filter: brightness(0) invert(1); margin-bottom: 16px; max-height: 60px; }
.lssk-footer-tagline { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.55); }
.lssk-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.lssk-footer-social a { width: 36px; height: 36px; background: rgba(255,255,255,.09); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); font-size: 14px; transition: background var(--t); }
.lssk-footer-social a:hover { background: var(--c-green); color: #fff; }
.lssk-footer-social img { width: 35px; height: 35px; object-fit: contain; /*filter: brightness(0) invert(.75);*/ }
.lssk-footer-social svg { width: 35px; height: 35px; object-fit: contain; /*filter: brightness(0) invert(.75);*/ }
.lssk-footer-heading { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--c-green); display: inline-block; }
.lssk-footer-links { padding: 0; }
.lssk-footer-links li { margin-bottom: 9px; }
.lssk-footer-links a { color: rgba(255,255,255,.65); font-size: 14px; display: flex; align-items: center; gap: 7px; transition: color var(--t), padding-left var(--t); }
.lssk-footer-links a i { color: var(--c-accent); font-size: 10px; }
.lssk-footer-links a:hover { color: #fff; padding-left: 5px; }
.lssk-footer-contacts { padding: 0; }
.lssk-footer-contacts li { display: flex; gap: 12px; margin-bottom: 13px; font-size: 14px; line-height: 1.65; }
.lssk-footer-contacts i { color: var(--c-accent); margin-top: 3px; flex-shrink: 0; width: 15px; }
.lssk-footer-contacts a { color: rgba(255,255,255,.78); }
.lssk-footer-contacts a:hover { color: #fff; }
.lssk-footer-certs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.lssk-footer-certs img { height: 44px; width: auto; opacity: .7; filter: brightness(0) invert(.9); }
.lssk-footer-fb { border-radius: var(--r-sm); overflow: hidden; margin-bottom: 14px; }
.lssk-footer-bottom { background: rgba(0,0,0,.28); padding: 14px 0; border-top: 1px solid rgba(255,255,255,.07); }
.lssk-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.lssk-footer-bottom p { margin: 0; font-size: 13px; color: rgba(255,255,255,.4); }
.lssk-footer-bottom a { color: var(--c-accent); }
.lssk-footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.lssk-footer-nav a { color: rgba(255,255,255,.4); font-size: 12px; }
.lssk-footer-nav a:hover { color: #fff; }

/* ══ 22. STICKY + SCROLL TOP ══ */
.lssk-sticky { position: fixed; right: 14px; bottom: 76px; display: flex; flex-direction: column; gap: 10px; z-index: 800; }
.lssk-sticky-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 50px; text-decoration: none; transition: transform var(--t); }
.lssk-sticky-item:hover { transform: scale(1.1); }
.lssk-sticky-item i { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 20px; color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.22); }
.lssk-sticky--phone i    { background: var(--c-green); }
.lssk-sticky--zalo img, .lssk-sticky-item img { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 3px 12px rgba(0,0,0,.22); }
.lssk-sticky--messenger i { background: #0084ff; }
.lssk-sticky-label { font-size: 10px; font-weight: 700; color: var(--c-text); background: #fff; border-radius: 3px; padding: 1px 5px; box-shadow: var(--sh-sm); }
.lssk-to-top { position: fixed; right: 14px; bottom: 20px; width: 42px; height: 42px; background: var(--c-green); color: #fff; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 16px; z-index: 800; box-shadow: 0 3px 12px rgba(0,0,0,.22); transition: background var(--t); }
.lssk-to-top.visible { display: flex; }
.lssk-to-top:hover { background: var(--c-dark); color: #fff; }

/* ══ 23. PAGE TEMPLATES ══ */
.lssk-page-article {}
.lssk-contact-item { display: flex; gap: 14px; margin-bottom: 18px; font-size: 15px; line-height: 1.6; }
.lssk-contact-item__icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--c-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c-green); font-size: 16px; }
.lssk-contact-item a { color: var(--c-green); }
.lssk-map-box { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.lssk-404 { text-align: center; padding: 80px 0; }
.lssk-404__code { font-size: 120px; font-weight: 900; color: var(--c-light); line-height: 1; }
.lssk-404__title { font-size: 24px; margin-bottom: 16px; }
.lssk-404__text { color: var(--c-muted); margin-bottom: 32px; }
.lssk-404__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ══ 24. RESPONSIVE ══ */
@media (min-width: 1025px) {
}

/* Large desktop */
@media (max-width: 1280px) {
}

/* Tablet */
@media (max-width: 1024px) {.lssk-footer-grid > :last-child {
  grid-column: auto;
  max-width: none;
}
  .lssk-content-layout  { grid-template-columns: 1fr; }
  /* Content sidebar vẫn hiển thị ở tablet — ẩn ở mobile xem dưới */
  .lssk-header-hotline__text { display: none; }
}

/* ══ MOBILE NAV (<1280px): menu nhiều danh mục chuyển sang drawer sớm hơn. ══ */
@media (max-width: 1279px) {
  :root { --top-h: 0px; }
  .lssk-topbar       { display: none; }
  .lssk-hamburger    { display: flex; }
  .lssk-nav-overlay  { display: block; }
  .lssk-header-cta   { display: none; }.lssk-header-hotline {
  padding: 6px 10px;
  display: none;
}

  /* ── Drawer: slide từ phải ── */
  .lssk-nav {
    position: fixed; top: 0; right: 0;
    width: min(320px, 92vw); height: 100%;
    background: #fff; z-index: 900;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(110%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 40px rgba(0,0,0,.15);
  }
  .lssk-nav.is-open { transform: translateX(0); }

  /* Drawer header (logo + close) */
  .lssk-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--c-border);
    flex-shrink: 0; background: #fff; position: sticky; top: 0; z-index: 1;
  }
  .lssk-drawer-logo img { height: 38px; width: auto; }
  .lssk-drawer-close {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--c-bg2); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-text); transition: background var(--t);
  }
  .lssk-drawer-close:hover { background: var(--c-border); }

  /* Menu items */
  .lssk-menu {
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 4px 0; flex: 1;
  }.lssk-menu-item--d0 > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  border-radius: 0;
  white-space: nowrap;
  transition: color var(--t), background var(--t);
  position: relative;
  border-bottom: 1px solid var(--c-border);
  justify-content: space-between;
}

  .lssk-menu-item--d0.is-active > a {
  color: var(--c-green);
  font-weight: 700;
  background: var(--c-light);
}

  /* Submenu d0 — collapse on mobile */
  .lssk-submenu--d0 {
    position: static !important;
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; box-shadow: none !important;
    border-radius: 0 !important; border-top: none !important;
    border-left: 3px solid var(--c-green);
    padding: 0 !important; background: var(--c-bg2);
    display: none; pointer-events: auto !important;
    transition: none !important;
  }.lssk-submenu--d0 .lssk-menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px 11px 30px;
  font-size: 14px;
  color: var(--c-text);
  transition: background var(--t), color var(--t);
  gap: 8px;
  border-bottom: 1px solid var(--c-border);
}
  .lssk-menu-item--d0.sub-open > .lssk-submenu--d0 { display: block; }
  .lssk-menu-item--d0.sub-open > a .lssk-arrow { transform: rotate(180deg); }

  /* Submenu d1 */
  .lssk-submenu--d1 {
    position: static !important;
    transform: none !important; box-shadow: none !important;
    border-radius: 0 !important; border-left: 3px solid var(--c-accent);
    opacity: 1 !important; visibility: visible !important;
    background: #fff; padding: 0 !important;
    display: none; pointer-events: auto !important;
  }.lssk-submenu--d1 .lssk-menu-item > a {
  padding: 10px 20px 10px 42px;
  font-size: 13px;
  color: var(--c-text);
  display: block;
  transition: background var(--t), color var(--t);
}
  .lssk-has-children.sub-open > .lssk-submenu--d1 { display: block; }

}
@media (max-width: 992px) {
  /* Responsive layouts at 992px */
  .lssk-grid-3 { grid-template-columns: repeat(2,1fr); }.lssk-about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}.lssk-about-image {
  position: relative;
  order: -1;
}.lssk-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}.lssk-cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}.lssk-cta-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-shrink: 0;
  min-width: 200px;
  flex-wrap: wrap;
}
}

/* Tablet / cửa sổ desktop hẹp: giữ hotline và CTA bên phải ở zoom 100%. */
@media (min-width: 601px) and (max-width: 992px) {
  .lssk-header-main-inner { gap: 12px; }
  .lssk-header-actions { gap: 8px; }
  .lssk-header-hotline {
    display: flex;
    padding: 5px;
    border: 0;
    background: transparent;
  }
  .lssk-header-hotline__icon { width: 36px; height: 36px; }
  .lssk-header-hotline__text { display: none; }
  .lssk-header-cta {
    display: inline-flex;
    padding: 9px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* Tablet/mobile */
@media (max-width: 768px) {
}

/* Mobile */
@media (max-width: 768px) {.lssk-content-sidebar {
  min-width: 0;
  position: sticky;
  top: calc(var(--hdr-h) + 20px);
  align-self: start;
  display: none;
}
  .lssk-project-info__grid { grid-template-columns: 1fr; }
  
  .alignleft, .alignright { float: none; display: block; margin: 1em auto; max-width: 100%; }
}

@media (max-width: 640px) {
  :root { --py: 48px; --main-h: 60px; }
  .lssk-grid-3, .lssk-grid-4 { grid-template-columns: 1fr; }.lssk-camket-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
  .lssk-slide, .lssk-hero-static { min-height: 400px; }.lssk-slide-content {
  position: relative;
  z-index: 2;
  max-width: 660px;
  padding: 32px 24px;
  color: #fff;
}.lssk-footer-top {
  padding: 40px 0 24px;
}
  .lssk-sticky { right: 10px; bottom: 62px; }.lssk-gallery-grid {
  grid-template-columns: repeat(2,1fr);
}.lssk-about-stats {
  display: flex;
  gap: 20px;
  margin: 28px 0;
  flex-wrap: wrap;
}.lssk-about-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #fff;
  border-radius: var(--r-md);
  padding: 12px 20px;
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-green);
  white-space: nowrap;
}.lssk-model-wrap model-viewer {
  width: 100%;
  height: 300px;
  border-radius: var(--r-md);
  background: var(--c-bg2);
  --poster-color: var(--c-bg2);
  display: block;
}.lssk-logo img {
  height: 38px;
  width: auto;
  object-fit: contain;
}
}

@media (max-width: 480px) {.lssk-grid-4 {
  grid-template-columns: 1fr;
}
  .comment { flex-direction: column; }
  .comment-list .children { padding-left: 20px; }
}

@media print {
  .lssk-header, .lssk-sticky, .lssk-to-top, .lssk-search-overlay, .lssk-nav-overlay { display: none !important; }.lssk-site-content {
  padding-top: 0 !important;
}
}

/* ══ TABLES — HOÀN CHỈNH ══ */

/* ── General table (entry-content) ── */
.lssk-entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: table; /* override display:block từ reset */
}
.lssk-entry-content table thead tr { background: var(--c-green); color: #fff; }
.lssk-entry-content table th {
  padding: 11px 16px;
  text-align: left; font-weight: 700; font-size: 13px;
  border-right: 1px solid rgba(255,255,255,.2);
}
.lssk-entry-content table th:last-child { border-right: none; }
.lssk-entry-content table td {
  padding: 10px 16px;
  border-right: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.lssk-entry-content table td:last-child { border-right: none; }
.lssk-entry-content table tr:last-child td { border-bottom: none; }
.lssk-entry-content table tr:nth-child(even) td { background: var(--c-bg2); }
.lssk-entry-content table tr:hover td { background: #edf8f2; }
/* Responsive scroll cho table rộng */
.lssk-entry-content .table-wrap,
.lssk-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); border: 1px solid var(--c-border); margin: 1.5em 0; }
.lssk-table-scroll table { margin: 0; border: none; border-radius: 0; }

/* ── Specs table (sản phẩm) ── */
.lssk-sp-specs {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 20px 0;
}
.lssk-sp-specs__header {
  background: var(--c-green);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
}.lssk-sp-specs__title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
  margin: 0;
}
.lssk-sp-specs__title i { color: rgba(255,255,255,.85); }
.lssk-specs-table th,
.lssk-specs-table td { color: var(--c-text); }
.lssk-specs-table tr:last-child th,
.lssk-specs-table tr:last-child td { border-bottom: none; }
.lssk-specs-table tr:hover td,
.lssk-specs-table tr:hover th { background: #f0faf5; }

/* ── Project info table ── */
.lssk-project-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--c-border);
}
.lssk-project-info__item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; padding: 10px 16px;
  border-bottom: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
}
.lssk-project-info__item:nth-child(even) { border-right: none; }
.lssk-project-info__item:last-child,
.lssk-project-info__item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.lssk-project-info__icon { color: var(--c-green); font-size: 13px; width: 16px; flex-shrink: 0; margin-top: 2px; }
.lssk-project-info__label { color: var(--c-muted); font-weight: 600; white-space: nowrap; min-width: 80px; flex-shrink: 0; }
.lssk-project-info__value { color: var(--c-text); }

/* lssk-project-info__title → see main project-info section above */

/* ── Filter table / WP Admin table override ── */
table.wp-list-table th,
table.wp-list-table td { border: none; }

/* ══ VANILLA LIGHTBOX — v5 ══ */
/* Cấu trúc: close/prev/next là direct children của .lssk-lb
   → không bị pointer-events:none ảnh hưởng */
.lssk-lb {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
}
.lssk-lb.is-open { display: block; }

.lssk-lb__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.93);
  cursor: zoom-out; z-index: 0;
}

/* Center area */
.lssk-lb__center {
  position: absolute;
  top: 60px; bottom: 90px;
  left: 70px; right: 70px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 1; pointer-events: none;
}
.lssk-lb__img-wrap {
  position: relative;
  max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.lssk-lb__loader {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
}
.lssk-lb__spinner {
  width: 42px; height: 42px;
  border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
  border-radius: 50%; animation: lb-spin .8s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lssk-lb__caption {
  color: rgba(255,255,255,.82); font-size: 14px;
  margin-top: 12px; text-align: center; max-width: 600px;
  pointer-events: none;
}

/* Counter */
.lssk-lb__counter {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: 13px;
  background: rgba(0,0,0,.45); padding: 4px 14px; border-radius: var(--r-full);
  z-index: 2; pointer-events: none; white-space: nowrap;
}

/* Buttons — direct children, NO pointer-events issue */
.lssk-lb__close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.13); color: #fff;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--t);
  border: none; font-family: sans-serif;
}
.lssk-lb__close:hover { background: rgba(255,255,255,.28); }

.lssk-lb__prev, .lssk-lb__next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.13); color: #fff;
  font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--t);
  border: none; font-family: serif; user-select: none;
}
.lssk-lb__prev:hover, .lssk-lb__next:hover { background: rgba(1,137,87,.8); }
.lssk-lb__prev:active, .lssk-lb__next:active { transform: translateY(-50%) scale(.95); }

/* Thumbnails strip */
.lssk-lb__thumbs {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 6px;
  padding: 10px 14px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lssk-lb__thumbs::-webkit-scrollbar { height: 3px; }
.lssk-lb__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); }
.lssk-lb__thumb {
  flex-shrink: 0; width: 62px; height: 62px;
  border-radius: var(--r-sm); overflow: hidden;
  border: 2px solid transparent; cursor: pointer;
  opacity: .58; transition: opacity var(--t), border-color var(--t);
  padding: 0; background: #333;
}
.lssk-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lssk-lb__thumb:hover { opacity: .88; }
.lssk-lb__thumb.is-active { border-color: var(--c-green); opacity: 1; }

/* Body scroll locks */
body.nav-open,
body.search-open {
  overflow: hidden;
  /* iOS Safari: ngăn bounce scroll phía sau overlay */
  position: fixed;
  width: 100%;
}
body.lssk-lb-open,
body.wplb-open {
  overflow: hidden;
  /* iOS Safari: dùng position fixed + lưu scroll position qua JS */
  touch-action: none;
}

/* Reading progress bar */
.lssk-reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%; height: 3px;
  background: linear-gradient(to right, var(--c-green), var(--c-accent));
  z-index: 9998;
  transition: width .08s linear;
  pointer-events: none;
}

@media (max-width: 640px) {
  .lssk-lb__center { left: 0; right: 0; top: 56px; bottom: 86px; }.lssk-lb__img {
  max-width: 98vw;
  max-height: 68vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 12px 60px rgba(0,0,0,.6);
  transition: opacity .25s;
  display: block;
}.lssk-lb__prev {
  left: 4px;
}.lssk-lb__next {
  right: 4px;
}
}

/* ══ CONTACT PAGE ══ */
.lssk-locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 52px;
}
.lssk-location-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 20px 22px;
  border-top: 3px solid var(--c-green);
  transition: box-shadow var(--t), transform var(--t);
}
.lssk-location-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.lssk-location-card__icon {
  width: 46px; height: 46px; flex-shrink: 0;
  background: var(--c-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-green); font-size: 18px;
}
.lssk-location-card__body h3 { font-size: 14px; font-weight: 700; color: var(--c-green); margin-bottom: 6px; }
.lssk-location-card__body address { font-style: normal; font-size: 14px; color: var(--c-muted); line-height: 1.6; }
.lssk-contact-form-box__title {
  font-size: 20px; color: var(--c-green); margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.lssk-contact-form-box__desc { color: var(--c-muted); font-size: 14px; margin-bottom: 24px; }

.lssk-contact-hotline {
  display: flex; align-items: center; gap: 14px;
  background: var(--c-green); border-radius: var(--r-lg);
  padding: 16px 20px; color: #fff; text-decoration: none;
  margin-bottom: 28px;
  transition: background var(--t);
}
.lssk-contact-hotline div { display: flex; flex-direction: column; }
.lssk-contact-hotline span { font-size: 12px; opacity: .8; }
.lssk-contact-hotline strong { font-size: 22px; font-weight: 800; letter-spacing: .5px; }

.lssk-contact-details { padding: 0; list-style: none; }
.lssk-contact-details li {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--c-border); font-size: 14px;
}
.lssk-contact-details li:last-child { border-bottom: none; }
.lssk-contact-details i { color: var(--c-green); font-size: 16px; width: 18px; flex-shrink: 0; margin-top: 2px; }
.lssk-contact-details div { display: flex; flex-direction: column; gap: 2px; }
.lssk-contact-details__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--c-muted); }
.lssk-contact-details a { color: var(--c-green); }

.lssk-contact-quick { margin-top: 22px; }
.lssk-contact-quick__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--c-muted); margin-bottom: 10px; }
.lssk-contact-quick__btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: opacity var(--t), transform var(--t);
}
.lssk-contact-quick__btn:hover { opacity: .88; transform: translateY(-2px); }
.lssk-contact-quick__btn--zalo { background: #0068ff; color: #fff; }
.lssk-contact-quick__btn--zalo img { width: 20px; height: 20px; object-fit: contain; /*filter: brightness(0) invert(1); */}
.lssk-contact-quick__btn--messenger { background: #1877f2; color: #fff; font-size: 18px; }

.lssk-contact-map { height: 320px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.lssk-contact-map iframe { display: block; width: 100%; height: 100%;}

@media (max-width: 1024px) {
  .lssk-locations-grid { grid-template-columns: 1fr; }.lssk-contact-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 52px;
}
}
@media (max-width: 640px) {.lssk-contact-form-box {
  background: var(--c-bg2);
  border-radius: var(--r-lg);
  padding: 20px;
  border: 1px solid var(--c-border);
}.lssk-contact-quick__btns {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
}

/* ══ BREADCRUMB ══ */
.lssk-breadcrumb {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-bottom: 10px;
}
.lssk-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.lssk-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.65);
}
.lssk-breadcrumb li + li::before {
  content: '/';
  margin: 0 6px;
  color: rgba(255,255,255,.35);
  font-size: 11px;
}
.lssk-breadcrumb a {
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color var(--t);
}
.lssk-breadcrumb a:hover { color: #fff; }
.lssk-breadcrumb li:last-child span,
.lssk-breadcrumb [aria-current="page"] {
  color: #fff;
  font-weight: 500;
}
.lssk-breadcrumb .fa-home { font-size: 12px; }

/* Lightslider integration override */
.top-gallery-section { max-width: 100%; margin: 0; padding: 0; }
.lSSlideOuter .lSPager.lSGallery {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.lSSlideOuter .lSPager.lSGallery li { flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden; }
.lSSlideOuter .lSPager.lSGallery li.active,
.lSSlideOuter .lSPager.lSGallery li:hover { border: 2px solid var(--c-green); }
.lSSlideOuter .lSPager.lSGallery img { width: 80px; height: 60px; object-fit: cover; display: block; }
.listing-slider img { width: 100%; height: auto; object-fit: cover; border-radius: var(--r-md); display: block; }
.lSSlideWrapper { border-radius: var(--r-md); overflow: hidden; }

/* ══ ABOUT PAGE ══ */
.lssk-about-intro-grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start;
}
.lssk-about-intro-logo { height: 56px; width: auto; margin-bottom: 16px; }
.lssk-about-intro-name {
  font-size: clamp(18px,2.5vw,26px); color: var(--c-text); margin-bottom: 8px;
}
.lssk-about-intro-name span { color: var(--c-green); }
.lssk-about-intro-tagline { color: var(--c-muted); font-size: 15px; margin-bottom: 18px; }
.lssk-about-intro-certs { display: flex; flex-direction: column; gap: 8px; }
.lssk-cert-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-light); border: 1px solid #c1e0cf;
  border-radius: var(--r-full); padding: 5px 14px;
  font-size: 13px; font-weight: 600; color: var(--c-green); width: fit-content;
}
.lssk-about-intro-lead {
  font-size: 17px; line-height: 1.8; color: var(--c-text);
  font-style: italic; margin-bottom: 20px; position: relative;
  padding-left: 24px;
}
.lssk-about-intro-quote {
  position: absolute; left: 0; top: 0;
  font-size: 22px; color: var(--c-green); opacity: .4;
}

/* Stats section */
.lssk-about-stats-section {
  background: linear-gradient(135deg, var(--c-ink) 0%, var(--c-dark) 100%);
  padding: 60px 0;
}
.lssk-about-stat-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg); padding: 24px; transition: background var(--t);
}
.lssk-about-stat-card:hover { background: rgba(255,255,255,.15); }
.lssk-about-stat-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: rgba(145,192,62,.25); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--c-accent);
}
.lssk-about-stat-num {
  font-size: 36px; font-weight: 900; color: #fff; line-height: 1;
  margin-bottom: 4px;
}
.lssk-count-num { font-variant-numeric: tabular-nums; }
.lssk-about-stat-label { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 3px; }
.lssk-about-stat-desc { font-size: 12px; color: rgba(255,255,255,.55); }

/* Mission / Vision */
.lssk-about-mission-section { background: var(--c-bg2); }
.lssk-about-mv-card {
  background: #fff; border-radius: var(--r-lg); padding: 32px 28px;
  border: 1px solid var(--c-border); transition: transform var(--t), box-shadow var(--t);
  text-align: center;
}
.lssk-about-mv-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.lssk-about-mv-icon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.lssk-about-mv-icon--mission { background: #fff3e0; color: #f57c00; }
.lssk-about-mv-icon--vision  { background: #e3f2fd; color: #1565c0; }
.lssk-about-mv-icon--values  { background: #f3e5f5; color: #7b1fa2; }
.lssk-about-mv-card h3 { font-size: 18px; color: var(--c-text); margin-bottom: 14px; }
.lssk-about-mv-card p { color: var(--c-muted); font-size: 14px; line-height: 1.75; }
.lssk-about-values-list { list-style: none; text-align: left; padding: 0; font-size: 14px; }
.lssk-about-values-list li { padding: 6px 0; border-bottom: 1px solid var(--c-border); display: flex; align-items: baseline; gap: 8px; color: var(--c-muted); }
.lssk-about-values-list li:last-child { border: none; }
.lssk-about-values-list i { color: var(--c-green); font-size: 11px; flex-shrink: 0; }
.lssk-about-values-list strong { color: var(--c-text); }

/* Capacity */
.lssk-about-capacity-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.lssk-capacity-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 22px 20px; border-left: 4px solid var(--c-green);
  transition: box-shadow var(--t), transform var(--t);
}
.lssk-capacity-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.lssk-capacity-card__icon {
  width: 48px; height: 48px; flex-shrink: 0; background: var(--c-light);
  border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--c-green);
}
.lssk-capacity-card__value { font-size: 20px; font-weight: 800; color: var(--c-green); margin-bottom: 3px; }
.lssk-capacity-card__title { font-size: 14px; font-weight: 700; color: var(--c-text); margin-bottom: 5px; }
.lssk-capacity-card__desc { font-size: 13px; color: var(--c-muted); line-height: 1.6; }

/* Process */
.lssk-about-process-section { background: var(--c-bg2); }
.lssk-process-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.lssk-process-step--top .lssk-process-step__card { order: -1; margin-bottom: 12px; }
.lssk-process-step--bottom .lssk-process-step__card { margin-top: 12px; }
.lssk-process-step__dot {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-green); border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--c-green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lssk-process-step__num { font-size: 13px; font-weight: 800; color: #fff; }
.lssk-process-step__card {
  background: #fff; border-radius: var(--r-md); padding: 14px 12px;
  border: 1px solid var(--c-border); text-align: center;
  box-shadow: var(--sh-sm); max-width: 150px;
  transition: box-shadow var(--t), transform var(--t);
}
.lssk-process-step__card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.lssk-process-step__icon { font-size: 22px; color: var(--c-green); margin-bottom: 8px; }
.lssk-process-step__card h4 { font-size: 12px; color: var(--c-text); margin-bottom: 5px; }
.lssk-process-step__card p  { font-size: 11px; color: var(--c-muted); line-height: 1.5; margin: 0; }

/* Team */
.lssk-team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.lssk-team-card {
  background: #fff; border-radius: var(--r-lg); padding: 28px 20px;
  border: 1px solid var(--c-border); text-align: center;
  transition: transform var(--t), box-shadow var(--t);
}
.lssk-team-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.lssk-team-card__avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--c-light); margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--c-green);
}
.lssk-team-card__info h4 { font-size: 15px; color: var(--c-text); margin-bottom: 4px; }
.lssk-team-card__info p  { font-size: 13px; color: var(--c-green); font-weight: 600; }

/* Partners */
.lssk-about-partners-section { background: var(--c-bg2); }
.lssk-about-partner-item {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 12px; display: flex; align-items: center; justify-content: center;
  height: 70px; transition: box-shadow var(--t);
}
.lssk-about-partner-item:hover { box-shadow: var(--sh-md); }
.lssk-about-partner-item img { max-height: 46px; width: auto; object-fit: contain; filter: grayscale(1) opacity(.7); transition: filter var(--t); }
.lssk-about-partner-item:hover img { filter: none; }

/* CTA final */
.lssk-about-cta-final {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-ink) 100%);
  padding: 64px 0;
}
.lssk-about-cta-final__text h2 {
  font-size: clamp(22px,3vw,34px); color: #fff; margin-bottom: 12px;
}
.lssk-about-cta-final__text p { color: rgba(255,255,255,.78); font-size: 16px; }

/* Taxonomy archive extras */
.lssk-tax-header { margin-bottom: 32px; }
.lssk-tax-header h1 { font-size: clamp(20px,3vw,28px); margin-bottom: 6px; }
.lssk-tax-header p { color: var(--c-muted); font-size: 15px; }
.lssk-tax-count { font-size: 13px; color: var(--c-muted); font-weight: 400; }

/* Responsive About */
@media (max-width: 1200px) {
}
@media (max-width: 1024px) {.lssk-process-line {
  position: absolute;
  top: 62px;
  left: 8.33%;
  right: 8.33%;
  height: 2px;
  background: linear-gradient(to right, var(--c-green), var(--c-accent));
  z-index: 0;
  display: none;
}
  .lssk-process-step--top .lssk-process-step__card,
  .lssk-process-step--bottom .lssk-process-step__card { order: 0; margin: 10px 0 0; }
}
@media (max-width: 992px) {
  .lssk-about-intro-grid { grid-template-columns: 1fr; gap: 32px; }.lssk-about-mv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}.lssk-about-cta-final__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  text-align: center;
}.lssk-about-cta-final__actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
}
}
@media (max-width: 768px) {.lssk-about-capacity-grid {
  grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {.lssk-about-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}.lssk-process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
  padding: 40px 0 0;
  row-gap: 24px;
}.lssk-team-grid {
  grid-template-columns: 1fr;
}.lssk-about-partners-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
  align-items: center;
}
}

/* ══ HERO SLIDER — Vanilla CSS ══ */
.lssk-slides { position: relative; overflow: hidden; }
.lssk-slide.is-prev { position: absolute; opacity: 0; z-index: 0; }

/* Buttons */
.lssk-slide-prev, .lssk-slide-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.4);
  color: #fff; font-size: 28px; line-height: 1; font-family: serif;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--t); padding: 0;
}
.lssk-slide-prev { left: 18px; }
.lssk-slide-next { right: 18px; }
.lssk-slide-prev:hover, .lssk-slide-next:hover { background: var(--c-green); border-color: var(--c-green); }

/* Dots */
.lssk-slide-dots {
  position: absolute; bottom: 16px; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: center; gap: 8px;
}
.lssk-slide-dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.45); border: none; cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.lssk-slide-dot.is-active { background: #fff; transform: scale(1.25); }

/* No-JS fallback */
.lssk-slide:first-child { position: relative; opacity: 1; pointer-events: auto; }
.lssk-slide:not(:first-child) { display: none; }
.lssk-slides.js-ready .lssk-slide { display: flex; }
.lssk-slides.js-ready .lssk-slide:not(.is-active) { position: absolute; opacity: 0; pointer-events: none; }

/* ══════════════════════════════════════════════════════════
   SUPPLEMENT — Tất cả classes còn thiếu (phát hiện qua audit)
   Nhóm: Layout · Single CPT · Blog · Contact · Sản phẩm · About · Admin
   ══════════════════════════════════════════════════════════ */

/* ── FOOTER COLUMNS ── */
.lssk-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr 1.3fr;
  gap: 40px;
}
.lssk-footer-col {}
.lssk-footer-col__title {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--c-accent); margin-bottom: 16px;
}
.lssk-footer-brand-text { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 16px; }
.lssk-brand-text { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.75; }
@media (max-width: 1024px) { }
@media (max-width: 600px)  {.lssk-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
} }

/* ── BLOG LAYOUT ── */
.lssk-blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
.lssk-blog-main  { min-width: 0; }
@media (max-width: 1024px) { .lssk-blog-layout { grid-template-columns: 1fr; } }

/* ── SINGLE CPT CONTENT WRAPPERS ── */
.lssk-du-an-content,
.lssk-thiet-ke-content { margin: 20px 0; }
.lssk-du-an-content > *:first-child,
.lssk-thiet-ke-content > *:first-child { margin-top: 0; }

/* ── AUTHOR BOX ── */
.lssk-author-box {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 24px; margin: 28px 0;
  border-left: 4px solid var(--c-green);
}
.lssk-author-box__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── SẢN PHẨM — homepage section + page detail ── */
.lssk-san-pham-home { background: var(--c-bg2); }
.lssk-sp-badges     { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.lssk-sp-desc       { font-size: 15px; line-height: 1.75; color: var(--c-text); margin: 16px 0; }

/* ── CONTACT PAGE ── */
.lssk-contact-section  { padding: 60px 0; }
.lssk-contact-form-col {}
.lssk-contact-info-col {}
.lssk-contact-form-content .wpcf7 input:not([type="submit"]),
.lssk-contact-form-content .wpcf7 textarea,
.lssk-contact-form-content .wpcf7 select {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  font-size: 15px; color: var(--c-text); background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
  font-family: inherit;
}
.lssk-contact-form-content .wpcf7 input:focus,
.lssk-contact-form-content .wpcf7 textarea:focus {
  border-color: var(--c-green); outline: none;
  box-shadow: 0 0 0 3px rgba(1,137,87,.12);
}
.lssk-contact-form-content .wpcf7 textarea { min-height: 160px; resize: vertical; }
.lssk-contact-form-content .wpcf7 input[type="submit"] {
  background: var(--c-green); color: #fff;
  padding: 13px 32px; border: none; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background var(--t); width: 100%;
}
.lssk-shortcode-contact .wpcf7-response-output { font-size: 14px; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-md); }

/* ── ABOUT PAGE — missing sections ── */
.lssk-about-page-overview   { padding: 60px 0; }
.lssk-about-capacity-section { padding: 60px 0; }
.lssk-about-team-section     { padding: 60px 0; }
.lssk-about-intro-brand  {}
.lssk-about-intro-text   {}
.lssk-about-stat-body    {}
.lssk-capacity-card__content {}

/* ── ADMIN: META BOX GALLERY ── */
.lssk-mb-gallery { margin: 0; }
.lssk-mb-gallery__list {
  display: flex; flex-wrap: wrap; gap: 8px;
  min-height: 80px; padding: 10px;
  background: #fafafa; border: 2px dashed #ddd; border-radius: 6px;
  list-style: none; margin: 0 0 10px;
}
.lssk-mb-gallery__item {
  position: relative; width: 80px; height: 80px;
  border-radius: 4px; overflow: hidden; cursor: grab;
  border: 2px solid transparent; transition: border-color .15s;
  background: #eee;
}
.lssk-mb-gallery__item:hover { border-color: #0073aa; }
.lssk-mb-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lssk-mb-gallery__item.is-dragging { opacity: .4; cursor: grabbing; }
.lssk-mb-gallery__item:first-child::before {
  content: "✦"; position: absolute; top: 2px; left: 4px;
  color: #f0b429; font-size: 10px; pointer-events: none;
}
.lssk-mb-gallery__remove {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px;
  background: rgba(200,0,0,.85); border: none; border-radius: 50%;
  cursor: pointer; opacity: 0; transition: opacity .15s;
  padding: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; line-height: 1;
}
.lssk-mb-gallery__item:hover .lssk-mb-gallery__remove { opacity: 1; }
.lssk-mb-gallery__drag-handle {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.8); font-size: 12px; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.lssk-mb-gallery__actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.lssk-mb-gallery__count   { font-size: 13px; color: #666; margin-left: auto; }

/* ── LOADMORE / NOTICES ── */
.lssk-loadmore-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: lb-spin .6s linear infinite; }
.lssk-loadmore-text { display: inline; }
.lssk-no-results { text-align: center; padding: 60px 20px; color: var(--c-muted); }
.lssk-no-results i { font-size: 40px; display: block; margin-bottom: 12px; color: var(--c-border); }
.lssk-notice { padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; margin: 12px 0; }
.lssk-notice--info    { background: #e3f2fd; border-left: 4px solid #1565c0; color: #1565c0; }
.lssk-notice--success { background: var(--c-light); border-left: 4px solid var(--c-green); color: var(--c-green); }
.lssk-notice--warning { background: #fff8e1; border-left: 4px solid #f9a825; color: #f57f17; }

/* ── BLOG: TOC, SHARE, READING-TIME ── */
.lssk-reading-time  { font-size: 13px; color: var(--c-muted); display: inline-flex; align-items: center; gap: 5px; }
.lssk-share-label   { font-size: 13px; font-weight: 700; color: var(--c-text); white-space: nowrap; }

/* ── SEARCH COUNT ── */
.lssk-search-count  { font-size: 14px; color: var(--c-muted); margin-bottom: 20px; }
.lssk-search-count strong { color: var(--c-green); }

/* ── FEATURED SECTION (homepage) ── */
.lssk-featured      {}

/* ── MODEL PROGRESS ── */
.lssk-model-progress { height: 4px; background: var(--c-green); }

/* ── ADMIN: SETTINGS TABS, MODEL, VIDEO META BOXES ── */
.lssk-admin-settings .form-table th { width: 200px; }
.lssk-settings-tabs  {}
.lssk-tab            { cursor: pointer; }
.lssk-tab-content    { display: none; }
.lssk-tab-content.active { display: block; }
.lssk-mb-tabs        { display: flex; gap: 0; border-bottom: 2px solid #ddd; margin-bottom: 0; }
.lssk-mb-tabs .lssk-tab { padding: 8px 16px; font-size: 13px; font-weight: 500; color: #555; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; background: none; }
.lssk-mb-tabs .lssk-tab.active { background: #fff; color: #018957; border-color: #ddd; font-weight: 700; }
.lssk-mb-video       { padding: 12px; }
.lssk-mb-video-preview { margin-top: 10px; background: #000; border-radius: 4px; overflow: hidden; }
.lssk-mb-video-preview iframe { display: block; }
.lssk-mb-model       { padding: 12px; }

/* ── THIET KE HOME SECTION ── */
.lssk-thietke {}

/* ── SHARE BTN ZALO ── */

/* ── SHARE BLOCK ── */

/* ── POST ITEM (blog list) ── */
.lssk-post-item__body { padding: 16px; }

/* ── SETTINGS TABS NAV ── */
.lssk-settings-tabs__nav { display: flex; gap: 4px; border-bottom: 2px solid #ddd; margin: 0 0 0; }

/* ═══════════════════════════════════════════
   SIDEBAR WIDGETS (built-in template parts)
════════════════════════════════════════════ */

/* Base widget block */

/* CTA widget */
.lssk-sw--cta .lssk-sw-cta { text-align: center; }

/* Recent posts widget */
.lssk-sw-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.lssk-sw-posts__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--c-border);
}
.lssk-sw-posts__item:first-child { padding-top: 0; }
.lssk-sw-posts__item:last-child  { border-bottom: none; padding-bottom: 0; }
.lssk-sw-posts__thumb {
  flex-shrink: 0; width: 72px; height: 72px; position: relative;
  border-radius: var(--r-sm); overflow: hidden; background: var(--c-border);
  display: block;
}
.lssk-sw-posts__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.lssk-sw-posts__thumb:hover img { transform: scale(1.1); }
.lssk-sw-posts__num {
  position: absolute; bottom: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-green); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.lssk-sw-posts__num--bare {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-bg2); color: var(--c-muted);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--c-border); align-self: center;
}
.lssk-sw-posts__body { flex: 1; min-width: 0; }
.lssk-sw-posts__title {
  font-size: 13px; font-weight: 600; line-height: 1.45;
  color: var(--c-text); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t); margin-bottom: 5px;
}
.lssk-sw-posts__title:hover { color: var(--c-green); }
.lssk-sw-posts__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--c-muted); align-items: center; }
.lssk-sw-posts__meta i { color: var(--c-green); font-size: 10px; }
.lssk-sw-posts__cat {
  font-size: 10px; padding: 1px 7px; background: var(--c-light);
  border-radius: var(--r-full); color: var(--c-green); font-weight: 600;
}
/* Deprecated: lssk-sw-posts__date (replaced by __meta) */
.lssk-sw-posts__date { font-size: 11px; color: var(--c-muted); display: flex; align-items: center; gap: 4px; margin-top: 4px; }

/* Categories widget */
.lssk-sw-cats { list-style: none; margin: 0; padding: 0; }
.lssk-sw-cats__item { border-bottom: 1px solid var(--c-border); }
.lssk-sw-cats__item:last-child { border-bottom: none; }
.lssk-sw-cats__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 4px; font-size: 13px; color: var(--c-text);
  transition: color var(--t), padding-left var(--t);
}
.lssk-sw-cats__link:hover { color: var(--c-green); padding-left: 8px; }
.lssk-sw-cats__item.is-active .lssk-sw-cats__link { color: var(--c-green); font-weight: 600; padding-left: 8px; }
.lssk-sw-cats__count {
  font-size: 11px; color: #fff; background: var(--c-border);
  border-radius: var(--r-full); padding: 1px 7px; min-width: 22px;
  text-align: center; transition: background var(--t);
}
.lssk-sw-cats__link:hover .lssk-sw-cats__count,
.lssk-sw-cats__item.is-active .lssk-sw-cats__count { background: var(--c-green); }

/* Tags widget */
.lssk-sw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lssk-sw-tag {
  font-size: 12px; padding: 4px 12px;
  background: var(--c-bg2); border: 1px solid var(--c-border);
  border-radius: var(--r-full); color: var(--c-muted);
  transition: all var(--t); display: inline-flex; align-items: center; gap: 4px;
}
.lssk-sw-tag:hover, .lssk-sw-tag.is-active {
  background: var(--c-light); border-color: var(--c-green); color: var(--c-green);
}
.lssk-sw-tag__count { font-size: 10px; opacity: .7; }

/* Nav widget (category list) */
.lssk-sw-nav__link:hover, .lssk-sw-nav__item.is-active .lssk-sw-nav__link {
  color: var(--c-green); padding-left: 6px;
}
.lssk-sw-nav__link:hover i, .lssk-sw-nav__item.is-active .lssk-sw-nav__link i { color: var(--c-green); }

/* Info / DL widget */

/* WP widget area (fallback) */

/* ── Gallery missing classes ── */
.lssk-gallery__meta  { display: flex; align-items: center; gap: 8px; }
/* Gallery figcaption: ẩn trong slider, chỉ hiện trong lightbox */
.lssk-gallery-caption { display: none; }
/* Trong lightbox — đã có .lssk-lb__caption riêng */
.lssk-gallery-card   { display: block; position: relative; overflow: hidden; }

/* ── Filter missing classes ── */
.lssk-filter-result-count__label { color: var(--c-muted); font-size: 13px; }
.lssk-filter-form__apply {
  flex: 1; justify-content: center;
  background: var(--c-green); color: #fff;
  border: none; border-radius: var(--r-md);
  padding: 10px 20px; font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: background var(--t);
}
.lssk-filter-form__apply:hover { background: var(--c-dark); }
.lssk-filter-form__reset {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--c-muted); background: var(--c-bg2);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  cursor: pointer; transition: color var(--t), border-color var(--t);
}
.lssk-filter-form__reset:hover { color: #e74c3c; border-color: #e74c3c; }

/* lssk-sw modifier stubs (variants handled by base + children CSS) */
.lssk-sw--posts, .lssk-sw--cats, .lssk-sw--tags, .lssk-sw--nav, .lssk-sw--info {}
.lssk-sw-cats__name { flex: 1; }

/* ── Sidebar: Featured image of current post ── */
.lssk-sw--featured-img { padding: 0; overflow: hidden; }
.lssk-sw-feat-img {
  display: block; position: relative; aspect-ratio: 16/9; overflow: hidden;
  border-radius: var(--r-lg);
}
.lssk-sw-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.lssk-sw-feat-img:hover img { transform: scale(1.04); }
.lssk-sw-feat-img__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 55%);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 12px; opacity: 0; transition: opacity var(--t);
}
.lssk-sw-feat-img:hover .lssk-sw-feat-img__overlay { opacity: 1; }
.lssk-sw-feat-img__overlay i { font-size: 20px; color: #fff; }

/* ── Sidebar: Related posts với ảnh ── */
.lssk-sw--related {}
.lssk-sw-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.lssk-sw-related__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--c-border);
}
.lssk-sw-related__item:first-child { padding-top: 0; }
.lssk-sw-related__item:last-child  { border-bottom: none; padding-bottom: 0; }
.lssk-sw-related__img {
  flex-shrink: 0; width: 80px; height: 60px;
  border-radius: var(--r-sm); overflow: hidden; background: var(--c-border);
  display: block;
}
.lssk-sw-related__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.lssk-sw-related__img:hover img { transform: scale(1.08); }
.lssk-sw-related__body { flex: 1; min-width: 0; }
.lssk-sw-related__title {
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--c-text); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t); margin-bottom: 5px;
}
.lssk-sw-related__title:hover { color: var(--c-green); }
.lssk-sw-related__meta { font-size: 11px; color: var(--c-muted); }

/* ── Admin: Slug input fields ── */
.lssk-slug-input { font-family: monospace; }
.lssk-slug-preview { font-family: monospace; font-size: 12px; }

/* ═════════════════
   SIDEBAR WIDGETS
═══════════════════ */

/* Base widget */
.lssk-sw {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 22px 20px;
  margin-bottom: 20px; box-shadow: var(--sh-sm);
}.lssk-sw:last-child {
  margin-bottom: 0;
}.lssk-sw__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--c-text);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-green);
  display: flex;
  align-items: center;
  gap: 8px;
}.lssk-sw__title i {
  color: var(--c-green);
  font-size: 12px;
}

/* ── 1. Featured image (16/9) ── */
.lssk-sw--feat-img { padding: 0; overflow: hidden; }
.lssk-swfi {
  display: block; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-lg);
}
.lssk-swfi img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .5s ease;
}
.lssk-swfi:hover img { transform: scale(1.05); }
.lssk-swfi__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 55%);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 14px; opacity: 0; transition: opacity var(--t);
}
.lssk-swfi:hover .lssk-swfi__overlay { opacity: 1; }
.lssk-swfi__overlay i { font-size: 22px; color: #fff; }

/* ── 2. Related posts (thumb 80×60) ── */
.lssk-swrl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lssk-swrl__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--c-border);
}
.lssk-swrl__item:first-child { padding-top: 0; }
.lssk-swrl__item:last-child  { border-bottom: none; padding-bottom: 0; }
.lssk-swrl__img {
  flex-shrink: 0; width: 80px; height: 60px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--c-border); display: block;
}
.lssk-swrl__img img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .3s;
}
.lssk-swrl__img:hover img { transform: scale(1.08); }
.lssk-swrl__body { flex: 1; min-width: 0; }
.lssk-swrl__title {
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--c-text); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; transition: color var(--t);
}
.lssk-swrl__title:hover { color: var(--c-green); }
.lssk-swrl__date { font-size: 11px; color: var(--c-muted); margin-top: 5px; display: block; }

/* ── 3. Recent posts (thumb 72×72, số thứ tự, cat badge) ── */
.lssk-swp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lssk-swp__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--c-border);
}
.lssk-swp__item:first-child { padding-top: 0; }
.lssk-swp__item:last-child  { border-bottom: none; padding-bottom: 0; }
.lssk-swp__thumb {
  flex-shrink: 0; width: 72px; height: 72px; position: relative;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--c-bg2); display: block;
}
.lssk-swp__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .3s;
}
.lssk-swp__thumb:hover img { transform: scale(1.08); }
.lssk-swp__num {
  position: absolute; bottom: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-green); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.lssk-swp__thumb--no-img {
  background: var(--c-bg2);
  align-items: center; justify-content: center;
}
.lssk-swp__thumb--no-img .lssk-swp__num {
  position: static; width: 28px; height: 28px; font-size: 13px;
  margin: auto;
}
.lssk-swp__body { flex: 1; min-width: 0; }
.lssk-swp__title {
  font-size: 13px; font-weight: 600; line-height: 1.45;
  color: var(--c-text); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; transition: color var(--t); margin-bottom: 5px;
}
.lssk-swp__title:hover { color: var(--c-green); }
.lssk-swp__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 8px; font-size: 11px; color: var(--c-muted);
}
.lssk-swp__meta i { color: var(--c-green); font-size: 10px; }
.lssk-swp__cat {
  font-size: 10px; padding: 1px 7px;
  background: var(--c-light); border-radius: var(--r-full);
  color: var(--c-green); font-weight: 600; flex-shrink: 0;
}

/* ── 4. Categories (count badge, active) ── */
.lssk-swc { list-style: none; margin: 0; padding: 0; }
.lssk-swc__item { border-bottom: 1px solid var(--c-border); }
.lssk-swc__item:last-child { border-bottom: none; }
.lssk-swc__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 4px; font-size: 13px; color: var(--c-text);
  transition: color var(--t), padding-left var(--t);
}
.lssk-swc__link:hover { color: var(--c-green); padding-left: 6px; }
.lssk-swc__item.is-active .lssk-swc__link {
  color: var(--c-green); font-weight: 700; padding-left: 6px;
}
.lssk-swc__name { flex: 1; }
.lssk-swc__count {
  font-size: 11px; color: #fff;
  background: var(--c-border); border-radius: var(--r-full);
  padding: 1px 7px; min-width: 22px; text-align: center;
  transition: background var(--t);
}
.lssk-swc__link:hover .lssk-swc__count,
.lssk-swc__item.is-active .lssk-swc__count { background: var(--c-green); }

/* ── 5. Tag cloud ── */
.lssk-swt { display: flex; flex-wrap: wrap; gap: 6px; }

.lssk-swt__tag {
  background: var(--c-bg2); border-color: var(--c-green);
  color: var(--c-green); padding: 4px 9px; margin: 0 auto 1px;
  border: 1px solid var(--c-border); border-radius: var(--r-full);
}
.lssk-swt__tag:hover,
.lssk-swt__tag.is-active {
  background: var(--c-light); border-color: var(--c-green);
  color: var(--c-green); padding: 4px 9px; margin: 0 auto 1px;
  border: 1px solid var(--c-border); border-radius: var(--r-full);
}

/* ── 6. CTA Widget ── */
.lssk-sw--cta { background: var(--c-green); border-color: var(--c-green); }
.lssk-sw-cta  { text-align: center; }.lssk-sw-cta__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  margin: 0 auto 12px;
}.lssk-sw-cta__title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}.lssk-sw-cta__desc {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  margin: 0 0 16px;
  line-height: 1.5;
}.lssk-sw-cta__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.15);
  border-radius: var(--r-md);
  padding: 9px 14px;
  margin-bottom: 6px;
  transition: background var(--t);
}.lssk-sw-cta__phone:hover {
  background: rgba(255,255,255,.28);
}.lssk-sw-cta__phone--alt {
  font-size: 14px;
  font-weight: 600;
}.lssk-sw-cta__email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  margin-bottom: 16px;
  transition: color var(--t);
}.lssk-sw-cta__email:hover {
  color: #fff;
}.lssk-sw-cta__btn {
  width: 100%;
  justify-content: center;
  background: #fff;
  color: var(--c-green);
}.lssk-sw-cta__btn:hover {
  background: var(--c-dark);
  color: #fff;
}

/* Sidebar CPT nav/dl widget */
.lssk-sw-nav { list-style: none; margin: 0; padding: 0; }.lssk-sw-nav__item {
  border-bottom: 1px solid var(--c-border);
}.lssk-sw-nav__item:last-child {
  border-bottom: none;
}.lssk-sw-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  font-size: 13px;
  color: var(--c-text);
  transition: color var(--t), padding-left var(--t);
}.lssk-sw-nav__link i {
  font-size: 9px;
  color: var(--c-muted);
  transition: color var(--t);
  flex-shrink: 0;
}
.lssk-sw-nav__link:hover,
.lssk-sw-nav__link:hover i,
.lssk-sw-nav__item.is-active .lssk-sw-nav__link i { color: var(--c-green); }

.lssk-sw-dl { margin: 0; }.lssk-sw-dl__term {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--c-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}.lssk-sw-dl__term:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}.lssk-sw-dl__term i {
  color: var(--c-green);
  font-size: 10px;
}.lssk-sw-dl__def {
  font-size: 13px;
  color: var(--c-text);
  margin: 4px 0 0;
  font-weight: 500;
}

/* WP widget fallback */
.lssk-widget-area .widget {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 22px 20px;
  margin-bottom: 20px; box-shadow: var(--sh-sm);
}.lssk-widget-area .widget-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-green);
}

/* Admin permalink fields */
.lssk-slug-input, .lssk-slug-preview { font-family: monospace; }

/* ═══ CATEGORY BLOG ARCHIVE ═══ */

/* Layout 2-cột: posts + sidebar */
.lssk-category-section    { padding-top: 0; }

/* Sub-category chips */
.lssk-subcats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px; padding-bottom: 20px;
  border-bottom: 1px solid var(--c-border);
}
.lssk-subcat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; background: var(--c-bg2);
  border: 1px solid var(--c-border); border-radius: var(--r-full);
  font-size: 13px; color: var(--c-text);
  transition: all var(--t);
}
.lssk-subcat-chip:hover { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.lssk-subcat-chip i     { font-size: 11px; }
.lssk-subcat-chip__count{
  font-size: 11px; background: var(--c-border);
  padding: 1px 6px; border-radius: var(--r-full);
  transition: background var(--t);
}
.lssk-subcat-chip:hover .lssk-subcat-chip__count { background: rgba(255,255,255,.25); }

/* Sort bar */
.lssk-cat-sortbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding: 10px 14px;
  background: var(--c-bg2); border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}
.lssk-cat-sortbar__count  { font-size: 14px; color: var(--c-muted); margin: 0; }
.lssk-cat-sortbar__count strong { color: var(--c-text); font-size: 16px; }
.lssk-cat-sortbar__right  { display: flex; gap: 4px; }
.lssk-sort-link {
  font-size: 13px; padding: 5px 12px;
  border-radius: var(--r-md); color: var(--c-muted);
  transition: background var(--t), color var(--t);
}
.lssk-sort-link:hover  { background: var(--c-border); color: var(--c-text); }
.lssk-sort-link.is-active { background: var(--c-green); color: #fff; }

/* Posts list — horizontal card style */
.lssk-post-list { display: flex; flex-direction: column; gap: 0; }
.lssk-post-item:first-child { border-top: 1px solid var(--c-border); }
.lssk-post-item:hover { background: var(--c-bg2); }.lssk-post-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}
.lssk-post-item:hover .lssk-post-item__thumb img { transform: scale(1.04); }
.lssk-post-item__meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.lssk-post-item__cat {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 3px 10px;
  background: var(--c-light); border-radius: var(--r-full);
  color: var(--c-green);
}
.lssk-post-item__date {
  font-size: 12px; color: var(--c-muted);
  display: flex; align-items: center; gap: 4px;
}
.lssk-post-item__date i { font-size: 10px; color: var(--c-green); }.lssk-post-item__title a {
  color: var(--c-text);
  transition: color var(--t);
}.lssk-post-item__title a:hover {
  color: var(--c-green);
}.lssk-post-item__excerpt {
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lssk-post-item__more {
  font-size: 13px; font-weight: 600; color: var(--c-green);
  display: inline-flex; align-items: center; gap: 5px; margin-top: auto;
  align-self: flex-start; transition: gap var(--t);
}
.lssk-post-item__more:hover { gap: 8px; }
.lssk-post-item__more i { font-size: 10px; }

/* WP pagination */
.lssk-wp-pagination { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--c-border); }
.lssk-wp-pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.lssk-wp-pagination .page-numbers {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--c-border); border-radius: var(--r-md);
  font-size: 14px; color: var(--c-text); transition: all var(--t);
}
.lssk-wp-pagination .page-numbers:hover,
.lssk-wp-pagination .page-numbers.current {
  background: var(--c-green); border-color: var(--c-green); color: #fff;
}
.lssk-wp-pagination .page-numbers.dots { border: none; background: none; }

/* Responsive category */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {.lssk-post-item {
  grid-template-columns: 1fr;
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--c-border);
  transition: background var(--t);
}.lssk-post-item__thumb {
  border-radius: var(--r-md);
  overflow: hidden;
  display: block;
  aspect-ratio: 16/9;
  background: var(--c-border);
  margin: 16px 16px 0;
  flex-shrink: 0;
}.lssk-post-item__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}.lssk-post-item__title {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
}

/* ══ PRODUCT TABS (Mô tả / Video / Mô hình 3D) ══ */
.lssk-sp-tabs {
  margin-top: 40px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.lssk-sp-tab-nav {
  display: flex; border-bottom: 2px solid var(--c-border);
  background: var(--c-bg2); overflow-x: auto;
  scrollbar-width: none;
}
.lssk-sp-tab-nav::-webkit-scrollbar { display: none; }
/* Tab button base */
.lssk-sp-tab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-size: 13px; font-weight: 600;
  color: var(--c-muted); background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  cursor: pointer; white-space: nowrap;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.lssk-sp-tab-btn:hover  { color: var(--c-text); background: rgba(0,0,0,.03); }
.lssk-sp-tab-btn:focus-visible {
  outline: 2px solid var(--c-green); outline-offset: -2px;
}
.lssk-sp-tab-btn.is-active {
  color: var(--c-green); border-bottom-color: var(--c-green);
  background: #fff;
}
.lssk-sp-tab-btn i { font-size: 13px; }

/* Panel: ẩn mặc định — chỉ hiện khi có is-active */
.lssk-sp-tab-panel         { display: none; padding: 28px; background: #fff; }
.lssk-sp-tab-panel.is-active { display: block; animation: lssk-tab-in .2s ease; }
@keyframes lssk-tab-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* hidden attr (accessibility) đồng bộ với CSS display */
.lssk-sp-tab-panel[hidden] { display: none !important; }

.lssk-sp-media-panel { max-width: 860px; margin: 0 auto; }
.lssk-sp-media-panel--model .lssk-model-hint {
  text-align: center; font-size: 12px; color: var(--c-muted);
  margin-top: 10px;
}

/* ═══ CARD-POST — List view support ═══ */
.lssk-grid--list .lssk-card {
  flex-direction: row; align-items: flex-start;
}.lssk-grid--list .lssk-card__thumb {
  width: 260px;
  max-width: 38%;
  aspect-ratio: 16/9;
  flex: 0 0 260px;
}.lssk-grid--list .lssk-card__body {
  padding: 16px 20px;
  min-width: 0;
}.lssk-grid--list .lssk-card__title {
  font-size: 16px;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
.lssk-grid--list .lssk-card__excerpt { -webkit-line-clamp: 3; }

/* Category layout with sidebar */
.lssk-category-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 36px; align-items: start;
}.lssk-category-main {
  min-width: 0;
}
.lssk-category-hide-sidebar .lssk-category-layout { grid-template-columns: 1fr; }
.lssk-category-hide-filter .lssk-filter-toolbar,
.lssk-category-hide-filter .lssk-filter-panel,
.lssk-category-hide-filter .lssk-filter-overlay { display: none !important; }
.lssk-category-hide-date .lssk-card__date,
.lssk-category-hide-excerpt .lssk-card__excerpt,
.lssk-category-hide-read-more .lssk-card__more { display: none !important; }

/* Override filter-bar inside category layout — không dùng drawer-footer */
.lssk-category-main .lssk-filter-toolbar { flex-wrap: nowrap; }

@media (max-width: 1024px) {
}
@media (max-width: 768px) {.lssk-category-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}.lssk-category-sidebar {
  min-width: 0;
  position: sticky;
  top: calc(var(--hdr-h) + 20px);
  align-self: start;
  display: none;
}.lssk-grid--list .lssk-card {
  flex-direction: column;
}.lssk-grid--list .lssk-card__thumb {
  width: 100%;
  max-width: none;
  flex-basis: auto;
  flex-shrink: 0;
  aspect-ratio: unset;
  height: auto;
  border-radius: var(--r-md) var(--r-md) 0 0;
}.lssk-sp-media-panel--model model-viewer {
  width: 100%;
  min-height: 300px;
  border-radius: var(--r-md);
  background: var(--c-bg2);
}
}

/* Specs tab panel layout */
.lssk-sp-specs--tab { padding: 0; border: none; box-shadow: none; }
.lssk-sp-specs--tab .lssk-specs-table { width: 100%; max-width: 640px; }

/* ══ PROJECT INFO GRID ══ */

/* ══ SIDEBAR SEARCH WIDGET ══ */
.lssk-sw-search {
  display: flex; gap: 0; border: 1.5px solid var(--c-border);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.lssk-sw-search:focus-within {
  border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(1,137,87,.12);
}
.lssk-sw-search__input {
  flex: 1; padding: 10px 14px; font-size: 14px;
  border: none; background: #fff; color: var(--c-text);
  font-family: var(--font); outline: none;
}
.lssk-sw-search__input::placeholder { color: var(--c-muted); }
.lssk-sw-search__btn {
  width: 44px; background: var(--c-green); color: #fff;
  border: none; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.lssk-sw-search__btn:hover { background: var(--c-dark); }

/* ══ STICKY SIDEBAR — account for WP admin bar ══ */
body.admin-bar .lssk-content-sidebar,
body.admin-bar .lssk-category-sidebar,
body.admin-bar .lssk-single-aside {
  top: calc(var(--hdr-h) + 20px + 32px); /* 32px = admin bar height */
}
@media (max-width: 782px) {
  body.admin-bar .lssk-content-sidebar,
  body.admin-bar .lssk-category-sidebar,
  body.admin-bar .lssk-single-aside {
    top: calc(var(--hdr-h) + 20px + 46px); /* 46px = mobile admin bar */
  }
}

/* ══ lssk-post-thumb (featured image trong single.php) ══ */
.lssk-post-thumb {
  margin-bottom: 28px; border-radius: var(--r-lg); overflow: hidden;
}.lssk-post-thumb img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* ══ lssk-entry-meta improvement ══ */
.lssk-entry-meta--post {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 13px; color: var(--c-muted);
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
}.lssk-entry-meta--post span {
  display: flex;
  align-items: center;
  gap: 5px;
}.lssk-entry-meta--post i {
  color: var(--c-green);
  font-size: 11px;
}
.lssk-entry-meta--post a    { color: var(--c-text); transition: color var(--t); }
.lssk-entry-meta--post a:hover { color: var(--c-green); }
/* lssk-preset-tax-input — hidden input, không cần CSS nhưng cần khai báo */
.lssk-preset-tax-input { display: none; }
/* lssk-sw--search modifier */
.lssk-sw--search { padding: 20px; }

/* ══ GALLERY: bổ sung CSS còn thiếu ══ */

/* Grid gallery card hover overlay */
.lssk-gallery-card::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(1,137,87,.0);
  transition: background .25s; pointer-events: none; z-index: 1;
}
.lssk-gallery-card:hover::after { background: rgba(1,137,87,.12); }

/* ══ SP-SINGLE layout responsive ══ */
/* Chỉ stack trên mobile/tablet nhỏ ≤768px */
@media (max-width: 768px) {
}

/* ══ Video embed wrapper ══ */
.lssk-video-embed {
  position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--r-md); overflow: hidden; background: #000;
}
.lssk-video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none;
}

/* ══ Entry content trong single CPT ══ */
.lssk-entry-content h1 { font-size: clamp(20px,3vw,30px); margin: 36px 0 14px; color: var(--c-green); }
.lssk-entry-content ul,
.lssk-entry-content ol { padding-left: 1.5em; margin: 1em 0; }.lssk-entry-content li {
  margin-bottom: .5em;
  line-height: 1.7;
}.lssk-entry-content blockquote {
  margin: 1.5em 0;
  padding: 12px 20px;
  border-left: 4px solid var(--c-green);
  background: var(--c-light);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
}.lssk-entry-content a {
  color: var(--c-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}.lssk-entry-content a:hover {
  color: var(--c-dark);
  opacity: .8;
}

/* ══ Archive full-width CTA ══ */
.lssk-sp-full-section { margin-top: 60px; padding-top: 48px; border-top: 1px solid var(--c-border); }

/* ══ Post nav responsive ══ */
@media (max-width: 600px) {.lssk-post-nav {
  grid-template-columns: 1fr;
}.lssk-post-nav__next {
  text-align: left;
}
}

/* ═══ Filter: per_page hidden input ═══ */
.lssk-filter-perpage { display: none; }

/* ══════════════════════════════════════════════════════
   CSS ADDITIONS — Accessibility, Blog, Missing Classes
══════════════════════════════════════════════════════ */

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Bỏ qua entrance animations */
  .lssk-animate { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lssk-reading-progress { transition: none !important; }
}

/* ── Z-index variables (thêm vào :root) ── */
/* Dùng trong code: var(--z-header), var(--z-modal), v.v. */
:root {
  --z-base:    1;
  --z-drop:    100;
  --z-sticky:  200;
  --z-overlay: 800;
  --z-header:  900;
  --z-toast:   1000;
  --z-modal:   9999;
}

/* ── TOC sub-items ── */
.lssk-toc-item--sub {
  padding-left: 20px; font-size: 13px; counter-increment: none;
}
.lssk-toc-item--sub a::before { content: none; }
.lssk-toc-item--sub a { color: var(--c-muted); }
.lssk-toc-item--sub a:hover { color: var(--c-green); }.lssk-toc-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--c-muted);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: background var(--t);
}
.lssk-toc-toggle:hover { background: var(--c-border); color: var(--c-text); }.lssk-toc-toggle-icon {
  display: inline-block;
}

/* ── Post tags ── */
.lssk-post-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 24px 0; padding: 16px 0;
  border-top: 1px solid var(--c-border);
}
.lssk-post-tags > i { color: var(--c-green); font-size: 13px; flex-shrink: 0; }.lssk-post-tags a {
  font-size: 12px;
  padding: 4px 12px;
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  color: var(--c-muted);
  text-decoration: none;
  transition: all var(--t);
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}.lssk-post-tags a:hover {
  background: var(--c-light);
  color: var(--c-green);
  border-color: var(--c-green);
}
.lssk-post-tags a::before { content: '#'; opacity: .5; margin-right: 1px; }

/* ── Share buttons — missing sub-elements ── */
.lssk-share__label {
  font-size: 13px; font-weight: 700; color: var(--c-muted);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.lssk-share__label i { color: var(--c-green); }
.lssk-share__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.lssk-share-copy.copied {
  background: var(--c-green); color: #fff;
}
.lssk-share-btn--native {
  background: var(--c-text); color: #fff;
}
.lssk-share-btn__zalo-icon {
  width: 16px; height: 16px; object-fit: contain; vertical-align: middle;
}

/* ── Author box — missing sub-elements ── */
.lssk-author-box__avatar { flex-shrink: 0; }.lssk-author-box__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--c-green);
  font-weight: 700;
  margin-bottom: 4px;
}.lssk-author-box__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 8px;
}
.lssk-author-box__name a { color: var(--c-text); }
.lssk-author-box__name a:hover { color: var(--c-green); }.lssk-author-box__bio {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0 0 12px;
}
.lssk-author-box__link:hover { gap: 8px; }.lssk-author-box__info {
  flex: 1;
  min-width: 0;
}

/* ── WP link_pages pagination ── */
.lssk-page-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 32px 0; padding: 20px 0; border-top: 1px solid var(--c-border);
  font-size: 14px;
}
.lssk-page-links a, .lssk-page-links span {
  min-width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--c-border); border-radius: var(--r-sm);
  padding: 0 8px; font-weight: 600; transition: all var(--t);
}
.lssk-page-links a { color: var(--c-text); }
.lssk-page-links a:hover { border-color: var(--c-green); color: var(--c-green); }
.lssk-page-links span { background: var(--c-green); border-color: var(--c-green); color: #fff; }

/* ── Reading time ── */
.lssk-reading-time i { color: var(--c-green); font-size: 11px; }

/* ── Blog sidebar sticky ── */
.lssk-blog-sidebar { position: sticky; top: calc(var(--hdr-h) + 20px); align-self: start; }.lssk-blog-sidebar.is-sticky {
  top: calc(var(--header-h, 72px) + 20px);
}

/* ── Dark mode — variables ── */
@media (prefers-color-scheme: dark) {
  :root {
    --c-text:   #e4e4e4;
    --c-muted:  #9aa;
    --c-border: #2e3e34;
    --c-bg:     #111a14;
    --c-bg2:    #161f18;
    --c-light:  #1a2e22;
    --c-ink:    #0a130b;
    --sh-sm: 0 2px 8px rgba(0,0,0,.3);
    --sh-md: 0 4px 20px rgba(0,0,0,.4);
    --sh-lg: 0 8px 36px rgba(0,0,0,.5);
  }
  .lssk-header,
  .lssk-card,
  .lssk-sw,
  .lssk-sp-tabs,
  .lssk-sp-tab-panel { background: var(--c-bg); }
  .lssk-sp-tab-nav,
  .lssk-sp-cta,
  .lssk-single-cta { background: var(--c-bg2); }
}

/* ── Print CSS — single post & product ── */
@media print {
  .lssk-header, .lssk-footer, .lssk-sticky, .lssk-to-top,
  .lssk-reading-progress, .lssk-share, .lssk-post-nav,
  .lssk-related-posts, .lssk-related-cpt, .lssk-category-sidebar,
  .lssk-single-aside, .lssk-sp-tab-nav, .lssk-toc-toggle,
  .lssk-filter-bar { display: none !important; }

  .lssk-single-layout,
  .lssk-sp-single-layout,
  .lssk-content-layout { grid-template-columns: 1fr !important; }.lssk-sp-tab-panel {
  padding: 20px 16px;
  display: block !important;
}

  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }
  .lssk-page-banner { background: none; color: #000; padding: 20px 0; }.lssk-sp-single__name {
  font-size: 18pt;
  color: var(--c-text);
  margin-bottom: 16px;
  line-height: 1.3;
  font-weight: 700;
}.lssk-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  display: table;
  overflow-x: auto;
}
  img { max-width: 100% !important; page-break-inside: avoid; }
  h2, h3 { page-break-after: avoid; }
  p, li { page-break-inside: avoid; orphans: 3; widows: 3; }
}

/* ── Accessibility improvements ── */
/* Skip to content */
.lssk-skip-link:focus { 
  background: var(--c-green); color: #fff;
  padding: 8px 20px; font-weight: 700;
  z-index: 99999; border-radius: 0 0 var(--r-md) var(--r-md);
}
/* Better focus for all interactive */
:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}
/* Screen reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Toast notification ── */
.lssk-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast);
  background: var(--c-ink); color: #fff;
  padding: 12px 20px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; box-shadow: var(--sh-lg);
  transform: translateY(80px); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  pointer-events: none;
}
.lssk-toast.is-visible { transform: translateY(0); opacity: 1; }
.lssk-toast--success { border-left: 4px solid var(--c-green); }
.lssk-toast--error   { border-left: 4px solid #dc3232; }

/* ── Form validation states ── */
.lssk-field--error input,
.lssk-field--error textarea,
.lssk-field--error select,
input.lssk-field--error,
textarea.lssk-field--error,
select.lssk-field--error {
  border-color: #dc3232 !important;
  box-shadow: 0 0 0 3px rgba(220,50,50,.12) !important;
}
.lssk-field-error {
  display: block; font-size: 12px; color: #dc3232;
  margin-top: 4px; font-weight: 500;
}

/* ── Disabled button state ── */
.lssk-btn:disabled,
.lssk-btn[disabled] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* ── lssk-single-cta (thiet-ke, blog) ── */
.lssk-single-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  background: var(--c-light); border: 1px solid var(--c-green);
  border-radius: var(--r-lg); padding: 20px 24px;
  margin: 36px 0;
}.lssk-single-cta__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 200px;
}.lssk-single-cta__text strong {
  font-size: 15px;
  color: var(--c-green);
  display: block;
  margin-bottom: 4px;
}.lssk-single-cta__text span {
  font-size: 13px;
  color: var(--c-muted);
}

/* ── lssk-btn-sm variant ── */
.lssk-btn-sm { padding: 8px 18px; font-size: 13px; }

/* ── Page banner breadcrumb dark bg ── */
.lssk-breadcrumb--light .lssk-bc-item,
.lssk-breadcrumb--light .lssk-bc-sep,
.lssk-breadcrumb--light .lssk-bc-current { color: rgba(255,255,255,.8); }
.lssk-breadcrumb--light .lssk-bc-item a:hover { color: #fff; }

/* ── lssk-swt tag đang active responsive ── */
@media (max-width: 640px) {
  .lssk-swt { gap: 5px; }.lssk-swt__tag {
  font-size: 11px;
  padding: 3px 9px;
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  color: var(--c-muted);
  transition: all var(--t);
}.lssk-sp-cta__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-direction: column;
}.lssk-single-cta {
  flex-direction: column;
  text-align: center;
}.lssk-single-cta__btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
  .lssk-single-cta__btns .lssk-btn { flex: 1; justify-content: center; }.lssk-author-box {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--c-bg2);
  border-radius: var(--r-lg);
  padding: 24px;
  margin: 36px 0;
  border: 1px solid var(--c-border);
  flex-direction: column;
  text-align: center;
}.lssk-author-box__link {
  font-size: 13px;
  color: var(--c-green);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
}
}

/* ═══════════════════════════════════════
   SIDEBAR CPT — thiết kế, dự án, sản phẩm
════════════════════════════════════════ */

/* ── Mini preview (bài đang xem) ── */
.lssk-sw--preview { padding: 0; overflow: hidden; border-radius: var(--r-lg); }
.lssk-sw-preview  { display: block; position: relative; }
.lssk-sw-preview__img {
  position: relative; overflow: hidden;
  aspect-ratio: 16/9;
}
.lssk-sw-preview__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.lssk-sw-preview:hover .lssk-sw-preview__img img { transform: scale(1.04); }
.lssk-sw-preview__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--c-green); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 10px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; gap: 5px;
}

/* ── Project info list ── */
.lssk-sw-info-list { list-style: none; margin: 0; padding: 0; }
.lssk-sw-info-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--c-border);
}
.lssk-sw-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.lssk-sw-info-item__icon {
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--c-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-green); font-size: 12px; margin-top: 1px;
}
.lssk-sw-info-item__body { flex: 1; min-width: 0; }
.lssk-sw-info-item__label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--c-muted); margin-bottom: 2px;
}
.lssk-sw-info-item__value {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--c-text); line-height: 1.4;
}

/* ── Related items (swrl variant dùng lại) ── */
.lssk-swrl__cat {
  display: block; font-size: 11px; color: var(--c-green);
  font-weight: 600; margin-top: 4px;
}

/* ── sw-nav active state cải thiện ── */
.lssk-sw-nav__item.is-active .lssk-sw-nav__link {
  color: var(--c-green); font-weight: 700; padding-left: 6px;
  background: var(--c-light); border-radius: var(--r-sm); margin: 0 -4px;
  padding-left: 10px; padding-right: 6px;
}
.lssk-sw-nav__count {
  flex-shrink: 0;
  background: var(--c-border); color: var(--c-muted);
  font-size: 11px; padding: 1px 7px;
  border-radius: var(--r-full); min-width: 22px; text-align: center;
  transition: background var(--t), color var(--t);
}
.lssk-sw-nav__link:hover .lssk-sw-nav__count,
.lssk-sw-nav__item.is-active .lssk-sw-nav__count {
  background: var(--c-green); color: #fff;
}

/* ── Single layout grid ── */
.lssk-single-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px; align-items: start;
}
.lssk-single-main  { min-width: 0; }
/* Admin bar offset */
body.admin-bar .lssk-single-aside {
  top: calc(var(--hdr-h) + 20px + 32px);
}
@media (max-width: 782px) {
  body.admin-bar .lssk-single-aside {
    top: calc(var(--hdr-h) + 20px + 46px);
  }
}

/* Responsive single layout */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {.lssk-single-layout {
  grid-template-columns: 1fr;
  gap: 28px;
}.lssk-single-aside {
  min-width: 0;
  position: static;
  top: calc(var(--hdr-h) + 20px);
  align-self: start;
}
  .lssk-sw--preview   { display: none; } /* Ẩn preview trên mobile — đã có page banner */
}

/* ══════════════════════════════════════════════════
   ADDITIONS — Contact form CF7, Topbar dynamic, Misc
═══════════════════════════════════════════════════ */

/* ── CF7 Contact form full styling ── */
.lssk-contact-form-content .wpcf7 input[type="submit"],
.lssk-contact-form-content input[type="submit"] {
  width: 100%; padding: 12px 24px;
  background: var(--c-green); color: #fff;
  border: none; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background var(--t), transform var(--t);
  font-family: var(--font);
}.lssk-contact-form-content .wpcf7 input[type="submit"]:hover {
  background: var(--c-dark);
}
.lssk-contact-form-content .wpcf7-form.sent .wpcf7-response-output {
  background: #ecfdf5; border: 1px solid var(--c-green);
  color: var(--c-green); border-radius: var(--r-md); padding: 12px 16px;
}
.lssk-contact-form-content .wpcf7-form.failed .wpcf7-response-output {
  background: #fef2f2; border: 1px solid #dc3232;
  color: #dc3232; border-radius: var(--r-md); padding: 12px 16px;
}
.lssk-contact-form-content .wpcf7-not-valid-tip { color: #dc3232; font-size: 12px; margin-top: 4px; }
.lssk-contact-form-content .wpcf7-spinner { display: none; }

/* ── Topbar thêm giờ làm việc ── */
.lssk-topbar-link--hide-sm { display: none; }
@media (min-width: 992px) {.lssk-topbar-link--hide-sm {
  display: flex;
} }

/* ── Zalo in topbar close if missing ── */
.lssk-topbar-social-link { display: inline-flex; align-items: center; }

/* ── Contact hotline hover ── */
.lssk-contact-hotline:hover { opacity: .88; }

/* ── Hero slider — last slide CSS if missing ── */
.lssk-slide { position: relative; min-height: 480px; overflow: hidden; display: none; }.lssk-slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
  display: flex;
  align-items: center;
}

/* ── lssk-form--validate (custom forms) ── */
.lssk-form--validate .lssk-field { margin-bottom: 16px; }
.lssk-form--validate .lssk-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.lssk-form--validate .lssk-field input,
.lssk-form--validate .lssk-field textarea,
.lssk-form--validate .lssk-field select {
  width: 100%; padding: 10px 14px; font-size: 14px;
  border: 1.5px solid var(--c-border); border-radius: var(--r-md);
  font-family: var(--font); transition: border-color var(--t);
}
.lssk-form--validate .lssk-field input:focus,
.lssk-form--validate .lssk-field textarea:focus {
  border-color: var(--c-green); outline: none;
  box-shadow: 0 0 0 3px rgba(1,137,87,.1);
}

/* ── lssk-contact-hotline sub-elements ── */
.lssk-contact-hotline__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}

/* ── Responsive: topbar compact mode ── */

/* ── Admin bar offset for hero ── */
body.admin-bar .lssk-hero { padding-top: 32px; }
@media (max-width: 782px) { body.admin-bar .lssk-hero { padding-top: 46px; } }

/* ── TOC toggle icon transition ── */
.lssk-toc-toggle-icon { transition: transform .25s ease; display: inline-block; }

/* ── sp-single-layout min column width ── */
.lssk-sp-single__gallery { min-width: 280px; }
@media (max-width: 768px) {
  .lssk-sp-single-layout {
    grid-template-columns: 1fr;
  }
}

/* gallery column: scroll bình thường, không sticky */

/* ── Thiết kế specs note ── */
.lssk-tk-specs { margin: 24px 0; }
.lssk-tk-specs__note {
  font-size: 13px; color: var(--c-muted);
  padding: 10px 16px; border-top: 1px solid var(--c-border);
  display: flex; align-items: flex-start; gap: 8px;
}
.lssk-tk-specs__note i { color: var(--c-green); margin-top: 2px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   LIGHTGALLERY v2 — Theme overrides
   Giữ nguyên LG core, chỉ override màu/font cho match
═════════════════════════════════════════════════════ */
.lssk-lg .lg-toolbar { background: rgba(0,0,0,.7); }
.lssk-lg .lg-counter  { color: rgba(255,255,255,.85); font-size: 13px; }
.lssk-lg .lg-caption  { font-size: 14px; color: rgba(255,255,255,.85); }
.lssk-lg .lg-thumb-outer { background: rgba(0,0,0,.85); }
.lssk-lg .lg-thumb-item.active { border-color: var(--c-green); }
.lssk-lg .lg-sub-html p.lg-caption { margin: 0; padding: 0; font-style: normal; }

/* Zoom icon overlay trên gallery-main */

/* ════════════════════════════════════════════════
   GALLERY REDESIGN — lssk-glr-* (new class names)
════════════════════════════════════════════════ */

/* Wrapper */
.lssk-glr-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Main image container ── */
.lssk-glr-main {
  position: relative;
  background: var(--c-bg2);
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  min-height: 220px;
  contain: layout;
  overflow: hidden;
  /* Không sticky — scroll bình thường */
}

/* Trigger fills container */
.lssk-glr-main > .lssk-gallery-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--r-md);
  cursor: zoom-in;
  display: block;
  padding: 0; margin: 0;
  border: none; background: none;
  font-size: 0; line-height: 0;
  overflow: hidden;
}

/* Main image */
.lssk-glr-main__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--c-bg2);
  transition: opacity .2s ease;
}

/* Zoom icon — bottom right, shows on hover */
.lssk-glr-zoom {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 2;
}
.lssk-glr-main:hover .lssk-glr-zoom { opacity: 1; transform: scale(1); }

/* Prev / Next navigation */
.lssk-glr-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.92);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  opacity: 0;
  transition: opacity .2s, background .2s;
  z-index: 2;
}
.lssk-glr-nav--prev { left: 10px; }
.lssk-glr-nav--next { right: 10px; }
.lssk-glr-main:hover .lssk-glr-nav { opacity: 1; }
.lssk-glr-nav:hover { background: var(--c-green); color: #fff; }
/* Touch devices — luôn hiện */
@media (hover: none) {
  .lssk-glr-nav { opacity: .75; background: rgba(255,255,255,.85); }
}

/* ── Thumbnail strip ── */
.lssk-glr-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 2px 0 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lssk-glr-thumbs::-webkit-scrollbar { height: 2px; }
.lssk-glr-thumbs::-webkit-scrollbar-thumb {
  background: var(--c-green);
  border-radius: 2px;
}

/* Thumbnail button */
.lssk-glr-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  background: var(--c-border);
  cursor: pointer;
  position: relative;
  font-size: 0;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.lssk-glr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s;
}
.lssk-glr-thumb:hover img { transform: scale(1.06); }
.lssk-glr-thumb:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.lssk-glr-thumb.is-active {
  border-color: var(--c-green);
  box-shadow: 0 0 0 1px var(--c-green);
}
.lssk-glr-thumb:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* "+N more" badge */
.lssk-glr-thumb__more {
  position: absolute;
  inset: 0;
  background: rgba(1,137,87,.82);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile thumb size */
@media (max-width: 480px) {
  .lssk-glr-thumb { width: 58px; height: 58px; }
}

/* ── sp-single-layout: prevent any overflow ── */
.lssk-sp-single__gallery,
.lssk-sp-single__info {
  min-width: 0;
  overflow: hidden;
}
/* lssk-shortcode-related — sử dụng lại lssk-grid layout */
.lssk-shortcode-related { margin: 24px 0; }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE & MISSING BASE RULES — Complete Fix Pass
   Fixes: 27 classes only in @media + all responsive breakpoints
═════════════════════════════════════════════════════════════ */

/* ── Post item (blog list) — base desktop styles ─ */
.lssk-post-item__thumb {
  border-radius: var(--r-md); overflow: hidden;
  display: block; flex-shrink: 0;
  aspect-ratio: 16/9; background: var(--c-border);
  width: 260px; height: 195px;
}
.lssk-post-item__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.lssk-post-item:hover .lssk-post-item__thumb img { transform: scale(1.04); }
.lssk-post-item__body {
  padding: 8px 0;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.lssk-post-item__title {
  font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.lssk-post-item__title a { color: var(--c-text); transition: color var(--t); }
.lssk-post-item__title a:hover { color: var(--c-green); }
.lssk-post-item__excerpt {
  color: var(--c-muted); font-size: 14px; line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Desktop sidebar sticky ── */
.lssk-content-sidebar {
  position: sticky;
  top: calc(var(--hdr-h) + 20px);
  align-self: start; min-width: 0;
}
.lssk-category-sidebar {
  position: sticky;
  top: calc(var(--hdr-h) + 20px);
  align-self: start; min-width: 0;
}

/* ── Home: About grid (2-col desktop) ── */
.lssk-about-grid {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 56px; align-items: center;
}
.lssk-about-image {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
}
.lssk-about-image img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.lssk-about-stats {
  display: flex; gap: 28px; margin: 24px 0; flex-wrap: wrap;
}
.lssk-about-badge {
  position: absolute; bottom: 16px; left: 16px;
  background: #fff; border-radius: var(--r-md);
  padding: 12px 20px; box-shadow: var(--sh-lg);
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; color: var(--c-green);
  white-space: nowrap; z-index: 1;
}

/* ── Home: Camket grid (4-col desktop) ── */
.lssk-camket-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-top: 40px;
}

/* ── Home: CTA section (2-col desktop) ── */
.lssk-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px; align-items: center;
}
.lssk-cta-actions {
  display: flex; flex-direction: column;
  gap: 12px; flex-shrink: 0; min-width: 220px;
}

/* ── Hero slide content ── */
.lssk-slide-content {
  position: relative; z-index: 2;
  max-width: 800px; padding: 0 0 0 0; color: #fff;
}

/* ── Footer top padding ── */
.lssk-footer-top { padding: 56px 0 32px; }

/* ── Contact page grid ── */
.lssk-contact-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px; align-items: start;
}
.lssk-contact-main {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px; margin-bottom: 52px; align-items: start;
}
.lssk-contact-form-box {
  background: var(--c-bg2); border-radius: var(--r-lg);
  padding: 28px; border: 1px solid var(--c-border);
}
.lssk-contact-quick__btns { display: flex; gap: 10px; }

/* ── About page: stats grid (4-col) ── */
.lssk-about-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.lssk-about-stats-section .lssk-container > .lssk-about-stats-grid { margin-top: 40px; }

/* ── About: Mission/Vision grid (3-col) ── */
.lssk-about-mv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}

/* ── About: CTA final (2-col) ── */
.lssk-about-cta-final__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px; align-items: center;
}
.lssk-about-cta-final__actions {
  display: flex; flex-direction: row; gap: 14px; flex-wrap: wrap;
}

/* ── About: Partners grid ── */
.lssk-about-partners-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 16px; align-items: center;
}

/* ── About: Process steps ── */
.lssk-process-steps {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0; position: relative;
  padding: 40px 0 0; row-gap: 24px;
}
.lssk-process-line {
  position: absolute; top: 62px; left: 8.33%; right: 8.33%;
  height: 2px;
  background: linear-gradient(to right, var(--c-green), var(--c-accent));
  z-index: 0;
}

/* ── Filter panel close button (base) ── */
.lssk-filter-panel__close {
  display: flex; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.06); color: var(--c-text);
  font-size: 13px; align-items: center; justify-content: center;
  transition: background var(--t); flex-shrink: 0;
}
.lssk-filter-panel__close:hover { background: rgba(0,0,0,.14); }

/* ── Filter form fields grid ── */
.lssk-filter-form__fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* ── Lightbox buttons (base) ── */
.lssk-lb__prev { left: 14px; }
.lssk-lb__next { right: 14px; }

/* ── Drawer close button (base) ── */
.lssk-drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-bg2); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text); transition: background var(--t);
}
.lssk-drawer-close:hover { background: var(--c-border); }

/* ── Author box link (base) ── */
.lssk-author-box__link {
  font-size: 13px; color: var(--c-green); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap var(--t);
}
.lssk-author-box__link:hover { gap: 8px; }

/* ── Single CTA buttons (base) ── */
.lssk-single-cta__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.lssk-sp-cta__actions  { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Filter bar (hidden in print only — base is visible) ── */
.lssk-filter-bar {}

/* ── du-an: Hạng mục + Phạm vi cung cấp ── */
.lssk-da-hang-muc {
  padding: 12px 16px; border-top: 1px solid var(--c-border);
  font-size: 14px; line-height: 1.7;
}
.lssk-da-hang-muc strong { color: var(--c-green); display: block; margin-bottom: 6px; }
.lssk-da-hang-muc__body { color: var(--c-text); white-space: pre-line; }
.lssk-da-pham-vi {
  padding: 12px 16px; border-top: 1px solid var(--c-border);
  font-size: 14px;
}
.lssk-da-pham-vi strong { color: var(--c-green); display: block; margin-bottom: 8px; }
.lssk-da-pham-vi__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Gallery counter badge ── */
.lssk-gallery-counter {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  background: rgba(0,0,0,.52); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-full);
  pointer-events: none; display: none;
}
.lssk-gallery[data-count]:not([data-count="1"]) .lssk-gallery-counter { display: block; }

/* ══════════════════════════════════
   RESPONSIVE — Complete breakpoints
═══════════════════════════════════ */

/* ── ≥ 1280px large desktop ── */
@media (min-width: 1280px) {
  .lssk-about-grid { grid-template-columns: 1fr 520px; }
  .lssk-contact-grid { grid-template-columns: 1fr 440px; }
  .lssk-contact-main { grid-template-columns: 1fr 440px; }
}

/* ── ≤ 1100px ── */
@media (max-width: 1100px) {
  .lssk-about-grid { grid-template-columns: 1fr 380px; gap: 40px; }
  .lssk-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .lssk-footer-grid > :last-child { grid-column: 1 / -1; max-width: 480px; }
  .lssk-about-capacity-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≤ 1024px tablet ── */
@media (max-width: 1024px) {
  /* About */
  .lssk-about-grid { grid-template-columns: 1fr; gap: 36px; }
  .lssk-about-image { order: -1; }
  .lssk-about-badge { bottom: 10px; left: 10px; }
  .lssk-about-capacity-grid { grid-template-columns: repeat(2, 1fr); }
  .lssk-about-partners-grid { grid-template-columns: repeat(4, 1fr); }
  .lssk-about-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .lssk-about-mv-grid { grid-template-columns: 1fr; }
  .lssk-about-cta-final__inner { grid-template-columns: 1fr; text-align: center; }
  .lssk-about-cta-final__actions { justify-content: center; }

  /* Contact */
  .lssk-contact-main { grid-template-columns: 1fr; gap: 36px; }
  .lssk-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .lssk-locations-grid { grid-template-columns: 1fr; }

  /* CTA */
  .lssk-cta-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .lssk-cta-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; min-width: unset; }

  /* SP single: stack on tablet */
  .lssk-sp-single-layout { grid-template-columns: 1fr; }

  /* Footer */
  .lssk-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lssk-footer-grid > :first-child { grid-column: 1 / -1; }

  /* Blog */
  .lssk-blog-layout { grid-template-columns: 1fr; }
  .lssk-blog-sidebar { position: static; }

  /* Content sidebar on tablet: still visible */
  .lssk-content-layout { grid-template-columns: 1fr; }
  .lssk-content-sidebar { position: static; }
  .lssk-category-layout { grid-template-columns: 1fr; }
  .lssk-category-sidebar { position: static; }

  /* Single */
  .lssk-single-layout { grid-template-columns: 1fr; gap: 28px; }
  .lssk-single-aside { position: static; }
  .lssk-sw--preview { display: none; }
}

/* ── ≤ 992px mobile nav ── */
@media (max-width: 992px) {
  .lssk-grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Post item */
  .lssk-post-item { grid-template-columns: 200px 1fr; }
  .lssk-post-item__thumb { width: 200px; height: auto; }

  /* Camket */
  .lssk-camket-grid { grid-template-columns: repeat(2, 1fr); }

  /* Process */
  .lssk-process-steps { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .lssk-process-line { display: none; }
  .lssk-process-step--top .lssk-process-step__card,
  .lssk-process-step--bottom .lssk-process-step__card { order: 0; margin: 10px 0 0; }
}

/* ── ≤ 768px mobile ── */
@media (max-width: 768px) {
  /* Post item: stack vertically */
  .lssk-post-item {
    grid-template-columns: 1fr; border-bottom: 1px solid var(--c-border);
    padding-bottom: 20px; margin-bottom: 20px; gap: 0;
  }
  .lssk-post-item__thumb {
    width: 100%; height: auto; margin: 12px 0 0;
    aspect-ratio: 16/9; order: -1;
  }
  .lssk-post-item__body { padding: 14px 0; }
  .lssk-post-item__title { font-size: 16px; }
  .lssk-post-item:hover { background: var(--c-bg2); }

  /* Footer: 2-col on 768 */
  .lssk-footer-grid { grid-template-columns: 1fr 1fr; }

  /* About */
  .lssk-about-stats { gap: 20px; }

  /* Content sidebar: hide on small mobile */
  .lssk-content-sidebar { display: none; }
  .lssk-category-sidebar { display: none; }

  /* Project info: 1-col */
  .lssk-project-info__grid { grid-template-columns: 1fr; }
  .lssk-project-info__item { border-right: none !important; }
  .lssk-project-info__item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--c-border) !important; }

  /* Post nav: stack */
  .lssk-post-nav { grid-template-columns: 1fr; }
  .lssk-post-nav__next { text-align: left; }
  .lssk-post-nav__next .lssk-post-nav__dir { justify-content: flex-start; }

  /* Gallery: smaller thumbs */
  .lssk-glr-thumb { width: 60px; height: 60px; }

  /* Align end items in single-cta */
  .lssk-single-cta { flex-direction: column; text-align: center; }
  .lssk-single-cta__btns { justify-content: center; width: 100%; }
  .lssk-single-cta__btns .lssk-btn { flex: 1; justify-content: center; }

  /* SP CTA actions */
  .lssk-sp-cta__actions { flex-direction: column; }

  /* Author box */
  .lssk-author-box {
    flex-direction: column; text-align: center;
  }
  .lssk-author-box__link { justify-content: center; }

  /* Lightbox: smaller area */
  .lssk-lb__center { left: 0; right: 0; top: 56px; bottom: 86px; }
  .lssk-lb__img { max-width: 98vw; max-height: 68vh; }
  .lssk-lb__prev { left: 4px; }
  .lssk-lb__next { right: 4px; }

  /* Grid: 3 → 2 */
  .lssk-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≤ 640px small mobile ── */
@media (max-width: 640px) {
  :root { --py: 48px; --main-h: 60px; }

  /* All grids: 1-col */
  .lssk-grid-3, .lssk-grid-4 { grid-template-columns: 1fr; }

  /* Camket: 2-col on small mobile */
  .lssk-camket-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* About stats: 2-col */
  .lssk-about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Gallery grid: 2-col */
  .lssk-gallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer: 1-col */
  .lssk-footer-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Slide */
  .lssk-slide, .lssk-hero-static { min-height: 380px; }
  .lssk-slide-content { padding: 24px 0; }

  /* Sticky: lower */
  .lssk-sticky { right: 10px; bottom: 60px; }

  /* Logo */
  .lssk-logo img { height: 36px; width: auto; object-fit: contain; }

  /* Model */
  .lssk-model-wrap model-viewer { width: 100%; height: 280px; border-radius: var(--r-md); }

  /* Tabs scroll on mobile */
  .lssk-sp-tab-btn { padding: 10px 12px; font-size: 12px; gap: 5px; }
  .lssk-sp-tab-btn i { font-size: 11px; }

  /* SP single stacked */
  .lssk-sp-single-layout { gap: 24px; }

  /* Process: 2-col */
  .lssk-process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }

  /* About: capacity 1-col */
  .lssk-about-capacity-grid { grid-template-columns: 1fr; }

  /* About: stats 1-col */
  .lssk-about-stats-grid { grid-template-columns: 1fr; }

  /* Team: 2-col */
  .lssk-team-grid { grid-template-columns: repeat(2, 1fr); }

  /* Partners: 3-col */
  .lssk-about-partners-grid { grid-template-columns: repeat(3, 1fr); }

  /* Filter chips wrap */
  .lssk-filter-chips { gap: 5px; }

  /* SP tab panels: full padding */
  .lssk-sp-tab-panel { padding: 20px 16px; }

  /* Related posts: 1-col on very small */
  .lssk-related-posts .lssk-grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Contact quick btns */
  .lssk-contact-quick__btns { flex-direction: column; }

  /* swt tags */
  .lssk-swt { gap: 5px; }
  .lssk-swt__tag { font-size: 11px; padding: 3px 9px; }

  /* cta inner: stack */
  .lssk-cta-inner { gap: 24px; }
  .lssk-cta-actions { flex-direction: column; width: 100%; }
  .lssk-cta-actions .lssk-btn { width: 100%; justify-content: center; }

  /* About cta */
  .lssk-about-cta-final__actions { flex-direction: column; align-items: stretch; }
  .lssk-about-cta-final__actions .lssk-btn { justify-content: center; }
}

/* ── ≤ 480px tiny mobile ── */
@media (max-width: 480px) {
  .lssk-gallery-grid { grid-template-columns: 1fr; }
  .lssk-camket-grid  { grid-template-columns: 1fr; }
  .lssk-comment      { flex-direction: column; }
  .lssk-comment-list .children { padding-left: 20px; }
  .lssk-team-grid    { grid-template-columns: 1fr; }
  .lssk-about-partners-grid { grid-template-columns: repeat(2, 1fr); }
  .lssk-process-steps { grid-template-columns: 1fr; }
  .lssk-related-posts .lssk-grid-4 { grid-template-columns: 1fr; }
  .lssk-glr-thumb    { width: 54px; height: 54px; }
  .lssk-post-nav     { grid-template-columns: 1fr; }
}

/* ── Tall mobile (landscape) ── */
@media (max-height: 500px) and (orientation: landscape) {
  .lssk-hero, .lssk-slide, .lssk-hero-static { min-height: 280px; }
  .lssk-search-overlay { padding-top: 60px; }
  .lssk-search-results { max-height: 50vh; }
}

/* ── Gallery responsive ── */
@media (max-width: 768px) {
  /* Gallery: aspect-ratio adjusts on mobile */
  .lssk-glr-main { aspect-ratio: 4/3; min-height: 180px; }
}
@media (max-width: 480px) {
  .lssk-glr-main { aspect-ratio: 1/1; min-height: 0; }
}

/* ── SP single layout: tablet 769-1024 ── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Already handled by ≤1024 block above: grid-template-columns: 1fr */
}

/* ── Footer: tablet 2-col ── */
@media (min-width: 601px) and (max-width: 1100px) {
  .lssk-footer-grid { grid-template-columns: 1fr 1fr; }
  .lssk-footer-grid > :first-child { grid-column: 1 / -1; }
}

/* ── List view: card responsive ── */
@media (max-width: 768px) {
  .lssk-grid--list .lssk-card { flex-direction: column; }
  .lssk-grid--list .lssk-card__thumb {
    width: 100%; max-width: none; flex-basis: auto; flex-shrink: 0;
    aspect-ratio: 16/9; height: auto;
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
}

/* ── Admin bar compensation ── */
body.admin-bar .lssk-content-sidebar,
body.admin-bar .lssk-category-sidebar,
body.admin-bar .lssk-single-aside,
body.admin-bar .lssk-blog-sidebar {
  top: calc(var(--hdr-h) + 20px + 32px);
}
@media (max-width: 782px) {
  body.admin-bar .lssk-content-sidebar,
  body.admin-bar .lssk-category-sidebar,
  body.admin-bar .lssk-single-aside,
  body.admin-bar .lssk-blog-sidebar {
    top: calc(var(--hdr-h) + 20px + 46px);
  }
}

/* ════════════════════════════════════════════
   SP-GALLERY — Gallery sản phẩm (single-san-pham)
   Markup: template-parts/global/sp-gallery.php
   JS    : assets/js/sp-gallery.js
═══════════════════════════════════════════════ */
:root{
    --sp-surface:   var(--c-bg, #fff);
    --sp-border:    var(--c-border, #e2e8e4);
    --sp-border-dk: #c4d3ca;
    --sp-text:      var(--c-text, #2d2d2d);
    --sp-green:     var(--c-green, #018957);
    --sp-green-lt:  var(--c-light, #e8f5ee);
    --sp-r-sm:      8px;
    --sp-r-lg:      14px;
    --sp-trans:     all .2s ease;
    --sp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sp-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --sp-shadow-md: 0 4px 14px rgba(0,0,0,.12);
    --sp-shadow-lg: 0 20px 50px rgba(0,0,0,.45);
}
.sp-gallery{position:relative}
.sp-gallery__main{
    position:relative;background:var(--sp-surface);border:1px solid var(--sp-border);
    border-radius:var(--sp-r-lg);overflow:hidden;cursor:zoom-in;object-fit: cover;
}
.sp-gallery__main img{width:100%;height:auto;display:block;object-fit:contain;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.sp-gallery__main:hover img{transform:scale(1.05)}
.sp-gallery__zoom-hint{
    position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.45);color:#fff;
    font-size:11px;padding:4px 10px;border-radius:20px;pointer-events:none;
    opacity:0;transition:opacity .2s
}
.sp-gallery__main:hover .sp-gallery__zoom-hint{opacity:1}
.sp-gallery__badge{position:absolute;top:12px;left:12px;display:flex;gap:6px}
.sp-gallery__badge-item{
    background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-family:var(--sp-font-mono);
    padding:3px 9px;border-radius:20px;backdrop-filter:blur(4px)
}
.sp-gallery__thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:nowrap}
.sp-thumb{
    width:72px;height:72px;border:2px solid transparent;border-radius:var(--sp-r-sm);
    overflow:hidden;cursor:pointer;flex-shrink:0;transition:var(--sp-trans);background:var(--sp-surface)
}
.sp-thumb img{width:100%;height:100%;object-fit:cover}
.sp-thumb.active{border-color:var(--sp-green)}
.sp-thumb:hover:not(.active){border-color:var(--sp-border-dk)}
/* ── Gallery navigation arrows ── */
.sp-gallery__nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:40px;background:rgba(255,255,255,.9);border:1px solid var(--sp-border);
    color:var(--sp-text);font-size:22px;line-height:1;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:var(--sp-trans);user-select:none;z-index:5;
    opacity:0;pointer-events:none;box-shadow:var(--sp-shadow-sm)
}
.sp-gallery__main:hover .sp-gallery__nav{opacity:1;pointer-events:auto}
.sp-gallery__nav:hover{background:#fff;box-shadow:var(--sp-shadow-md);transform:translateY(-50%) scale(1.08)}
.sp-gallery__nav--prev{left:10px}
.sp-gallery__nav--next{right:10px}
.sp-gallery__nav:active{transform:translateY(-50%) scale(.96)}
/* ── Thumb strip navigation ── */
.sp-gallery__thumbs-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 4px;
}
.sp-gallery__thumbs {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 2px 0;
    scrollbar-width: none;
    align-items: center;
}
.sp-gallery__thumbs::-webkit-scrollbar { display: none }
.sp-thumb-nav {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--sp-shadow-sm);
    padding: 0;
    transition: var(--sp-trans);
}
.sp-thumb-nav:hover {
    background: var(--sp-green-lt);
    border-color: var(--sp-green);
    color: var(--sp-green);
    box-shadow: var(--sp-shadow-md);
}
.sp-thumb-nav:active { transform: scale(.92) }
/* ═════════
   LIGHTBOX
══════════ */
.sp-lightbox{display:none;position:fixed;inset:0;z-index:9999;background:rgba(10,10,10,.94);flex-direction:column;align-items:center;justify-content:center;cursor:zoom-out}
.sp-lightbox.open{display:flex}
.sp-lightbox-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);z-index:2;cursor:default}
.sp-lightbox-counter{font-size:13px;font-family:var(--sp-font-mono);color:rgba(255,255,255,.75);letter-spacing:.06em}
.sp-lightbox-close{color:#fff;font-size:28px;cursor:pointer;opacity:.7;transition:opacity .2s;line-height:1;background:none;border:none;padding:4px 8px}
.sp-lightbox-close:hover{opacity:1}
.sp-lightbox-main{position:relative;display:flex;align-items:center;justify-content:center;width:100%;flex:1;min-height:0;padding:56px 72px 0;cursor:default}
.sp-lightbox-main img{max-width:100%;max-height:calc(100vh - 180px);object-fit:contain;border-radius:var(--sp-r-sm);box-shadow:var(--sp-shadow-lg);user-select:none;transition:opacity .18s ease}
.sp-lightbox-main img.fading{opacity:0}
.sp-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:26px;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,transform .18s;user-select:none;backdrop-filter:blur(6px);z-index:3}
.sp-arrow:hover{background:rgba(255,255,255,.25)}
.sp-arrow-prev{left:16px}.sp-arrow-next{right:16px}
.sp-arrow-prev:active{transform:translateY(-50%) translateX(-2px)}.sp-arrow-next:active{transform:translateY(-50%) translateX(2px)}
.sp-lightbox-thumbstrip{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:14px 20px 18px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;cursor:default;flex-shrink:0}
.sp-lightbox-thumb:first-child{margin-left:auto}
.sp-lightbox-thumb:last-child{margin-right:auto}
.sp-lightbox-thumbstrip::-webkit-scrollbar{height:3px}
.sp-lightbox-thumbstrip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:2px}
.sp-lightbox-thumb{width:56px;height:56px;flex-shrink:0;border-radius:var(--sp-r-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.55;transition:opacity .18s,border-color .18s}
.sp-lightbox-thumb img{width:100%;height:100%;object-fit:cover}
.sp-lightbox-thumb.sp-lb-active{border-color:#fff;opacity:1}
.sp-lightbox-thumb:hover:not(.sp-lb-active){opacity:.8}
.sp-lightbox[data-total="1"] .sp-arrow,
.sp-lightbox[data-total="1"] .sp-lightbox-thumbstrip,
.sp-lightbox[data-total="1"] .sp-lightbox-counter{display:none}

/* ════════════════════════════════════════════════════════
   SINGLE SẢN PHẨM — Redesign cột thông tin (card hiện đại)
   Markup: single-san-pham.php
════════════════════════════════════════════════════════ */
.lssk-sp-single__info { display: flex; flex-direction: column; }

/* Tên sản phẩm */
.lssk-sp-single__name {
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.25;
    color: var(--c-ink);
    margin: 0 0 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
}

/* Badges taxonomy — khoảng cách gọn hơn dưới tên */
.lssk-sp-badges { margin: 0 0 20px; }

/* ── CTA box — làm tươi, đồng bộ card ── */
.lssk-sp-cta {
    background: linear-gradient(135deg, var(--c-light) 0%, #fff 100%);
    border: 1px solid #b8dfc9;
    border-radius: var(--r-lg);
    padding: 20px 22px;
    margin: 0;
}
.lssk-sp-cta__content h3 {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; color: var(--c-green); margin-bottom: 6px;
}
.lssk-sp-cta__content h3::before {
    content: "\f0eb"; /* fa-lightbulb */
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    font-size: 14px; color: var(--c-accent);
}
.lssk-sp-cta__content p { font-size: 13px; color: var(--c-muted); margin-bottom: 16px; }
.lssk-sp-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lssk-sp-cta__actions .lssk-btn { font-size: 13.5px; padding: 10px 20px; }
.lssk-sp-cta__actions .lssk-btn-primary { justify-content: center; }

/* ── Mobile: cột info dưới gallery ── */
@media (max-width: 768px) {
    .lssk-sp-single__name { font-size: 22px; padding-bottom: 12px; }
    .lssk-sp-cta__actions .lssk-btn-primary { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════
   SP MEDIA MODAL — Video / Mô hình 3D
   Markup: single-san-pham.php  |  JS: assets/js/sp-gallery.js
════════════════════════════════════════════════════════════ */
/* Badge trên gallery → nút bấm */
.sp-gallery__badge-item--btn {
    border: none; font: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    transition: background .2s, transform .2s;
}
.sp-gallery__badge-item--btn:hover { background: var(--c-green, #018957); transform: translateY(-1px); }
.sp-gallery__badge-item--btn:active { transform: translateY(0); }
.sp-gallery__badge-item--btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Overlay */
.sp-media-modal {
    display: none; position: fixed; inset: 0; z-index: 10000;
    background: rgba(10,10,10,.9);
    align-items: center; justify-content: center;
    padding: 24px; cursor: zoom-out;
}
.sp-media-modal.open { display: flex; }
/* Dialog */
.sp-media-modal__dialog {
    position: relative; background: var(--c-bg, #fff);
    border-radius: var(--r-lg, 16px);
    width: min(900px, 100%); max-height: 90vh; overflow: auto;
    cursor: default; box-shadow: 0 24px 60px rgba(0,0,0,.45);
    animation: sp-modal-in .2s ease;
}
@keyframes sp-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.sp-media-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--c-border, #e2e8e4);
    position: sticky; top: 0; background: var(--c-bg, #fff); z-index: 1;
}
.sp-media-modal__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--c-green, #018957);
}
.sp-media-modal__close {
    background: none; border: none; font-size: 26px; line-height: 1;
    color: var(--c-muted, #666); cursor: pointer; padding: 2px 8px;
    border-radius: var(--r-sm, 4px); transition: all var(--t, .2s ease);
}
.sp-media-modal__close:hover { background: var(--c-light, #e8f5ee); color: var(--c-green, #018957); }
.sp-media-modal__body { padding: 18px; }
.sp-media-modal__body > video { width: 100%; border-radius: var(--r-md, 8px); display: block; }
.sp-media-modal__body--model { padding: 0; }
.sp-media-modal__body--model model-viewer {
    width: 100%; height: min(70vh, 540px); display: block;
    background: var(--c-bg2, #f7fdf9);
}
.sp-media-modal .lssk-model-hint { padding: 0 18px 16px; margin: 0; }

@media (max-width: 600px) {
    .sp-media-modal { padding: 12px; }
    .sp-media-modal__body { padding: 12px; }
}

/* ════════════════════════════════════════════════════════════
   SP-GALLERY — Safety net: ảnh không bao giờ kẹt opacity:0
   (hệ lazy-fade toàn cục initLazyImages() đặt opacity:0 chờ sự
   kiện load — ảnh cache có thể bỏ lỡ load và biến mất).
   KHÔNG áp cho #sp-lightbox-img để giữ hiệu ứng crossfade.
════════════════════════════════════════════════════════════ */
.sp-gallery__main img,
.sp-gallery .sp-thumb img { opacity: 1 !important; }

/* ════════════════════════════════════════════════════════════
   SINGLE SẢN PHẨM — Bố cục mới (breadcrumb + buy-box dính)
   Markup: single-san-pham.php  |  section.lssk-sp-single
════════════════════════════════════════════════════════════ */
/* Breadcrumb trên nền trắng (override bản cho banner tối) */
.lssk-sp-single .lssk-breadcrumb { margin: 0 0 18px; color: var(--c-muted); }
.lssk-sp-single .lssk-breadcrumb li { color: var(--c-muted); }
.lssk-sp-single .lssk-breadcrumb a { color: var(--c-muted); }
.lssk-sp-single .lssk-breadcrumb a:hover { color: var(--c-green); }
.lssk-sp-single .lssk-breadcrumb li + li::before { color: var(--c-border); }
.lssk-sp-single .lssk-breadcrumb li:last-child span,
.lssk-sp-single .lssk-breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: 500; }

/* Cột info: bỏ overflow:hidden (phá sticky) + cao bằng hàng để buy-box có chỗ dính */
.lssk-sp-single .lssk-sp-single__info {
    display: block;
    overflow: visible;
    align-self: stretch;
}
/* Buy-box dính khi cuộn (trừ dưới mốc 1 cột) */
.lssk-sp-buybox {
    position: sticky;
    top: calc(var(--hdr-h, 90px) + 16px);
}
@media (max-width: 768px) {
    .lssk-sp-buybox { position: static; top: auto; }
}

/* Chip trạng thái + SKU cạnh tên */
.lssk-sp-meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lssk-sp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 500; color: var(--c-muted);
    background: var(--c-bg2); border: 1px solid var(--c-border);
    padding: 5px 12px; border-radius: var(--r-full);
}
.lssk-sp-chip i { font-size: 12px; color: var(--c-muted); }
.lssk-sp-chip--ok { color: var(--c-green); background: var(--c-light); border-color: #c1e0cf; }
.lssk-sp-chip--ok i { color: var(--c-green); }

/* Custom css */
/* Overlay */
#menu-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#menu-overlay.active {
    display: block;
    opacity: 1;
}

body.no-scroll { overflow: hidden; }

/* --- Mobile menu --- */
@media (max-width: 991px) {
    #my-menu {
        display: none;
        position: fixed;
        top: 0; right: -100%;
        width: 80%;
        height: 100%;
        background: #fff;
        z-index: 999;
        padding-top: 80px;
        overflow-y: auto;
        box-shadow: -2px 0 15px rgba(0,0,0,0.3);
        transition: right 0.4s ease;
    }

    #my-menu.mobile-open {
        display: block;
        right: 0;
        animation: slideInRight 0.4s forwards ease;
    }

    @keyframes slideInRight {
        from { right: -100%; opacity: 0; }
        to { right: 0; opacity: 1; }
    }

    #my-menu ul { list-style: none; margin: 0; padding: 0; }
    #my-menu ul li { border-bottom: 1px solid #eee; position: relative; }
    #my-menu ul li a {
        display: block;
        padding: 15px 25px;
        color: #333;
        font-weight: 500;
    }

    /* --- Hamburger icon --- */
    .mobile-menu-toggle {
        width: 30px;
        height: 22px;
        position: relative;
        cursor: pointer;
        z-index: 1001;
        transition: all 0.3s ease;
    }
    .mobile-menu-toggle .bar {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #333;
        border-radius: 3px;
        transition: all 0.4s ease;
    }
    .mobile-menu-toggle .bar:nth-child(1) { top: 0; }
    .mobile-menu-toggle .bar:nth-child(2) { top: 9px; }
    .mobile-menu-toggle .bar:nth-child(3) { top: 18px; }

    .mobile-menu-toggle.active .bar:nth-child(1) {
        transform: rotate(45deg);
        top: 9px;
    }
    .mobile-menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.active .bar:nth-child(3) {
        transform: rotate(-45deg);
        top: 9px;
    }

    /* --- Submenu --- */
    #my-menu .menu-item-has-children > a {
        padding-right: 40px;
    }

    .submenu-toggle {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 14px;
        color: #333;
        transition: transform 0.3s ease;
    }

    #my-menu .submenu-open > .submenu-toggle i {
        transform: rotate(180deg);
    }

    #my-menu .menu-item-has-children ul.sub-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        background: #f9f9f9;
    }
    #my-menu .submenu-open > ul.sub-menu {
        max-height: 600px; /* đủ để hiển thị các mục con */
    }
    #my-menu .menu-item-has-children ul.sub-menu li a {
        padding-left: 40px;
        font-size: 15px;
    }
}

/* ── Featured image (thay gallery trên trang chi tiết CPT) ── */
.lssk-sp-featured-img {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}
.lssk-sp-featured-img__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* Dự án & Thiết kế: thêm margin bên dưới trước phần specs/tabs */
.lssk-da-featured-img,
.lssk-tk-featured-img {
    margin-bottom: 2rem;
}

/* ══════════════════════════════════════════
   CPT SINGLE — PROFESSIONAL LAYOUT UPGRADES
   Áp dụng cho: san-pham, du-an, thiet-ke
══════════════════════════════════════════ */

/* ── 1. Sản phẩm: image column ── */
.lssk-sp-single-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  gap: 48px !important;
  align-items: start !important;
}
.lssk-sp-single__gallery {
  position: sticky;
  top: calc(var(--hdr-h) + 24px);
}
.lssk-sp-single__gallery .lssk-sp-featured-img {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  overflow: hidden;
  background: var(--c-bg2);
}
.lssk-sp-single__gallery .lssk-sp-featured-img__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.lssk-sp-single__gallery .lssk-sp-featured-img:hover .lssk-sp-featured-img__img {
  transform: scale(1.04);
}

/* ── 2. Sản phẩm: info panel ── */
.lssk-sp-single__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lssk-sp-single__name {
  font-size: clamp(20px, 2.8vw, 28px) !important;
  line-height: 1.25 !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid var(--c-border) !important;
  position: relative !important;
}
.lssk-sp-single__name::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 56px; height: 2px;
  background: var(--c-green);
  border-radius: 2px;
}

/* ── 3. Sản phẩm: badges pill box ── */
.lssk-sp-badges {
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  gap: 8px;
}

/* ── 4. Sản phẩm: CTA nâng cấp ── */
.lssk-sp-cta {
  border-top: 3px solid var(--c-green) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  padding: 22px 24px !important;
}
.lssk-sp-cta__content h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
}
.lssk-sp-cta__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── 5. Dự án: hero image ── */
.lssk-da-featured-img {
  aspect-ratio: 4 / 3; /* 16 / 9; */
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  overflow: hidden;
  margin-bottom: 28px !important;
  background: var(--c-bg2);
}
.lssk-da-featured-img .lssk-sp-featured-img__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.lssk-da-featured-img:hover .lssk-sp-featured-img__img {
  transform: scale(1.03);
}

/* ── 6. Thiết kế: hero image ── */
.lssk-tk-featured-img {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-md);
  overflow: hidden;
  margin-bottom: 28px !important;
  background: var(--c-bg2);
}
.lssk-tk-featured-img .lssk-sp-featured-img__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.lssk-tk-featured-img:hover .lssk-sp-featured-img__img {
  transform: scale(1.03);
}

/* ── 7. Single badges (du-an, thiet-ke) ── */
.lssk-single-main .lssk-single-badges {
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* ── 8. Project info title ── */
.lssk-project-info__title {
  background: linear-gradient(to right, var(--c-bg2), #fff) !important;
  border-bottom: 2px solid var(--c-green) !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
  letter-spacing: 0.2px;
}

/* ── 9. Thiết kế specs card ── */
.lssk-tk-specs {
  margin: 0 0 24px !important;
  box-shadow: var(--sh-sm);
}
.lssk-tk-specs .lssk-project-info__title {
  font-size: 15px !important;
}

/* ── 10. Tabs: nav upgrade ── */
.lssk-sp-tab-nav {
  background: linear-gradient(to bottom, #fff 60%, var(--c-bg2)) !important;
  padding: 0 4px !important;
}
.lssk-sp-tab-btn {
  padding: 13px 20px !important;
  font-size: 13.5px !important;
}

/* ── 11. Single CTA (thiet-ke) ── */
.lssk-single-cta {
  border-top: 3px solid var(--c-green) !important;
  box-shadow: var(--sh-sm) !important;
  border-radius: var(--r-lg) !important;
}

/* ── 12. Related CPT title ── */
.lssk-related-cpt__title {
  padding-bottom: 14px !important;
  border-bottom: 2px solid var(--c-border) !important;
  position: relative !important;
  margin-bottom: 28px !important;
}
.lssk-related-cpt__title::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 48px; height: 2px;
  background: var(--c-green);
  border-radius: 2px;
}

/* ── 13. Post nav: upgrade ── */
.lssk-post-nav__prev,
.lssk-post-nav__next {
  box-shadow: var(--sh-sm);
  transition: all var(--t) !important;
}
.lssk-post-nav__prev:hover,
.lssk-post-nav__next:hover {
  box-shadow: var(--sh-md) !important;
  transform: translateY(-2px);
}

/* ── Responsive overrides ── */
@media (max-width: 768px) {
  .lssk-sp-single-layout {
    grid-template-columns: 1fr !important;
  }
  .lssk-sp-single__gallery {
    position: static !important;
  }
  .lssk-sp-single__gallery .lssk-sp-featured-img {
    aspect-ratio: 4 / 3;
  }
  .lssk-da-featured-img {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
  }
  .lssk-tk-featured-img {
    aspect-ratio: 1 / 1;
    border-radius: var(--r-md);
  }
}

/* ── Biến thể sản phẩm (single-san-pham.php) ── */
.lssk-sp-variants { margin: 0 0 16px; }
.lssk-sp-variants__label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--c-text); margin-bottom: 6px;
}
.lssk-sp-variants__list { display: flex; flex-wrap: wrap; gap: 8px; }
.lssk-sp-variant {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 6px; background: #fff;
  border: 1.5px solid var(--c-border); border-radius: var(--r-full);
  cursor: pointer; font-size: 13px; color: var(--c-text);
  transition: all var(--t);
}
.lssk-sp-variant img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; display: block; flex-shrink: 0;
}
.lssk-sp-variant:hover { border-color: var(--c-green); }
.lssk-sp-variant.is-active {
  border-color: var(--c-green); background: var(--c-light);
  color: var(--c-green); font-weight: 600;
}
.lssk-sp-variant__dots { display: inline-flex; align-items: center; margin-right: 4px; }
.lssk-sp-variant__dot {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--c-border); display: block; flex-shrink: 0; box-shadow: 0 0 0 1px #fff inset;
}
.lssk-sp-variant__dot--vl { border-radius: 6px; margin-left: -8px; }
.lssk-sp-variants__current {
  margin-top: 8px; font-size: 12.5px; color: var(--c-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.lssk-sp-variants__current:empty { display: none; }
.lssk-sp-variants__swatch-item { display: inline-flex; align-items: center; gap: 6px; }
.lssk-sp-variants__swatch-img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--c-border); display: block; flex-shrink: 0; box-shadow: 0 0 0 1px #fff inset;
}

/* ── Mô tả danh mục sản phẩm (in trên lưới sản phẩm) ── */
.lssk-term-desc {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--c-border);
}
.lssk-term-desc img { max-width: 100%; height: auto; }
.lssk-term-desc h2, .lssk-term-desc h3 { margin-top: 28px; }
.lssk-term-desc table { width: 100%; border-collapse: collapse; }
.lssk-term-desc table th, .lssk-term-desc table td { padding: 8px 12px; border: 1px solid var(--c-border); }