/*!
 * main.css — Lyson Sa Ky Lab theme
 * CSS thuần, không framework ngoài (không Bootstrap/Flatsome UX).
 * Màu thương hiệu: xanh lá #91C03E + đen — theo đúng yêu cầu khách hàng.
 */

/* ── Font "Be Vietnam Pro" — tự lưu trữ (self-hosted), không gọi Google
      Fonts CDN. File lấy từ gói @fontsource/be-vietnam-pro (chính chủ, cùng
      nguồn Google Fonts), đặt tại assets/fonts/be-vietnam-pro/. Trước đây
      biến --lyson-font đã khai "Be Vietnam Pro" nhưng theme CHƯA từng nạp
      font này bằng @font-face, nên trình duyệt tự thay bằng font hệ thống
      (Segoe UI/Roboto/Arial) — nhìn nặng/to hơn thiết kế gốc. 5 độ đậm
      (400/500/600/700/800) × 3 bộ ký tự (vietnamese/latin-ext/latin, mỗi bộ
      khai unicode-range riêng) — trình duyệt chỉ tải đúng file cần cho chữ
      thực tế hiển thị, không tải thừa. ── */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-400-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-500-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-600-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-700-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-800-normal.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/be-vietnam-pro/be-vietnam-pro-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
	--lyson-primary:#91c03e;
	--lyson-primary-dark:#749a32;
	--lyson-accent:#91c03e;
	--lyson-ink:#000000;
	--lyson-footer-bg:#000000;
	--lyson-muted:#6b7280;
	--lyson-border:#e5e7eb;
	--lyson-bg:#ffffff;
	--lyson-bg-alt:#f7f8f7;
	--lyson-radius:8px;
	--lyson-container:1240px;
	--lyson-font:"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;
	/* Font riêng cho tiêu đề (h1-h6) — mặc định TRÙNG --lyson-font ở trên nên
	   giao diện không đổi gì cho tới khi Super Admin chọn font khác ở tab
	   "🎨 Bảng màu theme" → nhóm "🔤 Typography" (xem lyson_enqueue_typography()
	   trong inc/site-settings.php, ghi đè biến này bằng wp_add_inline_style). */
	--lyson-font-heading:"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	font-family:var(--lyson-font);
	color:var(--lyson-ink);
	background:var(--lyson-bg);
	line-height:1.6;
	font-size:16px;
}
h1,h2,h3,h4,h5,h6{font-family:var(--lyson-font-heading)}
img{max-width:100%;height:auto;display:block}
a{color:var(--lyson-primary-dark);text-decoration:none}
a:hover{color:var(--lyson-primary-dark)}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.lyson-skip-link{position:absolute;left:-9999px;top:0;background:var(--lyson-primary-dark);color:#fff;padding:10px 16px;z-index:10000}
.lyson-skip-link:focus{left:8px;top:8px}

.lyson-container{max-width:var(--lyson-container);margin:0 auto;padding:0 20px}

/* ── Buttons ── */
.lyson-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 22px;border-radius:6px;font-weight:600;font-size:.9rem;border:2px solid transparent;cursor:pointer;transition:.2s}
.lyson-btn--primary{background:var(--lyson-primary);color:#000}
.lyson-btn--primary:hover{background:var(--lyson-primary-dark);color:#fff}
.lyson-btn--outline{border-color:var(--lyson-primary);color:var(--lyson-ink);background:transparent}
.lyson-btn--outline:hover{background:var(--lyson-primary-dark);border-color:var(--lyson-primary-dark);color:#fff}

/* ── Header ── */
.lyson-header{position:sticky;top:0;z-index:1000;background:var(--lyson-primary);border-bottom:1px solid var(--lyson-primary-dark)}
.lyson-header__inner{display:flex;align-items:center;gap:20px;padding:8px 20px;flex-wrap:wrap}
.lyson-site-logo-link{display:inline-flex;align-items:center}
.lyson-site-logo{height:56px;width:auto;max-width:220px;display:block}
.custom-logo-link img{height:56px;width:auto;max-width:220px}
.lyson-primary-nav{}
.lyson-menu{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lyson-menu > li{position:relative}
.lyson-menu-link{display:block;padding:10px 14px;font-weight:600;color:var(--lyson-ink);border-radius:6px}
.lyson-menu-link:hover{background:var(--lyson-bg-alt);color:var(--lyson-primary-dark)}
.lyson-sub-menu{position:absolute;top:100%;left:0;background:#fff;min-width:220px;box-shadow:0 10px 30px rgba(0,0,0,.12);border-radius:8px;padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s}
.lyson-has-dropdown:hover > .lyson-sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* Chữ dropdown 1 cột — giảm nhẹ so với chữ menu cấp 1 (16px/600) cho gọn,
   đồng cỡ với .lyson-mega-menu__sublist bên dưới để đồng bộ toàn site. */
.lyson-sub-menu .lyson-menu-link{font-weight:500;font-size:.87rem}

/*
 * ── Mega Menu — menu con dạng lưới nhiều cột (bật theo từng mục cấp 1 ở
 * Giao diện → Menu, xem inc/mega-menu.php + inc/walker-nav.php). Thay thế
 * .lyson-sub-menu (1 cột) bằng .lyson-mega-menu khi mục đó bật Mega Menu —
 * 2 kiểu dropdown cùng tồn tại song song tuỳ mục menu.
 */
.lyson-mega-menu{position:absolute;top:100%;left:50%;display:flex;align-items:flex-start;gap:28px;width:min(880px,92vw);padding:26px 28px;background:#fff;box-shadow:0 20px 45px rgba(0,0,0,.14);border-radius:12px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px);transition:.15s;z-index:1002;overflow:hidden}
.lyson-mega-menu::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--lyson-primary),var(--lyson-primary-dark))}
.lyson-has-mega:hover > .lyson-mega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.lyson-mega-menu__list{list-style:none;margin:0;padding:0;flex:1;display:grid;grid-template-columns:repeat(var(--lyson-mega-cols,4),1fr);gap:2px 20px;align-content:start}
.lyson-mega-menu__list li{margin:0}
.lyson-mega-menu__list .lyson-menu-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;font-weight:500;font-size:.87rem;white-space:normal;line-height:1.4;transition:background .15s,color .15s}
.lyson-mega-menu__list .lyson-menu-link::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lyson-border);flex:none;transition:.15s}
.lyson-mega-menu__list .lyson-menu-link:hover{background:#f3f8ea;color:var(--lyson-primary-dark)}
.lyson-mega-menu__list .lyson-menu-link:hover::before{background:var(--lyson-primary);transform:scale(1.3)}
.lyson-mega-menu__list .lyson-menu-link.has-icon::before{display:none}
.lyson-mega-menu__item-icon{width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--lyson-primary-dark)}
.lyson-mega-menu__item-icon img,.lyson-mega-menu__item-icon svg{width:100%;height:100%;object-fit:contain;display:block}
/* Mục cấp 2 (con trực tiếp mục cấp 1 Mega Menu) CÒN có menu con riêng →
   đóng vai TIÊU ĐỀ 1 CỘT (chữ đậm, có gạch chân dưới, không chấm bi) thay
   vì 1 mục phẳng như trước — xem inc/walker-nav.php (.lyson-mega-menu__col-heading)
   + .lyson-mega-menu__sublist (danh sách gạch đầu dòng ngay bên dưới, LUÔN
   hiện sẵn trong cùng ô lưới — khác .lyson-sub-menu vốn là dropdown nổi lên
   khi hover). */
.lyson-mega-menu__list > li.lyson-mega-menu__col-heading > .lyson-menu-link{
	font-weight:700;
	font-size:.96rem;
	color:var(--lyson-primary-dark);
	padding:6px 10px 12px;
	margin-bottom:6px;
	border-bottom:1px solid var(--lyson-border);
	border-radius:0;
}
.lyson-mega-menu__list > li.lyson-mega-menu__col-heading > .lyson-menu-link::before{display:none}
.lyson-mega-menu__list > li.lyson-mega-menu__col-heading > .lyson-menu-link:hover{background:none;color:var(--lyson-primary)}
.lyson-mega-menu__sublist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.lyson-mega-menu__sublist .lyson-menu-link{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:7px;font-weight:500;font-size:.87rem;white-space:normal;line-height:1.4;transition:background .15s,color .15s}
.lyson-mega-menu__sublist .lyson-menu-link::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lyson-primary);flex:none;transition:.15s}
.lyson-mega-menu__sublist .lyson-menu-link:hover{background:#f3f8ea;color:var(--lyson-primary-dark)}
.lyson-mega-menu__sublist .lyson-menu-link:hover::before{background:var(--lyson-primary-dark);transform:scale(1.3)}
.lyson-mega-menu__sublist .lyson-menu-link.has-icon::before{display:none}
.lyson-mega-menu__cta{flex:none;width:200px;display:flex;flex-direction:column;gap:10px;padding-left:24px;border-left:1px solid var(--lyson-border)}
.lyson-mega-menu__cta-link{font-weight:700;font-size:.88rem;color:var(--lyson-primary-dark);text-decoration:none}
.lyson-mega-menu__cta-link:hover{color:var(--lyson-primary)}
.lyson-mega-menu__cta-img{width:100%;height:auto;border-radius:var(--lyson-radius);display:block;object-fit:cover;aspect-ratio:4/3;background:#eef0ea}
.lyson-mega-menu__cta-title{margin:0;font-weight:700;font-size:.92rem;color:var(--lyson-ink);line-height:1.4}
.lyson-mega-menu__cta-btn{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--lyson-primary-dark);color:#fff;font-weight:700;font-size:.85rem;padding:11px 16px;border-radius:6px;text-decoration:none;transition:background .15s}
.lyson-mega-menu__cta-btn svg{width:17px;height:17px;flex:none}
.lyson-mega-menu__cta-btn:hover{background:var(--lyson-primary)}
@media (max-width:1140px){.lyson-mega-menu{width:94vw}}
@media (max-width:900px){.lyson-mega-menu{flex-direction:column}.lyson-mega-menu__cta{width:100%;padding-left:0;padding-top:16px;border-left:none;border-top:1px solid var(--lyson-border);flex-direction:row;align-items:center}.lyson-mega-menu__cta-img{width:80px;flex:none;aspect-ratio:1}}
.lyson-menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.lyson-menu-toggle span{width:24px;height:2px;background:var(--lyson-ink)}

/* ── Topbar: logo + ô tìm kiếm (live search) + gọi tư vấn + yêu cầu báo giá ──
      Tách riêng 1 dải mỏng phía trên menu chính — menu có 8 mục + submenu
      nên không đủ chỗ để nhét chung 1 hàng với logo trên màn hình laptop.
      Trên di động, dải này CŨNG là header (logo + gọi nhanh + nút mở menu). ── */
.lyson-topbar{position:relative;z-index:1001;background:var(--lyson-bg-alt);border-bottom:1px solid var(--lyson-border)}
.lyson-topbar__inner{display:flex;align-items:center;gap:16px;padding:10px 20px}

/*
 * Logo (trái) và khối nút bên phải (.lyson-topbar__actions) dùng CHUNG
 * flex-basis 0 + flex-grow 1 bằng nhau → 2 bên luôn rộng bằng nhau, nhờ đó
 * ô tìm kiếm ở giữa (flex:0 1 440px, không grow) luôn nằm ĐÚNG GIỮA topbar
 * bất kể logo hay 2 nút bên phải rộng bao nhiêu — trước đây chỉ có
 * margin-right:auto ở logo nên ô tìm kiếm chỉ lấp khoảng trống còn lại,
 * bị lệch tâm khi 2 bên không cân xứng.
 */
.lyson-topbar__logo{display:flex;align-items:center;flex:1 1 0;min-width:0}
.lyson-topbar__logo .lyson-site-logo-link,
.lyson-topbar__logo .custom-logo-link{display:inline-flex;align-items:center}
.lyson-topbar__logo .lyson-site-logo,
.lyson-topbar__logo .custom-logo-link img{height:52px;width:auto;max-width:230px;display:block}

.lyson-topbar__actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex:1 1 0;min-width:0}

/* Ô tìm kiếm dạng pill, có live search (gợi ý kết quả khi gõ) */
.lyson-live-search{position:relative;flex:0 1 440px;max-width:440px}
.lyson-live-search__form{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--lyson-border);border-radius:999px;padding:9px 16px}
.lyson-live-search__form svg{width:17px;height:17px;color:var(--lyson-muted);flex:0 0 auto}
.lyson-live-search__field{flex:1;min-width:0;border:none;background:none;outline:none;font-size:.86rem;color:var(--lyson-ink);-webkit-appearance:none;appearance:none}
/* Safari tự vẽ icon kính lúp + nút "x" xoá riêng cho input[type=search] nếu
   không tắt -webkit-appearance, đè lên/đẩy lệch icon và chữ tự vẽ ở trên. */
.lyson-live-search__field::-webkit-search-decoration,
.lyson-live-search__field::-webkit-search-cancel-button,
.lyson-live-search__field::-webkit-search-results-button,
.lyson-live-search__field::-webkit-search-results-decoration{-webkit-appearance:none;display:none}
.lyson-live-search__field::placeholder{color:var(--lyson-muted)}
.lyson-live-search__results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);box-shadow:0 12px 30px rgba(0,0,0,.14);max-height:420px;overflow-y:auto;z-index:30}
.lyson-live-search__results[hidden]{display:none}
.lyson-live-search__item{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--lyson-ink);border-bottom:1px solid var(--lyson-border)}
.lyson-live-search__item:last-child{border-bottom:none}
.lyson-live-search__item:hover,.lyson-live-search__item:focus{background:var(--lyson-bg-alt)}
.lyson-live-search__thumb{flex:0 0 auto;width:40px;height:40px;border-radius:6px;overflow:hidden;background:var(--lyson-bg-alt)}
.lyson-live-search__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lyson-live-search__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lyson-live-search__title{font-size:.86rem;font-weight:600;color:var(--lyson-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lyson-live-search__type{font-size:.72rem;color:var(--lyson-muted)}
.lyson-live-search__viewall{display:block;text-align:center;padding:11px 14px;font-weight:700;color:var(--lyson-primary-dark);font-size:.84rem}
.lyson-live-search__viewall:hover{background:var(--lyson-bg-alt)}
.lyson-live-search__empty,.lyson-live-search__loading{padding:16px;text-align:center;color:var(--lyson-muted);font-size:.84rem}

.lyson-header__contact{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;background:#fff;border:1px solid var(--lyson-border)}
.lyson-header__contact:hover{border-color:var(--lyson-primary)}
.lyson-header__contact-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--lyson-primary);color:#fff;flex:0 0 auto}
.lyson-header__contact-icon svg{width:15px;height:15px}
.lyson-header__contact-text{display:flex;flex-direction:column;line-height:1.25}
.lyson-header__contact-label{font-size:.72rem;color:var(--lyson-muted)}
.lyson-header__contact-number{font-weight:700;color:var(--lyson-ink);font-size:.92rem}

.lyson-header__cta{white-space:nowrap;padding:9px 18px}
.lyson-header__cta svg{width:15px;height:15px}

/* Trên màn hình desktop rộng (≥1300px), CHỈ tăng kích thước logo cho dễ
   nhìn — thanh topbar/menu vẫn giữ max-width 1240px giống hệt nội dung
   trang (.lyson-container) để 2 mép luôn thẳng hàng với content bên dưới,
   không bị "lệch"/rộng hơn content. */
@media (min-width:1300px){
	.lyson-topbar__logo .lyson-site-logo,
	.lyson-topbar__logo .custom-logo-link img{height:64px;max-width:260px}
}

/* Hàng tìm kiếm riêng, chỉ hiện trên di động, nằm ngay dưới .lyson-topbar
   (topbar trên di động chỉ còn logo + nút mở menu nên không đủ chỗ cho ô tìm kiếm) */
.lyson-topbar-search-mobile{display:none;background:var(--lyson-bg-alt);border-bottom:1px solid var(--lyson-border);padding:10px 20px}

@media (max-width:860px){
	.lyson-live-search{display:none}
	.lyson-header__contact{display:none}
	.lyson-header__cta{display:none}
	.lyson-menu-toggle{display:flex}
	.lyson-header{display:none}
	.lyson-topbar-search-mobile{display:block}
	.lyson-topbar-search-mobile .lyson-live-search{display:block;flex:none;max-width:none}
}

/* ── Menu mobile off-canvas (slide-out), khớp giao diện tham khảo:
      logo + ô tìm kiếm ở đầu, danh sách menu dọc có icon + gạch phân cách ── */
/*
 * visibility:hidden vốn ẩn phần tử NGAY LẬP TỨC (không có hiệu ứng chuyển
 * động nào, kể cả khi các thuộc tính khác như opacity/transform đang có
 * transition) — nên khi đóng panel trước đây bị "biến mất" đột ngột thay vì
 * trượt/mờ dần mượt mà như lúc mở. Khai báo transition-delay cho visibility
 * bằng đúng thời lượng hiệu ứng đóng (.28s, khớp .lyson-mobile-panel__drawer)
 * để trì hoãn việc ẩn hẳn cho tới khi hiệu ứng trượt/mờ chạy xong; lúc MỞ thì
 * ghi đè delay về 0 để hiện ra ngay, không chờ.
 */
.lyson-mobile-panel{position:fixed;inset:0;z-index:1200;visibility:hidden;pointer-events:none;transition:visibility 0s linear .28s}
.lyson-mobile-panel.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.lyson-mobile-panel__overlay{position:absolute;inset:0;background:rgba(10,15,10,.55);opacity:0;transition:opacity .25s ease}
.lyson-mobile-panel.is-open .lyson-mobile-panel__overlay{opacity:1}
.lyson-mobile-panel__drawer{
	position:absolute;top:0;right:0;bottom:0;
	width:min(86vw,360px);
	background:#fff;
	display:flex;flex-direction:column;
	transform:translateX(100%);
	transition:transform .28s ease;
	box-shadow:-10px 0 30px rgba(0,0,0,.18);
}
.lyson-mobile-panel.is-open .lyson-mobile-panel__drawer{transform:translateX(0)}
.lyson-mobile-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--lyson-border)}
.lyson-mobile-panel__logo{display:inline-flex}
.lyson-mobile-panel__logo img{height:44px;width:auto;max-width:150px;display:block}
.lyson-mobile-panel__close{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:6px;margin:-6px;cursor:pointer;color:var(--lyson-ink);border-radius:6px}
.lyson-mobile-panel__close:hover{background:var(--lyson-bg-alt)}
.lyson-mobile-panel__close svg{width:22px;height:22px}
.lyson-mobile-panel__search{padding:14px 16px;border-bottom:1px solid var(--lyson-border)}
.lyson-mobile-panel__search .lyson-live-search{width:100%;max-width:none;flex:none}
.lyson-mobile-panel__search .lyson-live-search__form{background:var(--lyson-bg-alt)}
/*
 * Bỏ -webkit-overflow-scrolling:touch — thuộc tính thừa từ iOS cũ (iOS 13+
 * đã cuộn mượt mặc định), không còn cần thiết.
 */
.lyson-mobile-panel__nav{flex:1;overflow-y:auto}

.lyson-mobile-menu{display:flex;flex-direction:column;align-items:stretch;gap:0}
.lyson-mobile-menu .lyson-menu-link{width:100%}
.lyson-mobile-menu > li{border-bottom:1px solid var(--lyson-border)}
.lyson-mobile-menu .lyson-menu-link{display:flex;align-items:center;gap:12px;padding:14px 16px;font-weight:600;font-size:.96rem;color:var(--lyson-ink);border-radius:0}
.lyson-mobile-menu .lyson-menu-link:hover{background:var(--lyson-bg-alt);color:var(--lyson-ink)}
.lyson-mobile-menu__icon{flex:0 0 auto;display:inline-flex;color:var(--lyson-primary-dark)}
.lyson-mobile-menu__icon svg{width:20px;height:20px}
.lyson-mobile-menu .lyson-menu-link__label{flex:1}
.lyson-mobile-menu__chevron{flex:0 0 auto;display:inline-flex;color:var(--lyson-muted);transition:transform .2s ease}
.lyson-mobile-menu__chevron svg{width:16px;height:16px}
.lyson-mobile-menu .lyson-has-dropdown.is-open > .lyson-menu-link .lyson-mobile-menu__chevron{transform:rotate(180deg)}
/*
 * .lyson-sub-menu vốn là dropdown DESKTOP (position:absolute; opacity/
 * visibility điều khiển bằng :hover — xem phía trên). Ở menu di động, mục
 * con phải nằm THEO DÒNG BÌNH THƯỜNG để đẩy các mục cấp 1 phía sau xuống
 * khi mở — nên phải ghi đè huỷ HẾT các thuộc tính định vị/hiệu ứng đó
 * (không chỉ display), nếu không mục con sẽ vẫn "nổi" absolute đè lên các
 * mục phía sau thay vì đẩy chúng xuống (đã xảy ra thật khi test).
 */
.lyson-mobile-menu .lyson-sub-menu{
	display:none;
	position:static;
	flex-direction:column;
	background:var(--lyson-bg-alt);
	opacity:1;
	visibility:visible;
	transform:none;
	transition:none;
	box-shadow:none;
	border-radius:0;
	padding:0;
	margin:0;
	min-width:0;
	width:100%;
}
.lyson-mobile-menu .lyson-has-dropdown.is-open > .lyson-sub-menu{display:flex}
.lyson-mobile-menu .lyson-sub-menu li{border-top:1px solid var(--lyson-border)}
.lyson-mobile-menu .lyson-sub-menu .lyson-menu-link{padding:12px 16px 12px 48px;font-weight:500;font-size:.9rem}

body.lyson-mobile-panel-open{overflow:hidden}

@media (min-width:861px){.lyson-mobile-panel{display:none}}

/* ── Page / typography ── */
.lyson-page{padding:32px 20px 64px}
.lyson-page-title{font-size:2rem;margin:8px 0 24px;font-weight:800}
/* Trang chính sách (page-templates/policy.php) — dòng "Cập nhật lần cuối" cuối trang. */
.lyson-policy-page__updated{margin-top:8px;font-size:.85rem;color:var(--lyson-muted)}
.lyson-section-title{font-size:1.4rem;font-weight:700;margin:40px 0 18px;display:flex;align-items:center;gap:10px}
.lyson-section-title--center{justify-content:center;text-align:center;font-size:1.7rem}
.lyson-section-title--accent{position:relative;padding-left:16px}
.lyson-section-title--accent::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:2px;background:var(--lyson-primary)}
.lyson-section-title--accent svg{flex:none;width:24px;height:24px;color:var(--lyson-primary)}
/* Vạch ngăn phía trên các khối "…liên quan" cuối trang (related-posts.php —
   Blog, related-dp.php — Dự án/Thiết kế, related-products.php — Sản phẩm
   liên quan/Thiết bị liên quan ở CẢ 4 loại trang) để tách hẳn khỏi nội dung
   phía trên, giúp section nổi bật hơn thay vì liền mạch. */
.lyson-related-hr{border:0;border-top:1px solid var(--lyson-border);margin:40px 0 0}
.lyson-related-hr + .lyson-section-title{margin-top:32px}

/*
 * ── Khối nội dung trang, dùng ở trang Giới thiệu (page-gioi-thieu.php): mỗi
 * khối 1 chủ đề (giá trị cốt lõi, quy trình, năng lực...) tách bạch bằng
 * khoảng cách, đỡ bị dính sát nhau. Reset margin trên/dưới của phần tử
 * ĐẦU/CUỐI bên trong khối để không cộng dồn 2 lớp margin.
 */
.lyson-page-block{margin:0 0 40px}
.lyson-page-block>*:first-child{margin-top:0}
.lyson-page-block>*:last-child{margin-bottom:0}

/*
 * ── Dải nền TRÀN VIỀN MÀN HÌNH (không phải khung/thẻ bo góc — theo yêu cầu
 * "background nên để full, đang để khung nên thấy gò bó") dùng cho các khối
 * cần màu nền phân tách rõ trên trang Giới thiệu. Kỹ thuật "full-bleed" bằng
 * width:100vw + left:50% + translateX(-50%) — cho phép nền tràn hết chiều
 * rộng màn hình dù phần tử vẫn nằm lồng bên trong .lyson-container (không
 * cần tách rời thẻ <article> bao ngoài như cách trang chủ làm, giữ nguyên
 * cấu trúc ngữ nghĩa 1 <article> duy nhất của trang). Nội dung bên trong vẫn
 * đặt lại trong 1 .lyson-container con để giữ đúng chiều rộng, canh giữa.
 */
.lyson-page-band{width:100vw;position:relative;left:50%;transform:translateX(-50%);background:var(--lyson-bg-alt);padding:44px 0;margin:0 0 40px}
.lyson-page-band .lyson-container>*:first-child{margin-top:0}
.lyson-page-band .lyson-container>*:last-child{margin-bottom:0}
@media (max-width:640px){.lyson-page-band{padding:32px 0}}

/* ── Breadcrumb ── */
.lyson-breadcrumb{margin:0 0 18px}
.lyson-breadcrumb__list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;font-size:.84rem;line-height:1.4}
.lyson-breadcrumb__item{display:flex;align-items:center;min-width:0}
.lyson-breadcrumb__sep{display:flex;align-items:center;color:var(--lyson-border);margin:0 4px;flex:none}
.lyson-breadcrumb__sep svg{width:14px;height:14px;stroke-width:2}
.lyson-breadcrumb__link{display:inline-flex;align-items:center;gap:5px;color:var(--lyson-muted);font-weight:500;transition:color .15s}
.lyson-breadcrumb__link:hover{color:var(--lyson-primary-dark)}
.lyson-breadcrumb__link--home svg{width:15px;height:15px;stroke-width:2}
.lyson-breadcrumb__home-text{display:none}
.lyson-breadcrumb__label{color:var(--lyson-muted)}
.lyson-breadcrumb__current{color:var(--lyson-ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}

@media (min-width:600px){
	.lyson-breadcrumb__home-text{display:inline}
}
@media (max-width:600px){
	.lyson-breadcrumb__current{max-width:44vw}
}

/* ── Cards / grid ── */
.lyson-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin:16px 0}

/* Lưới bài viết Blog: cố định 4 cột (cột chính có sidebar bên cạnh nên hẹp hơn,
   auto-fill mặc định chỉ vừa 3 cột — ép rõ 4 cột theo yêu cầu). */
.lyson-card-grid--blog{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.lyson-card-grid--blog{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.lyson-card-grid--blog{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.lyson-card-grid--blog{grid-template-columns:1fr}}
.lyson-card{border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.lyson-card:hover{box-shadow:0 12px 28px rgba(0,0,0,.08);transform:translateY(-2px)}
.lyson-card__thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--lyson-bg-alt)}
.lyson-card__thumb img{width:100%;height:100%;object-fit:cover}
.lyson-card__thumb img.lyson-card__thumb-placeholder{object-fit:cover;padding:0;background:#eef1ee;opacity:.75}
/* Card blog (.lyson-card--post): ảnh đại diện đa số là ảnh thiết kế dạng
   banner chữ full-chiều-rộng (tỉ lệ ~16:9, VD 1376×768) — khung 4:3 mặc định
   của card (dùng chung cho sản phẩm/dự án/thiết kế) sẽ cắt mất phần chữ 2 bên
   khi object-fit:cover crop theo chiều ngang. Card blog dùng khung rộng hơn
   (16:9) để không cắt vào chữ, đồng thời ảnh chụp thường (tỉ lệ 4:3) chỉ bị
   cắt bớt trên/dưới — ít ảnh hưởng hơn cắt ngang qua chữ. */
.lyson-card--post .lyson-card__thumb{aspect-ratio:16/9}
.lyson-card__body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.lyson-card__eyebrow{display:inline-flex;align-items:center;align-self:flex-start;font-size:.72rem;font-weight:700;color:var(--lyson-primary-dark);border:1px solid var(--lyson-primary);border-radius:999px;padding:3px 10px;line-height:1.3;text-decoration:none;background:var(--lyson-bg-alt);transition:background .15s,color .15s}
a.lyson-card__eyebrow:hover{background:var(--lyson-primary);color:#fff}
.lyson-card__title{font-size:1.05rem;margin:0;line-height:1.35}
.lyson-card__title a{color:var(--lyson-ink)}
.lyson-card__title a:hover{color:var(--lyson-primary-dark)}
/* Card blog (.lyson-card--post): tiêu đề mặc định trông đơn điệu (chữ đen
   đặc, không điểm nhấn, các bài liền nhau khó phân biệt) — làm nổi bật hơn:
   đậm hơn hẳn phần tóm tắt, bó gọn tối đa 2 dòng cho hàng thẻ đều nhau.
   (Đã bỏ hiệu ứng gạch chân chạy màu khi hover theo yêu cầu — chỉ còn đổi
   màu chữ như các card khác, xem .lyson-card__title a:hover ở trên.) */
.lyson-card--post .lyson-card__title{font-size:1.1rem;font-weight:700;line-height:1.4;letter-spacing:-.01em}
.lyson-card--post .lyson-card__title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lyson-card__excerpt{color:var(--lyson-muted);font-size:.88rem;margin:0}
.lyson-card__meta,.lyson-card__model{font-size:.85rem;color:var(--lyson-muted);margin:0}
.lyson-card__meta{display:flex;align-items:center;gap:5px}
.lyson-card__meta svg{flex:none;width:14px;height:14px;color:var(--lyson-primary-dark)}
.lyson-card__date{font-size:.78rem;color:var(--lyson-muted)}
.lyson-card__cta{margin-top:auto}

/* ── Subcategory pills (shortcode custom_subcategories) ── */
.lyson-subcat-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.lyson-subcat-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:50px;background:var(--lyson-bg-alt);color:var(--lyson-ink);font-size:.85rem;font-weight:600}
.lyson-subcat-pill:hover,.lyson-subcat-pill.is-active{background:var(--lyson-primary);color:#000}
.lyson-subcat-pill__count{font-size:.74rem;font-weight:700;color:var(--lyson-muted);background:rgba(0,0,0,.06);border-radius:50px;padding:1px 8px}
.lyson-subcat-pill.is-active .lyson-subcat-pill__count,.lyson-subcat-pill:hover .lyson-subcat-pill__count{background:rgba(0,0,0,.14);color:#000}

/* ── Chip từ khoá (taxonomy 'lssk_tag') trên trang chi tiết Sản phẩm/Dự án/Thiết kế ── */
.lyson-tag-chips{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:28px;padding-top:24px;border-top:1px solid var(--lyson-border)}
.lyson-tag-chips__label{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--lyson-muted)}
.lyson-tag-chips__label svg{width:15px;height:15px}
.lyson-tag-chip{display:inline-flex;padding:6px 15px;border-radius:50px;background:var(--lyson-bg-alt);color:var(--lyson-ink);font-size:.83rem;font-weight:500;transition:background .15s,color .15s}
.lyson-tag-chip:hover{background:var(--lyson-primary);color:#000}

/* ── Trang danh sách sản phẩm: sidebar + toolbar tìm kiếm/sắp xếp/bộ lọc ── */
.lyson-shop-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.lyson-shop-main{min-width:0}
/* Chưa có ngành/danh mục nào (sidebar không in ra gì) → cột nội dung chiếm trọn chiều rộng thay vì bị ép vào cột 260px đầu tiên. */
.lyson-shop-layout > .lyson-shop-main:only-child{grid-column:1 / -1}

.lyson-shop-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
.lyson-shop-sidebar__box{border:1px solid var(--lyson-border);border-radius:14px;padding:16px;background:#fff;box-shadow:0 2px 10px rgba(15,20,15,.04)}
.lyson-shop-sidebar__title{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--lyson-ink);margin:2px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--lyson-border)}
/* Modifier KHÔNG viết hoa toàn bộ — dùng cho tiêu đề dài/dạng câu hỏi (sidebar
   trang Sản phẩm: "Sản phẩm vừa xem", "Cần tư vấn thêm về sản phẩm này?")
   viết hoa hết chữ sẽ khó đọc hơn so với tiêu đề ngắn kiểu nhãn (CHUYÊN MỤC,
   CHỦ ĐỀ…) ở các sidebar khác — CHỈ áp dụng khi có thêm class này, không đổi
   giao diện mặc định ở nơi khác đang dùng .lyson-shop-sidebar__title. */
.lyson-shop-sidebar__title--normal-case{text-transform:none;letter-spacing:normal;font-size:.92rem}
.lyson-shop-sidebar__title-icon{display:inline-flex;color:var(--lyson-primary-dark)}
.lyson-shop-sidebar__title-icon svg{width:18px;height:18px}
.lyson-shop-sidebar__list{display:flex;flex-direction:column;gap:2px}
.lyson-shop-sidebar__list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:9px;font-size:.88rem;font-weight:600;color:var(--lyson-ink);transition:.15s}
.lyson-shop-sidebar__list a:hover{background:var(--lyson-bg-alt);color:var(--lyson-ink)}
.lyson-shop-sidebar__list a.is-active{background:var(--lyson-primary);color:#000}
.lyson-shop-sidebar__count{flex:none;font-size:.72rem;font-weight:700;color:var(--lyson-muted);background:var(--lyson-bg-alt);border-radius:50px;padding:2px 9px}
.lyson-shop-sidebar__list a.is-active .lyson-shop-sidebar__count{background:rgba(0,0,0,.12);color:#000}

.lyson-shop-sidebar__cta{border:1px solid var(--lyson-border);border-radius:14px;padding:18px;background:var(--lyson-bg-alt);text-align:center}
.lyson-shop-sidebar__cta-title{font-size:.86rem;font-weight:600;margin:0 0 10px}
.lyson-shop-sidebar__cta .lyson-btn{width:100%}

.lyson-shop-toolbar{padding:14px 16px;margin:6px 0 20px;background:#fff;border:1px solid var(--lyson-border);border-radius:14px;box-shadow:0 2px 10px rgba(15,20,15,.04)}
.lyson-shop-toolbar__form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.lyson-shop-toolbar__search{flex:1 1 240px;display:flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--lyson-border);border-radius:50px;background:var(--lyson-bg-alt);color:var(--lyson-muted)}
.lyson-shop-toolbar__search:focus-within{border-color:var(--lyson-primary);background:#fff}
.lyson-shop-toolbar__search svg{width:17px;height:17px;flex:none}
.lyson-shop-toolbar__search input{flex:1;border:none;background:none;outline:none;font-family:inherit;font-size:.88rem;color:var(--lyson-ink)}
.lyson-shop-toolbar__search input::placeholder{color:var(--lyson-muted)}

.lyson-shop-toolbar__filter-toggle{display:none;align-items:center;gap:7px;padding:9px 16px;border:1px solid var(--lyson-border);border-radius:50px;background:#fff;font-weight:600;font-size:.86rem;color:var(--lyson-ink);cursor:pointer}
.lyson-shop-toolbar__filter-toggle svg{width:16px;height:16px}
.lyson-shop-toolbar__filter-toggle:hover{border-color:var(--lyson-primary)}

.lyson-shop-toolbar__count{flex:none;margin:0;font-size:.84rem;font-weight:600;color:var(--lyson-muted);white-space:nowrap}

/* Tìm kiếm trực tiếp (gõ tới đâu lọc tới đó, xem lyInitLiveResults() trong main.js):
   làm mờ nhẹ lưới kết quả trong lúc chờ phản hồi AJAX, tránh cảm giác trang "đứng hình". */
#lyson-results-wrap{transition:opacity .15s}
#lyson-results-wrap.is-loading{opacity:.5;pointer-events:none}

.lyson-shop-toolbar__sort{flex:none;display:flex;align-items:center;gap:8px}
.lyson-shop-toolbar__sort label{font-size:.84rem;font-weight:600;white-space:nowrap}
.lyson-shop-toolbar__sort select{padding:8px 14px;border:1px solid var(--lyson-border);border-radius:50px;font-family:inherit;font-size:.86rem;background:#fff;cursor:pointer}

.lyson-shop-toolbar__view{flex:none;display:flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--lyson-border);border-radius:50px;background:var(--lyson-bg-alt)}
.lyson-view-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--lyson-muted);cursor:pointer}
.lyson-view-btn svg{width:16px;height:16px}
.lyson-view-btn:hover{color:var(--lyson-ink)}
.lyson-view-btn.is-active{background:#fff;color:var(--lyson-primary-dark);box-shadow:0 1px 4px rgba(0,0,0,.12)}

@media (max-width:860px){
	.lyson-shop-layout{grid-template-columns:1fr}
	.lyson-shop-sidebar{position:static;order:2;display:none}
	.lyson-shop-sidebar.is-open{display:flex}
	.lyson-shop-main{order:1}
	.lyson-shop-toolbar__filter-toggle{display:inline-flex}
}

/* ── Kiểu xem "danh sách" cho lưới sản phẩm ── */
.lyson-card-grid.is-list-view{grid-template-columns:1fr;gap:14px}
.lyson-card-grid.is-list-view .lyson-card{flex-direction:row}
.lyson-card-grid.is-list-view .lyson-card__thumb{width:200px;flex:none;aspect-ratio:4/3}
.lyson-card-grid.is-list-view .lyson-card__body{flex:1;justify-content:center}
.lyson-card-grid.is-list-view .lyson-card__cta{margin-top:12px;align-self:flex-start}
.lyson-card-grid.is-list-view .lyson-card__foot{margin-top:12px}
@media (max-width:600px){
	.lyson-card-grid.is-list-view .lyson-card{flex-direction:column}
	.lyson-card-grid.is-list-view .lyson-card__thumb{width:100%}
}

/* ── Nút "Xem thêm sản phẩm" ── */
.lyson-load-more{display:flex;justify-content:center;margin:32px 0 8px}
.lyson-load-more .lyson-btn{min-width:220px}
.lyson-load-more .lyson-btn:disabled{opacity:.6;cursor:default}

/* ── Blog layout — dùng cho single.php (archive index.php CHỦ Ý không sidebar) ── */
/* align-items:start BẮT BUỘC: thiếu dòng này, CSS Grid mặc định kéo giãn
   (stretch) cột sidebar cao bằng đúng cột nội dung bài viết — khi đó
   .lyson-post-sidebar dù có position:sticky cũng không còn "khoảng trống"
   để trượt theo khi cuộn (nhìn như đứng yên). Cùng nguyên tắc với
   .lyson-shop-layout và .lyson-content-layout bên dưới. */
.lyson-blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin:24px 0;align-items:start}
@media (max-width:860px){.lyson-blog-layout{grid-template-columns:1fr}}
.lyson-blog-main{min-width:0}

.lyson-post-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
@media (max-width:860px){.lyson-post-sidebar{position:static}}

.lyson-post-sidebar__recent{display:flex;flex-direction:column;gap:14px}
.lyson-post-sidebar__recent-item{display:flex;gap:10px;align-items:flex-start}
.lyson-post-sidebar__recent-thumb{flex:0 0 auto;width:64px;height:64px;border-radius:8px;overflow:hidden;display:block;background:var(--lyson-bg-alt)}
.lyson-post-sidebar__recent-thumb img{width:100%;height:100%;object-fit:cover}
.lyson-post-sidebar__recent-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.lyson-post-sidebar__recent-title{font-size:.86rem;font-weight:600;color:var(--lyson-ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lyson-post-sidebar__recent-title:hover{color:var(--lyson-primary-dark)}
.lyson-post-sidebar__recent-date{font-size:.74rem;color:var(--lyson-muted)}

/* ── Single ── */
.lyson-single__header{margin-bottom:14px}
.lyson-single__header .lyson-card__eyebrow{display:inline-block;margin-bottom:8px}
.lyson-single__title{font-size:2rem;font-weight:800;margin:8px 0 12px}
/* Cột thông tin sản phẩm hẹp hơn (layout 2 cột) — tiêu đề 2rem quá to, thu nhỏ cho phù hợp catalog B2B */
.lyson-product-info .lyson-single__title{font-size:1.5rem;line-height:1.3;margin:6px 0 10px}
.lyson-single__meta{color:var(--lyson-muted);font-size:.88rem;margin-bottom:20px}
.lyson-single__thumb img{border-radius:var(--lyson-radius);margin-bottom:24px}
.lyson-single__content,.lyson-wysiwyg{max-width:820px}

/* ── Bố cục 2 cột dùng chung cho trang nội dung tĩnh (page.php, trang chính
   sách, trang FAQ...) + sidebar "Trang liên quan"/CTA — xem
   lyson_render_content_sidebar() trong functions.php. Sinh ra vì các trang
   này dùng .lyson-single__content (max-width:820px ở trên) mà KHÔNG có
   margin:auto nên màn hình rộng bị trống bên phải; layout grid ở đây lấp
   khoảng trống đó bằng sidebar thay vì chỉnh margin (giữ nội dung căn trái,
   đồng bộ với các trang khác). Cột phải TÁI DÙNG .lyson-shop-sidebar__* nên
   không cần CSS riêng cho các khối bên trong sidebar. */
.lyson-content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
@media (max-width:860px){.lyson-content-layout{grid-template-columns:1fr}}
.lyson-content-main{min-width:0}
.lyson-content-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
@media (max-width:860px){.lyson-content-sidebar{position:static}}

/* ── Single Dự án / Thiết kế — bố cục 2 cột: nội dung + thẻ thông tin ── */
.lyson-project-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;margin:32px 0}
.lyson-project-layout--info-only{grid-template-columns:1fr}
.lyson-project-layout--info-only .lyson-project-info-col{max-width:640px}
@media (max-width:900px){.lyson-project-layout{grid-template-columns:1fr}}
/* min-width:0 BẮT BUỘC ở đây: item trong CSS Grid mặc định có min-width:auto
   (co theo kích thước nội dung), nên khi ảnh gallery bên trong dùng
   aspect-ratio:auto + height:auto (mobile), kích thước GỐC (pixel thật) của
   ảnh sẽ đội kích thước tối thiểu của .lyson-project-main lên, đẩy tràn
   ngang toàn bộ layout dù cột grid đã minmax(0,1fr) — phải ép min-width:0
   trực tiếp trên item thì mới co đúng theo track. */
.lyson-project-main{min-width:0}
.lyson-project-main .lyson-single__content{max-width:none}

/* Trang "Giới thiệu": đoạn giới thiệu mở đầu nên chiếm trọn chiều rộng
   container (khớp với dải trust-badge/stats-bar bên dưới), không bó hẹp
   820px như bài viết Blog/Sản phẩm (đọc dài dòng nên mới cần hẹp lại). */
.lyson-about-page .lyson-single__content{max-width:none}

/* Cột thông tin bên phải: 2 thẻ RIÊNG BIỆT xếp dọc (thông tin dự án/thiết kế
   + CTA liên hệ) — không dùng chung 1 khung, chỉ có khoảng cách gap giữa 2
   thẻ để tách bạch rõ ràng. Sticky đặt ở khung ngoài để cả 2 thẻ cùng dính
   theo khi cuộn trang. */
.lyson-project-info-col{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){.lyson-project-info-col{position:static}}

.lyson-project-info{background:var(--lyson-bg-alt);border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);padding:22px 24px}
.lyson-project-info__title{font-size:1.05rem;font-weight:800;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--lyson-border)}
.lyson-project-info__list{display:flex;flex-direction:column;gap:16px}
.lyson-project-info__item{display:flex;align-items:flex-start;gap:12px}
.lyson-project-info__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--lyson-border);color:var(--lyson-primary-dark)}
.lyson-project-info__icon svg{width:16px;height:16px}
.lyson-project-info__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.lyson-project-info__label{font-size:.76rem;color:var(--lyson-muted);text-transform:uppercase;letter-spacing:.03em}
.lyson-project-info__value{font-size:.94rem;font-weight:600;color:var(--lyson-ink);word-break:break-word}

.lyson-project-cta{background:#fff;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);padding:20px 24px;box-shadow:0 2px 10px rgba(15,20,15,.05)}
.lyson-project-cta__title{margin:0 0 12px;font-size:.94rem;font-weight:700;color:var(--lyson-ink)}
.lyson-project-cta__actions{display:flex;flex-direction:column;gap:10px}
.lyson-project-cta__actions .lyson-btn{width:100%;padding:10px 16px;font-size:.85rem}
.lyson-project-cta__actions .lyson-btn svg{width:16px;height:16px;flex:none}

/* ── Product single ── */
.lyson-product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;margin-bottom:32px}
@media (max-width:780px){.lyson-product-layout{grid-template-columns:1fr}}
/* min-width:0 — cùng lý do như .lyson-project-main (xem chú thích ở đó):
   chặn kích thước GỐC của ảnh gallery đội min-width của item trong grid lên,
   gây tràn ngang trên mobile. */
.lyson-product-gallery{min-width:0;position:relative}
.lyson-single__rating{margin:6px 0}

/* Icon "Xem 3D" / "Video" đè lên góc trái ảnh chính gallery sản phẩm — luôn
   hiện (không ẩn theo hover như nút zoom/prev/next) vì đây là 2 tính năng
   chính cần được nhận ra ngay, không phải điều hướng phụ. */
.lyson-product-media-badges{position:absolute;top:12px;left:12px;z-index:3;display:flex;flex-direction:column;gap:8px}
.lyson-product-media-badge{display:flex;align-items:center;gap:6px;border:none;border-radius:999px;padding:7px 14px 7px 9px;background:rgba(255,255,255,.95);color:var(--lyson-ink);box-shadow:0 2px 8px rgba(16,24,32,.18);cursor:pointer;font-size:.78rem;font-weight:600;line-height:1;transition:background .15s ease,color .15s ease}
.lyson-product-media-badge svg{width:18px;height:18px;flex-shrink:0}
.lyson-product-media-badge:hover{background:var(--lyson-primary);color:#fff}

/* Sao đánh giá chỉ đọc — 2 hàng sao chồng nhau (nền xám + tô màu cắt theo %)
   để thể hiện được số lẻ kiểu 4.1/5 mượt như Google Play, không làm tròn thô. */
.lyson-star-rating{position:relative;display:inline-flex;vertical-align:middle;line-height:1}
.lyson-star-rating__bg,.lyson-star-rating__fg{display:flex;gap:2px}
.lyson-star-rating__bg svg{color:var(--lyson-border)}
.lyson-star-rating__fg{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap}
.lyson-star-rating__fg svg{color:var(--lyson-accent);flex:0 0 auto}
.lyson-rating-count{color:var(--lyson-muted);font-size:.85rem;margin-left:6px}
.lyson-spec-table{margin:16px 0;font-size:.95rem;width:auto;max-width:100%;border-collapse:collapse}
.lyson-spec-table th{text-align:left;color:var(--lyson-muted);font-weight:400;padding:10px 40px 10px 0;white-space:nowrap;vertical-align:top;border-bottom:1px solid var(--lyson-border)}
.lyson-spec-table td{padding:10px 16px 10px 0;border-bottom:1px solid var(--lyson-border);color:var(--lyson-ink);font-weight:600;line-height:1.5}
.lyson-spec-table tr:nth-child(even){background:var(--lyson-bg-alt)}
.lyson-spec-table tr:last-child th,.lyson-spec-table tr:last-child td{border-bottom:none}
.lyson-product-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.lyson-product-actions .lyson-btn svg{width:17px;height:17px;flex:none}
.lyson-product-order-notice{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px;padding:12px 16px;background:var(--lyson-bg-alt);border-left:3px solid var(--lyson-primary);border-radius:6px;color:var(--lyson-ink);font-size:.88rem;font-weight:600;line-height:1.5}
.lyson-product-order-notice svg{flex:none;width:19px;height:19px;margin-top:1px;color:var(--lyson-primary)}
.lyson-product-resources{display:flex;flex-wrap:wrap;gap:8px 22px;margin:-8px 0 20px}
.lyson-product-resources__link{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--lyson-primary-dark);text-decoration:none}
.lyson-product-resources__link:hover{text-decoration:underline}
.lyson-product-resources__link svg{width:16px;height:16px;flex:none}

/* ── Cam kết dịch vụ (trust badges) — trang chi tiết sản phẩm ──
   Class riêng (KHÔNG dùng chung .lyson-trust-badges với page-gioi-thieu.php,
   vốn là kiểu pill nhỏ nằm ngang — trùng tên lớp trước đây gây xung đột CSS) */
.lyson-product-badges{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.lyson-product-badges li{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px dashed var(--lyson-border);border-radius:var(--lyson-radius);background:var(--lyson-bg-alt)}
.lyson-product-badges__icon{flex:none;width:52px;height:52px;border-radius:50%;background:var(--lyson-primary);display:flex;align-items:center;justify-content:center;color:#fff}
.lyson-product-badges__icon svg{width:26px;height:26px}
.lyson-product-badges__body{display:flex;flex-direction:column;gap:2px}
.lyson-product-badges__title{font-weight:700;font-size:.94rem;color:var(--lyson-ink)}
.lyson-product-badges__desc{font-size:.85rem;color:var(--lyson-muted);line-height:1.5}
.lyson-product-badges__desc a{color:var(--lyson-primary-dark);font-weight:700;text-decoration:none}
.lyson-product-badges__desc a:hover{text-decoration:underline}
.lyson-product-content{max-width:820px}
/* .lyson-product-tabs vốn max-width:820px để đoạn mô tả dài dễ đọc, nhưng
   .lyson-container rộng hơn (~1240px) nên đứng 1 mình sẽ dư khoảng trắng
   lớn bên phải trên màn hình rộng — bọc thêm layout 2 cột (giống
   .lyson-blog-layout/.lyson-content-layout) để cột phải có box CTA sticky
   lấp chỗ trống thay vì để trống trơn. */
.lyson-product-tabs-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;margin-top:20px}
@media (max-width:860px){.lyson-product-tabs-layout{grid-template-columns:1fr}}
/* Sidebar giờ có 2 box xếp dọc ("Sản phẩm vừa xem" + CTA) — dùng chung
   .lyson-shop-sidebar__box/__title (đã có ở product-filters.php/blog
   sidebar) cho đồng bộ giao diện, không tạo box CSS riêng nữa. */
.lyson-product-tabs-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
@media (max-width:860px){.lyson-product-tabs-sidebar{position:static}}
.lyson-product-tabs-sidebar__actions{display:flex;flex-direction:column;gap:10px}
.lyson-product-tabs{max-width:820px;padding-top:20px;border-top:1px solid var(--lyson-border)}
.lyson-product-tabs__nav{display:flex;gap:28px;border-bottom:1px solid var(--lyson-border);margin-bottom:22px}
.lyson-product-tabs__btn{display:flex;align-items:center;gap:7px;padding:0 0 12px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:.95rem;font-weight:700;color:var(--lyson-muted);cursor:pointer;transition:color .15s,border-color .15s}
.lyson-product-tabs__btn svg{width:17px;height:17px;flex:none}
.lyson-product-tabs__btn:hover{color:var(--lyson-ink)}
.lyson-product-tabs__btn.is-active{color:var(--lyson-primary-dark);border-bottom-color:var(--lyson-primary-dark)}
.lyson-product-tabs__panel{display:none}
.lyson-product-tabs__panel.is-active{display:block}
.lyson-product-video,.lyson-product-reviews{margin:40px 0 0;padding-top:32px;border-top:1px solid var(--lyson-border)}

/* ── Bình luận (comments.php) — dùng chung cho Sản phẩm/Blog/Trang.
   Trên trang sản phẩm, comments.php nằm trong .lyson-product-reviews (đã có
   margin/border riêng ở trên) nên bỏ margin-top ở đây tránh cộng dồn 2 lần;
   Blog (single.php) và Trang (page.php) gọi comments_template() trực tiếp,
   không có khung bọc nào khác nên cần margin-top riêng để tách khỏi nội
   dung phía trên. ── */
.lyson-comments{margin-top:40px}
.lyson-product-reviews .lyson-comments{margin-top:0}
.lyson-comments-closed{color:var(--lyson-muted);font-size:.92rem}
.lyson-video-responsive{position:relative;padding-top:56.25%;height:0;overflow:hidden;border-radius:var(--lyson-radius)}
.lyson-video-responsive iframe,
.lyson-video-responsive video{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:#000}

/* ── Gallery + lightbox — ảnh lớn bên trên (bấm để phóng to trong lightbox)
   + dải thumbnail bên dưới (bấm để đổi ảnh lớn, không mở lightbox) ── */
.lyson-gallery{margin-bottom:24px}
/* Không ép khung 4:3 nữa (mọi kích thước màn hình) — ảnh hiện đúng tỉ lệ
   gốc, không bị crop. Mỗi bài (dự án/thiết kế/sản phẩm) có ảnh tỉ lệ khác
   nhau, nên khung .lyson-gallery__main co theo ĐÚNG chiều cao ảnh thật
   (height:auto trên ảnh + bỏ aspect-ratio trên khung) thay vì cố định tỉ lệ
   rồi object-fit:cover cắt bớt. .lyson-project-main/.lyson-product-gallery
   đã có min-width:0 để chặn kích thước gốc của ảnh làm tràn ngang layout. */
.lyson-gallery__main{position:relative;display:block;width:100%;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);overflow:hidden;background:var(--lyson-bg-alt)}
.lyson-gallery__main-img{width:100%;height:auto;object-fit:cover;display:block;cursor:zoom-in;transition:opacity .15s}

/* Mũi tên trước/sau + nút "xem phóng to" trên ảnh chính — ẩn mặc định, chỉ
   hiện khi rê chuột vào ảnh (và luôn hiện trên thiết bị cảm ứng vì không có
   hover thật — xem media (hover:none) bên dưới) */
.lyson-gallery__nav,.lyson-gallery__zoom{position:absolute;border:none;border-radius:50%;background:#fff;color:var(--lyson-ink);box-shadow:0 2px 8px rgba(16,24,32,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;transition:opacity .15s ease,background .15s ease,color .15s ease}
.lyson-gallery__nav:hover,.lyson-gallery__zoom:hover{background:var(--lyson-primary);color:#fff}
.lyson-gallery__nav{top:50%;transform:translateY(-50%);width:38px;height:38px}
.lyson-gallery__nav svg{width:20px;height:20px}
.lyson-gallery__nav--prev{left:12px}
.lyson-gallery__nav--next{right:12px}
.lyson-gallery__zoom{top:12px;right:12px;width:36px;height:36px}
.lyson-gallery__zoom svg{width:18px;height:18px}
.lyson-gallery__main:hover .lyson-gallery__nav,
.lyson-gallery__main:hover .lyson-gallery__zoom{opacity:1}
@media (hover:none){
	.lyson-gallery__nav,.lyson-gallery__zoom{opacity:1}
}

/* Dải thumbnail — LUÔN 1 hàng ngang, KHÔNG xuống dòng, KHÔNG cuộn ngang, giữ
   nguyên kích thước cố định 64px như cũ. Khi nhiều ảnh hơn số ô vừa 1 hàng,
   JS (main.js) ẩn bớt thumbnail dư và gắn nhãn "+N" đè lên ô cuối cùng còn
   hiện — bấm vào ô đó vẫn chọn đúng ảnh, xem hết toàn bộ trong lightbox. */
.lyson-gallery__thumbs{display:flex;flex-wrap:nowrap;gap:8px;margin-top:10px}
.lyson-gallery__item{position:relative;flex:0 0 64px;width:64px;border:1px solid var(--lyson-border);border-radius:6px;overflow:hidden;padding:0;background:none;cursor:pointer;aspect-ratio:1/1;transition:border-color .15s,box-shadow .15s}
.lyson-gallery__item img{width:100%;height:100%;object-fit:cover}
.lyson-gallery__item:hover{border-color:var(--lyson-primary)}
.lyson-gallery__item.is-active{border-color:var(--lyson-primary);box-shadow:0 0 0 2px rgba(145,192,62,.25)}
.lyson-gallery__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(16,24,32,.6);color:#fff;font-weight:700;font-size:.95rem;pointer-events:none}

.lyson-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:flex;align-items:center;justify-content:center}
.lyson-lightbox[hidden]{display:none}
.lyson-lightbox__img{max-width:90vw;max-height:75vh;border-radius:4px}
.lyson-lightbox__close,.lyson-lightbox__prev,.lyson-lightbox__next{position:absolute;background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:50%;width:44px;height:44px;font-size:1.4rem;cursor:pointer}
.lyson-lightbox__close{top:20px;right:20px}
.lyson-lightbox__prev{left:20px;top:50%;transform:translateY(-50%)}
.lyson-lightbox__next{right:20px;top:50%;transform:translateY(-50%)}

/* Dải thumbnail trong lightbox — cuộn ngang, nằm cố định dưới đáy, không
   che ảnh lớn (ảnh giới hạn max-height:75vh ở trên để chừa chỗ) */
.lyson-lightbox__thumbs{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:8px;padding:0 74px;overflow-x:auto}
.lyson-lightbox__thumb{flex:0 0 52px;width:52px;height:52px;border-radius:6px;overflow:hidden;padding:0;border:2px solid transparent;background:none;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.lyson-lightbox__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lyson-lightbox__thumb:hover{opacity:.85}
.lyson-lightbox__thumb.is-active{opacity:1;border-color:var(--lyson-primary)}
@media (max-width:480px){
	.lyson-lightbox__thumbs{padding:0 56px;bottom:10px}
	.lyson-lightbox__thumb{flex-basis:40px;width:40px;height:40px}
}

/* ── [wp_image_gallery] — lưới xem trước kiểu Instagram: 1 ảnh lớn bên
   trái + tối đa 2 ảnh nhỏ bên phải. Dùng CHUNG lightbox #lyson-lightbox ở
   trên (assets/js/main.js) — xem inc/shortcode-gallery.php. ── */
.lyson-imggal{margin-bottom:24px}
.lyson-imggal__grid{display:grid;grid-template-columns:2fr 1fr;gap:8px;border-radius:var(--lyson-radius);overflow:hidden}
.lyson-imggal__grid--single{grid-template-columns:1fr}
.lyson-imggal__side{display:grid;gap:8px;grid-template-rows:1fr 1fr}
.lyson-imggal__cell{position:relative;display:block;width:100%;height:100%;padding:0;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);overflow:hidden;background:var(--lyson-bg-alt);cursor:zoom-in;line-height:0}
.lyson-imggal__cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease,opacity .2s ease}
.lyson-imggal__cell:hover img{transform:scale(1.05);opacity:.92}
.lyson-imggal__cell--main{min-height:260px}
.lyson-imggal__side .lyson-imggal__cell{min-height:126px}
.lyson-imggal__zoom{position:absolute;bottom:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(16,24,32,.55);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.lyson-imggal__zoom svg{width:18px;height:18px}
.lyson-imggal__cell:hover .lyson-imggal__zoom{opacity:1}
.lyson-imggal__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(16,24,32,.6);color:#fff;font-weight:700;font-size:1.4rem}
@media (hover:none){
	.lyson-imggal__zoom{opacity:1}
}
@media (max-width:640px){
	.lyson-imggal__grid{grid-template-columns:1fr}
	.lyson-imggal__grid--single,.lyson-imggal__side{grid-template-columns:1fr 1fr;grid-template-rows:none}
	.lyson-imggal__cell--main{min-height:200px}
	.lyson-imggal__side .lyson-imggal__cell{min-height:100px}
}

/* ── Modal "Xem 3D" / "Xem Video" (mở từ icon đè trên ảnh chính) ── */
.lyson-media-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.lyson-media-modal[hidden]{display:none}
.lyson-media-modal__overlay{position:absolute;inset:0;background:rgba(16,24,32,.85)}
.lyson-media-modal__dialog{position:relative;width:100%;max-width:900px;height:min(80vh,700px);background:#fff;border-radius:var(--lyson-radius);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lyson-media-modal__dialog--video{background:#000}
.lyson-media-modal__dialog--video .lyson-video-responsive{position:absolute;inset:0;height:100%;padding-top:0;border-radius:0}
.lyson-media-modal__close{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:var(--lyson-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lyson-media-modal__close svg{width:18px;height:18px}
.lyson-media-modal__dialog--video .lyson-media-modal__close{background:rgba(255,255,255,.2);color:#fff}
.lyson-3d-ar-btn{position:absolute;bottom:16px;right:16px;padding:10px 16px;border:none;border-radius:999px;background:var(--lyson-primary);color:#fff;font-weight:600;cursor:pointer;font-size:.85rem}
body.lyson-modal-open{overflow:hidden}
@media (max-width:600px){
	.lyson-media-modal{padding:0}
	.lyson-media-modal__dialog{max-width:none;height:100%;border-radius:0}
}

/* ── Reviews (Đánh giá sản phẩm) ── */
.lyson-comments__title{font-size:1.15rem;font-weight:800;margin-bottom:16px}

/* Khối tổng quan kiểu Google Play: điểm số lớn bên trái + biểu đồ thanh bên phải */
.lyson-rating-summary{display:flex;gap:40px;align-items:center;padding:24px;margin-bottom:28px;background:var(--lyson-bg-alt);border-radius:var(--lyson-radius);border:1px solid var(--lyson-border)}
.lyson-rating-summary__score{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding-right:40px;border-right:1px solid var(--lyson-border);min-width:140px}
.lyson-rating-summary__number{font-size:2.6rem;font-weight:800;line-height:1;color:var(--lyson-ink)}
.lyson-rating-summary__stars .lyson-star-rating__bg svg,
.lyson-rating-summary__stars .lyson-star-rating__fg svg{width:20px;height:20px}
.lyson-rating-summary__count{font-size:.85rem;color:var(--lyson-muted)}

.lyson-rating-summary__bars{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.lyson-rating-bar{display:flex;align-items:center;gap:10px;font-size:.85rem}
.lyson-rating-bar__label{flex:0 0 auto;display:flex;align-items:center;gap:3px;width:28px;color:var(--lyson-muted);font-weight:600}
.lyson-rating-bar__label svg{width:13px;height:13px;color:var(--lyson-accent)}
.lyson-rating-bar__track{flex:1;height:8px;border-radius:999px;background:var(--lyson-border);overflow:hidden}
.lyson-rating-bar__fill{display:block;height:100%;border-radius:999px;background:var(--lyson-accent);transition:width .3s ease}
.lyson-rating-bar__count{flex:0 0 auto;width:28px;text-align:right;color:var(--lyson-muted)}

@media (max-width:640px){
	.lyson-rating-summary{flex-direction:column;align-items:stretch;gap:20px;padding:20px}
	.lyson-rating-summary__score{padding-right:0;border-right:none;padding-bottom:20px;border-bottom:1px solid var(--lyson-border)}
}

/* Danh sách bình luận thường (Blog/Trang) — CHỈ áp dụng khi KHÔNG phải danh
   sách review sản phẩm (ol lúc đó có thêm class .lyson-review-list), tránh
   selector "li" độ đặc hiệu cao hơn đè mất style thẻ .lyson-review-item bên dưới */
.lyson-comment-list{margin-bottom:24px}
.lyson-comment-list:not(.lyson-review-list) li{border-bottom:1px solid var(--lyson-border);padding:14px 0}

/* Danh sách review sản phẩm — mỗi review là 1 thẻ (card) có avatar + tên + sao riêng từng người */
.lyson-review-list{margin-bottom:32px;list-style:none;padding:0}
.lyson-review-item{list-style:none;background:#fff;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);padding:18px 20px;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,24,32,.04)}
.lyson-review-item:last-child{margin-bottom:0}
.lyson-review-item__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.lyson-review-item__avatar img{border-radius:50%;display:block;border:2px solid var(--lyson-bg-alt)}
.lyson-review-item__meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.lyson-review-item__author{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--lyson-ink)}
.lyson-review-item__badge{flex:none;font-size:.72rem;font-weight:700;color:var(--lyson-primary-dark);background:rgba(145,192,62,.12);border-radius:999px;padding:2px 9px;line-height:1.5}
.lyson-review-item__line{display:flex;align-items:center;gap:10px}
.lyson-review-item__stars .lyson-star-rating__bg svg,
.lyson-review-item__stars .lyson-star-rating__fg svg{width:14px;height:14px}
.lyson-review-item__date{font-size:.8rem;color:var(--lyson-muted)}
.lyson-review-item__content{color:var(--lyson-ink);line-height:1.7;padding-left:60px}
.lyson-review-item__content p{margin:0 0 8px}
.lyson-review-item__content p:last-child{margin-bottom:0}
.lyson-review-item__pending{margin:6px 0 0 60px;font-size:.82rem;color:var(--lyson-muted);font-style:italic}
@media (max-width:480px){.lyson-review-item__content,.lyson-review-item__pending{padding-left:0;margin-left:0}}

/* Trả lời (VD: chủ shop phản hồi khách) — nằm ĐÚNG lồng bên trong <li> của
   review cha (xem ghi chú trong lyson_review_list_callback()), nên gộp
   chung 1 khối với review gốc thay vì tách rời: thụt vào, có viền phân
   cách nhẹ phía trên, nền nhạt hơn + viền trái màu thương hiệu để vẫn
   phân biệt rõ đâu là review gốc, đâu là trả lời. */
.lyson-review-item .children{list-style:none;margin:14px 0 0;padding:14px 0 0}
.lyson-review-item .children[hidden]{display:none}
.lyson-review-item--reply{background:var(--lyson-bg-alt);border:none;border-left:3px solid var(--lyson-primary);border-radius:0 var(--lyson-radius) var(--lyson-radius) 0;box-shadow:none;padding:14px 16px;margin-bottom:0}
.lyson-review-item--reply .lyson-review-item__content{padding-left:48px}
@media (max-width:480px){
	.lyson-review-item--reply .lyson-review-item__content{padding-left:0}
}

/* Avatar chữ cái đầu (thay Gravatar mặc định — khách để lại đánh giá hầu hết
   không có ảnh Gravatar thật nên WP hiện icon "người bí ẩn" xám xịt): vòng
   tròn màu (chọn theo tên, cùng 1 người luôn ra cùng 1 màu) + chữ cái đầu
   trắng đậm. Nhân viên (QTV) dùng 1 màu thương hiệu cố định riêng, không lấy
   từ bảng màu ngẫu nhiên, để luôn nhận ra ngay đây là phản hồi từ shop. */
.lyson-review-item__avatar{flex:none}
.lyson-avatar-initial{display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;line-height:1;user-select:none}
.lyson-avatar-initial--staff{background:var(--lyson-primary-dark) !important}

/* Trả lời từ nhân viên (QTV) — nổi bật hơn trả lời/đánh giá thường bằng nền
   xanh nhạt thương hiệu + viền trái đậm hơn, để khách dễ nhận ra ngay đâu là
   phản hồi chính thức từ shop, tách biệt khỏi bình luận qua lại giữa khách. */
.lyson-review-item--staff{background:rgba(145,192,62,.08);border-left-color:var(--lyson-primary-dark)}
.lyson-review-item__badge--staff{color:#fff;background:var(--lyson-primary-dark)}

/* Nút thu gọn/mở rộng trả lời (JS thêm vào, xem lyInitReviewCollapse() trong
   main.js) — không có JS thì trả lời luôn hiện sẵn (progressive enhancement),
   không bị ẩn mất nội dung. */
.lyson-review-collapse-toggle{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:0;border:none;background:none;color:var(--lyson-primary-dark);font-size:.84rem;font-weight:600;cursor:pointer;font-family:inherit}
.lyson-review-collapse-toggle:hover{text-decoration:underline}

/* Ô chọn sao bấm trực tiếp trong form gửi đánh giá (thay dropdown cũ) — 5 sao
   vẽ ngược 5→1 trong HTML rồi đảo chiều bằng row-reverse để hover/checked luôn
   tô đúng "N sao đầu tính từ trái", hoạt động thuần CSS không cần JS. */
.comment-form-rating{margin-bottom:16px}
.comment-form-rating > label{display:block;font-weight:600;margin-bottom:8px}
.lyson-star-input{display:inline-flex;flex-direction:row-reverse;gap:4px}
.lyson-star-input input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#commentform .lyson-star-input label{cursor:pointer;color:var(--lyson-border);transition:color .15s ease;font-weight:400}
.lyson-star-input label svg{width:30px;height:30px;display:block}
#commentform .lyson-star-input input:checked ~ label,
#commentform .lyson-star-input label:hover,
#commentform .lyson-star-input label:hover ~ label{color:var(--lyson-accent)}
.lyson-star-input input:focus-visible + label{outline:2px solid var(--lyson-primary-dark);outline-offset:2px;border-radius:4px}

/* Form gửi đánh giá / bình luận — không áp cho label bên trong ô chọn sao
   (label đó cần màu riêng để thể hiện trạng thái chưa chọn/đã chọn, xem
   #commentform .lyson-star-input label ở trên). */
#commentform > p > label,
#commentform .comment-form-rating > label{font-weight:600;font-size:.9rem;color:var(--lyson-ink)}
#commentform input[type=text],#commentform input[type=email],#commentform input[type=url],#commentform textarea{width:100%;padding:10px 14px;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);font-family:inherit;font-size:.94rem;margin-top:6px}
#commentform input[type=text]:focus,#commentform input[type=email]:focus,#commentform input[type=url]:focus,#commentform textarea:focus{outline:none;border-color:var(--lyson-primary)}
#commentform p{margin:0 0 16px}
#commentform .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--lyson-muted)}
#commentform .form-submit{margin:20px 0 0}
#commentform .form-submit input{cursor:pointer;border:none}
#commentform .form-submit input:not(.lyson-btn){display:inline-flex;align-items:center;padding:11px 26px;border-radius:6px;background:var(--lyson-primary);color:#fff;font-weight:600;font-size:.9rem;transition:.2s}
#commentform .form-submit input:not(.lyson-btn):hover{background:var(--lyson-primary-dark)}

/* ── Footer ── */
.lyson-footer{background:var(--lyson-footer-bg);color:#d1d5db;margin-top:60px}
.lyson-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:48px 20px}
.lyson-footer h5{color:#fff;font-size:.95rem;margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--lyson-primary);display:inline-block}
.lyson-footer-menu li{margin-bottom:8px;font-size:.88rem}
.lyson-footer-menu a{color:#d1d5db;font-size:.88rem}
.lyson-footer-menu a:hover{color:#fff}
.lyson-footer-support li{color:#9ca3af}
.lyson-footer__about{font-size:.85rem;color:#9ca3af;line-height:1.7;margin:0}
.lyson-footer-address{display:flex;flex-direction:column;gap:10px}
.lyson-footer-address li{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;color:#9ca3af;line-height:1.5}
.lyson-footer-address svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--lyson-primary)}
.lyson-footer-address__map{position:relative;display:inline-flex;align-items:center;margin-top:4px;color:var(--lyson-primary);text-decoration:none}
.lyson-footer-address__map img{flex:none;width:auto;height:20px}
.lyson-footer-address__map-text{position:absolute;left:0;bottom:100%;margin-bottom:6px;padding:4px 10px;background:#1f2937;color:#fff;font-size:.72rem;font-weight:500;line-height:1.4;white-space:nowrap;border-radius:4px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease}
.lyson-footer-address__map:hover .lyson-footer-address__map-text,.lyson-footer-address__map:focus-visible .lyson-footer-address__map-text{opacity:1;visibility:visible}
.lyson-footer-contact{display:flex;flex-direction:column;gap:10px}
.lyson-footer-contact li{display:flex;align-items:center;gap:8px}
.lyson-footer-contact svg{flex:none;width:16px;height:16px;color:var(--lyson-primary)}
.lyson-footer-contact a{color:#d1d5db;font-size:.88rem}
.lyson-footer-contact a:hover{color:#fff}
.lyson-footer-social{gap:12px!important;margin-top:2px}
.lyson-footer-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);color:#d1d5db;flex:none}
.lyson-footer-social a:hover{background:var(--lyson-primary);color:#fff}
.lyson-footer-social svg{width:16px;height:16px;color:inherit;margin:0}

.lyson-footer__logo-link{display:inline-block;margin-bottom:16px}
.lyson-footer__logo{height:52px;width:auto;max-width:180px;display:block}
.lyson-footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding:16px 20px;font-size:.8rem;color:#9ca3af}
@media (max-width:780px){.lyson-footer__grid{grid-template-columns:1fr;gap:32px}}

/* ── Footer — Mẫu 2 (template-parts/footer-v2.php) ── */
.lyson-footer--v2{margin-top:0}
.lyson-footer-v2__cta{background:var(--lyson-primary)}
.lyson-footer-v2__cta-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:18px 20px}
.lyson-footer-v2__cta-text{display:flex;align-items:center;gap:10px;margin:0;color:#000;font-weight:600;font-size:.95rem}
.lyson-footer-v2__cta-text svg{flex:none;width:22px;height:22px}
.lyson-footer-v2__cta-btn{display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;font-weight:700;font-size:.95rem;padding:10px 20px;border-radius:999px;white-space:nowrap;transition:background .15s}
.lyson-footer-v2__cta-btn:hover{background:#1a1a1a;color:#fff}
.lyson-footer-v2__cta-btn svg{width:17px;height:17px;color:var(--lyson-primary)}
@media (max-width:640px){.lyson-footer-v2__cta-inner{justify-content:center;text-align:center}}

.lyson-footer-v2__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;padding:48px 0}
@media (max-width:780px){.lyson-footer-v2__cols{grid-template-columns:1fr;gap:36px}}
.lyson-footer-v2__col{position:relative;padding-left:32px}
.lyson-footer-v2__col:first-child{padding-left:0}
.lyson-footer-v2__col:not(:first-child)::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.12)}
@media (max-width:780px){.lyson-footer-v2__col{padding-left:0}.lyson-footer-v2__col:not(:first-child)::before{display:none}}
.lyson-footer-v2__title{color:#fff;font-size:.95rem;font-weight:700;margin:0 0 20px}
.lyson-footer__iso{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px}
.lyson-footer__iso img{width:64px;height:64px;object-fit:contain;flex:none}

.lyson-footer-v2__bottom{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:#9ca3af}
.lyson-footer-v2__bottom p{margin:0}

.lyson-back-to-top{position:fixed;right:22px;bottom:22px;z-index:999;width:44px;height:44px;border-radius:50%;border:none;background:var(--lyson-primary);color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.22);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.lyson-back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.lyson-back-to-top svg:not(.lyson-back-to-top__ring){width:20px;height:20px}
.lyson-back-to-top:hover{background:var(--lyson-primary-dark)}
/* Vòng tròn % cuộn trang quanh nút — xem ghi chú trong template-parts/back-to-top.php */
.lyson-back-to-top__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.lyson-back-to-top__ring-track{fill:none;stroke:rgba(0,0,0,.18);stroke-width:3}
.lyson-back-to-top__ring-progress{fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
@media (max-width:600px){.lyson-back-to-top{right:14px;bottom:14px;width:40px;height:40px}}

/*
 * ── Nút liên hệ nổi (Gọi điện / Zalo) ──
 * Mặc định: hình tròn chỉ icon. Khi trang được cuộn, JS (main.js) thêm
 * class "is-scrolled" → xoè rộng ra thành viên thuốc kèm chữ. Đặt bottom
 * cao hơn nút "Lên đầu trang" (.lyson-back-to-top) để không đè lên nhau
 * khi cả 2 cùng hiện ở góc phải (Mẫu footer mới).
 */
/* align-items — KHÔNG để mặc định "stretch": flex-direction:column mà
   thiếu dòng này sẽ khiến mọi nút tự giãn theo đúng bề rộng nút DÀI NHẤT
   trong cột (vd nút Zalo bị kéo rộng dư ra bằng nút Gọi điện dù chữ "Zalo"
   ngắn hơn nhiều số điện thoại) — "flex-end"/"flex-start" cho mỗi nút tự co
   theo đúng nội dung của nó, đồng thời vẫn thẳng hàng theo đúng cạnh ngoài
   (phải/trái) tương ứng vị trí đặt. */
.lyson-float-contact{position:fixed;bottom:92px;z-index:900;display:flex;flex-direction:column;gap:14px;opacity:1;transition:opacity .25s ease}
/* Sắp cuộn tới footer — tự ẩn đi để không đè lên link/nút trong footer (xem
   IntersectionObserver theo dõi thẻ <footer> trong khối "Nút liên hệ nổi"
   assets/js/main.js). */
.lyson-float-contact.is-near-footer{opacity:0;pointer-events:none}
.lyson-float-contact--right{right:20px;align-items:flex-end}
.lyson-float-contact--left{left:20px;align-items:flex-start}
/*
 * Thứ tự icon/chữ giữ NGUYÊN (icon trước, chữ sau) cho CẢ 2 vị trí — trước
 * đây biến thể --left dùng flex-direction:row-reverse khiến icon lại nằm
 * bên PHẢI viên thuốc (xa mép trái) còn chữ số điện thoại nằm sát mép trái,
 * ngược với mong đợi "icon nằm bên trái" khi neo bên trái. Bỏ row-reverse:
 * icon luôn đứng yên đúng vị trí tròn ban đầu (sát mép đã neo, trái hoặc
 * phải), chữ mới là phần "xoè ra" thêm khi cuộn trang — đúng cả 2 phía.
 */
.lyson-float-btn{display:flex;align-items:center;width:52px;height:52px;border-radius:999px;overflow:hidden;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:width .25s ease,background .15s}
.lyson-float-btn--phone{background:var(--lyson-primary)}
.lyson-float-btn--phone:hover{background:var(--lyson-primary-dark)}
.lyson-float-btn--zalo{background:#0068ff}
.lyson-float-btn--zalo:hover{background:#0055d4}
.lyson-float-btn__icon{flex:none;width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:#fff}
.lyson-float-btn__icon svg{width:26px;height:26px}
.lyson-float-btn__text{white-space:nowrap;color:#fff;font-weight:700;font-size:.92rem;max-width:0;opacity:0;overflow:hidden;transition:max-width .25s ease,opacity .2s,padding .25s}
.lyson-float-contact.is-scrolled .lyson-float-btn{width:auto}
.lyson-float-contact.is-scrolled .lyson-float-btn__text{max-width:170px;opacity:1;padding-right:18px}
@media (max-width:600px){
	.lyson-float-contact{bottom:66px;gap:10px}
	.lyson-float-contact--right{right:14px}
	.lyson-float-contact--left{left:14px}
	.lyson-float-btn,.lyson-float-btn__icon{width:46px;height:46px}
	.lyson-float-btn__icon svg{width:22px;height:22px}
	.lyson-float-contact.is-scrolled .lyson-float-btn__text{max-width:140px;font-size:.86rem}
}

/* ── Pagination ── */
.lyson-pagination{display:flex;gap:6px;margin:32px 0;flex-wrap:wrap}
.lyson-pagination a,.lyson-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;border:1px solid var(--lyson-border);border-radius:6px;color:var(--lyson-ink)}
.lyson-pagination .current{background:var(--lyson-primary-dark);border-color:var(--lyson-primary-dark);color:#fff}

/* ── Search ── */
.lyson-search-form{display:flex;gap:8px;max-width:480px;margin:16px 0 32px}
.lyson-search-field{flex:1;padding:10px 14px;border:1px solid var(--lyson-border);border-radius:6px}
.lyson-search-submit{padding:10px 18px;background:var(--lyson-primary-dark);color:#fff;border:none;border-radius:6px;cursor:pointer}

.lyson-term-description{max-width:1240px;margin-bottom:20px}

/* ── Nội dung đầu trang / cuối trang (top/bottom content) — danh mục sản phẩm +
      Lĩnh vực/Danh mục Dự án-Thiết kế — mô tả danh mục (.lyson-term-description,
      cũng có thể chứa HTML phong phú) — VÀ nội dung the_content() của single
      Sản phẩm/Dự án/Thiết kế/Blog/Trang (.lyson-single__content, .lyson-wysiwyg).
      Bài viết nhập qua WYSIWYG (TinyMCE) nên style đầy đủ mọi thẻ HTML phổ
      biến trình soạn thảo có thể sinh ra, dùng chung 1 bộ quy tắc duy nhất. ── */
.lyson-term-content,.lyson-term-description,.lyson-single__content,.lyson-product-content,.lyson-wysiwyg{color:var(--lyson-ink);line-height:1.75;font-size:.98rem}
.lyson-term-content{max-width:1240px}
.lyson-term-content--top{margin:0 0 28px}
.lyson-term-content--bottom{margin:40px 0 0;padding-top:32px;border-top:1px solid var(--lyson-border)}

/* ── "Xem thêm / Thu gọn" cho 3 khối trên (mô tả danh mục + nội dung đầu/cuối
      trang danh mục — biên tập viên có thể viết rất dài). Mặc định KHÔNG cắt
      gì cả (an toàn nếu JS tắt) — JS (main.js) đo chiều cao thật, chỉ thêm
      class .is-collapsible.is-collapsed + hiện nút khi nội dung thật sự dài
      hơn ngưỡng LYSON_COLLAPSE_MAX_HEIGHT (main.js). ── */
.lyson-collapsible.is-collapsible.is-collapsed{max-height:260px;overflow:hidden;position:relative}
.lyson-collapsible.is-collapsible.is-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--lyson-bg))}
.lyson-collapsible__toggle-wrap{text-align:center;margin:2px 0 24px;background:var(--lyson-bg)}
.lyson-collapsible__toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--lyson-border);border-radius:50px;background:#fff;color:var(--lyson-primary-dark);font-weight:700;font-size:.86rem;font-family:inherit;cursor:pointer;transition:.15s}
.lyson-collapsible__toggle:hover{border-color:var(--lyson-primary);background:var(--lyson-bg-alt)}
.lyson-collapsible__toggle svg{width:16px;height:16px;transition:transform .2s}
.lyson-collapsible__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.lyson-term-content h1,.lyson-term-description h1,.lyson-single__content h1,.lyson-product-content h1,.lyson-wysiwyg h1,
.lyson-term-content h2,.lyson-term-description h2,.lyson-single__content h2,.lyson-product-content h2,.lyson-wysiwyg h2,
.lyson-term-content h3,.lyson-term-description h3,.lyson-single__content h3,.lyson-product-content h3,.lyson-wysiwyg h3,
.lyson-term-content h4,.lyson-term-description h4,.lyson-single__content h4,.lyson-product-content h4,.lyson-wysiwyg h4,
.lyson-term-content h5,.lyson-term-description h5,.lyson-single__content h5,.lyson-product-content h5,.lyson-wysiwyg h5,
.lyson-term-content h6,.lyson-term-description h6,.lyson-single__content h6,.lyson-product-content h6,.lyson-wysiwyg h6{color:var(--lyson-ink);font-weight:800;line-height:1.3}
.lyson-term-content h1,.lyson-term-description h1,.lyson-single__content h1,.lyson-product-content h1,.lyson-wysiwyg h1{font-size:1.6rem;margin:36px 0 16px}
.lyson-term-content h2,.lyson-term-description h2,.lyson-single__content h2,.lyson-product-content h2,.lyson-wysiwyg h2{font-size:1.35rem;margin:32px 0 14px}
.lyson-term-content h3,.lyson-term-description h3,.lyson-single__content h3,.lyson-product-content h3,.lyson-wysiwyg h3{font-size:1.1rem;font-weight:700;margin:24px 0 10px}
.lyson-term-content h4,.lyson-term-description h4,.lyson-single__content h4,.lyson-product-content h4,.lyson-wysiwyg h4{font-size:1rem;font-weight:700;margin:20px 0 8px}
.lyson-term-content h5,.lyson-term-description h5,.lyson-single__content h5,.lyson-product-content h5,.lyson-wysiwyg h5,
.lyson-term-content h6,.lyson-term-description h6,.lyson-single__content h6,.lyson-product-content h6,.lyson-wysiwyg h6{font-size:.92rem;font-weight:700;margin:16px 0 8px}

.lyson-term-content p,.lyson-term-description p,.lyson-single__content p,.lyson-product-content p,.lyson-wysiwyg p{margin:0 0 14px;text-align:justify;text-align-last:left}
.lyson-term-content strong,.lyson-term-description strong,.lyson-single__content strong,.lyson-product-content strong,.lyson-wysiwyg strong,
.lyson-term-content b,.lyson-term-description b,.lyson-single__content b,.lyson-product-content b,.lyson-wysiwyg b{font-weight:700;color:var(--lyson-ink)}
.lyson-term-content em,.lyson-term-description em,.lyson-single__content em,.lyson-product-content em,.lyson-wysiwyg em,
.lyson-term-content i,.lyson-term-description i,.lyson-single__content i,.lyson-product-content i,.lyson-wysiwyg i{font-style:italic}
.lyson-term-content small,.lyson-term-description small,.lyson-single__content small,.lyson-product-content small,.lyson-wysiwyg small{font-size:.85em;color:var(--lyson-muted)}
.lyson-term-content mark,.lyson-term-description mark,.lyson-single__content mark,.lyson-product-content mark,.lyson-wysiwyg mark{background:#fff3b0;color:var(--lyson-ink);padding:.05em .2em}
.lyson-term-content sup,.lyson-term-description sup,.lyson-single__content sup,.lyson-product-content sup,.lyson-wysiwyg sup,
.lyson-term-content sub,.lyson-term-description sub,.lyson-single__content sub,.lyson-product-content sub,.lyson-wysiwyg sub{font-size:.75em}
/* Vài thẻ TinyMCE hay dùng nhưng trước đây chưa style riêng (chỉ ăn mặc định
   trình duyệt) — gạch ngang/gạch chân (nút Strikethrough/Underline trong
   soạn thảo), chú giải, phím tắt, địa chỉ liên hệ dạng <address>. */
.lyson-term-content del,.lyson-term-description del,.lyson-single__content del,.lyson-product-content del,.lyson-wysiwyg del,
.lyson-term-content s,.lyson-term-description s,.lyson-single__content s,.lyson-product-content s,.lyson-wysiwyg s,
.lyson-term-content strike,.lyson-term-description strike,.lyson-single__content strike,.lyson-product-content strike,.lyson-wysiwyg strike{text-decoration:line-through;color:var(--lyson-muted)}
.lyson-term-content ins,.lyson-term-description ins,.lyson-single__content ins,.lyson-product-content ins,.lyson-wysiwyg ins{text-decoration:underline;color:var(--lyson-ink)}
.lyson-term-content abbr[title],.lyson-term-description abbr[title],.lyson-single__content abbr[title],.lyson-product-content abbr[title],.lyson-wysiwyg abbr[title]{text-decoration:underline dotted;text-underline-offset:2px;cursor:help}
.lyson-term-content kbd,.lyson-term-description kbd,.lyson-single__content kbd,.lyson-product-content kbd,.lyson-wysiwyg kbd{background:var(--lyson-bg-alt);border:1px solid var(--lyson-border);border-radius:4px;padding:.1em .45em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}
.lyson-term-content address,.lyson-term-description address,.lyson-single__content address,.lyson-product-content address,.lyson-wysiwyg address{font-style:normal;margin:0 0 14px}

.lyson-term-content ul,.lyson-term-description ul,.lyson-single__content ul,.lyson-product-content ul,.lyson-wysiwyg ul{margin:0 0 14px;padding-left:22px;list-style:disc}
.lyson-term-content ol,.lyson-term-description ol,.lyson-single__content ol,.lyson-product-content ol,.lyson-wysiwyg ol{margin:0 0 14px;padding-left:22px;list-style:decimal}
.lyson-term-content ul ul,.lyson-term-description ul ul,.lyson-single__content ul ul,.lyson-product-content ul ul,.lyson-wysiwyg ul ul{list-style:circle}
.lyson-term-content ul ul,.lyson-term-description ul ul,.lyson-term-content ul ol,.lyson-term-description ul ol,.lyson-term-content ol ul,.lyson-term-description ol ul,.lyson-term-content ol ol,.lyson-term-description ol ol,
.lyson-single__content ul ul,.lyson-product-content ul ul,.lyson-single__content ul ol,.lyson-product-content ul ol,.lyson-single__content ol ul,.lyson-product-content ol ul,.lyson-single__content ol ol,.lyson-product-content ol ol,
.lyson-wysiwyg ul ul,.lyson-wysiwyg ul ol,.lyson-wysiwyg ol ul,.lyson-wysiwyg ol ol{margin:6px 0}
.lyson-term-content li,.lyson-term-description li,.lyson-single__content li,.lyson-product-content li,.lyson-wysiwyg li{margin-bottom:6px}
.lyson-term-content dl,.lyson-term-description dl,.lyson-single__content dl,.lyson-product-content dl,.lyson-wysiwyg dl{margin:0 0 14px}
.lyson-term-content dt,.lyson-term-description dt,.lyson-single__content dt,.lyson-product-content dt,.lyson-wysiwyg dt{font-weight:700}
.lyson-term-content dd,.lyson-term-description dd,.lyson-single__content dd,.lyson-product-content dd,.lyson-wysiwyg dd{margin:0 0 10px 22px;color:var(--lyson-muted)}

.lyson-term-content a,.lyson-term-description a,.lyson-single__content a,.lyson-product-content a,.lyson-wysiwyg a{color:var(--lyson-primary-dark);text-decoration:underline;text-underline-offset:2px}
.lyson-term-content a:hover,.lyson-term-description a:hover,.lyson-single__content a:hover,.lyson-product-content a:hover,.lyson-wysiwyg a:hover{color:var(--lyson-primary)}
/* Riêng link trong nội dung mô tả trang chi tiết SẢN PHẨM và trang chi tiết BÀI VIẾT — bỏ gạch chân (giữ nguyên gạch chân ở trang danh mục/wysiwyg khác, chỉ đổi màu khi hover). */
.lyson-product-content a,.lyson-single__content a{text-decoration:none;color:var(--lyson-primary-dark);font-weight:400}
.lyson-product-content a:hover,.lyson-single__content a:hover{text-decoration:none;color:var(--lyson-primary)}

.lyson-term-content blockquote,.lyson-term-description blockquote,.lyson-single__content blockquote,.lyson-product-content blockquote,.lyson-wysiwyg blockquote{margin:0 0 18px;padding:14px 20px;border-left:4px solid var(--lyson-primary);background:var(--lyson-bg-alt);color:var(--lyson-ink);font-style:italic;border-radius:0 var(--lyson-radius) var(--lyson-radius) 0}
.lyson-term-content blockquote p:last-child,.lyson-term-description blockquote p:last-child,.lyson-single__content blockquote p:last-child,.lyson-product-content blockquote p:last-child,.lyson-wysiwyg blockquote p:last-child{margin-bottom:0}
.lyson-term-content hr,.lyson-term-description hr,.lyson-single__content hr,.lyson-product-content hr,.lyson-wysiwyg hr{border:none;border-top:1px solid var(--lyson-border);margin:28px 0}

.lyson-term-content code,.lyson-term-description code,.lyson-single__content code,.lyson-product-content code,.lyson-wysiwyg code{background:var(--lyson-bg-alt);border-radius:4px;padding:.15em .4em;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.lyson-term-content pre,.lyson-term-description pre,.lyson-single__content pre,.lyson-product-content pre,.lyson-wysiwyg pre{background:var(--lyson-bg-alt);border-radius:var(--lyson-radius);padding:16px;overflow-x:auto;margin:0 0 18px}
.lyson-term-content pre code,.lyson-term-description pre code,.lyson-single__content pre code,.lyson-product-content pre code,.lyson-wysiwyg pre code{background:none;padding:0}

.lyson-term-content table,.lyson-term-description table,.lyson-single__content table,.lyson-product-content table,.lyson-wysiwyg table{width:100%;max-width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.92rem;display:block;overflow-x:auto}
.lyson-term-content th,.lyson-term-description th,.lyson-term-content td,.lyson-term-description td,.lyson-single__content th,.lyson-product-content th,.lyson-single__content td,.lyson-product-content td,.lyson-wysiwyg th,.lyson-wysiwyg td{border:1px solid var(--lyson-border);padding:10px 14px;text-align:left;vertical-align:top}
.lyson-term-content thead th,.lyson-term-description thead th,.lyson-single__content thead th,.lyson-product-content thead th,.lyson-wysiwyg thead th{background:var(--lyson-bg-alt);font-weight:700;color:var(--lyson-ink)}
.lyson-term-content tbody tr:nth-child(even),.lyson-term-description tbody tr:nth-child(even),.lyson-single__content tbody tr:nth-child(even),.lyson-product-content tbody tr:nth-child(even),.lyson-wysiwyg tbody tr:nth-child(even){background:var(--lyson-bg-alt)}
.lyson-term-content caption,.lyson-term-description caption,.lyson-single__content caption,.lyson-product-content caption,.lyson-wysiwyg caption{caption-side:top;text-align:left;font-weight:700;margin-bottom:8px}

.lyson-term-content img,.lyson-term-description img,.lyson-single__content img,.lyson-product-content img,.lyson-wysiwyg img{border-radius:var(--lyson-radius);max-width:100%;height:auto;display:block}
.lyson-term-content figure,.lyson-term-description figure,.lyson-single__content figure,.lyson-product-content figure,.lyson-wysiwyg figure{margin:0 0 20px}
.lyson-term-content figcaption,.lyson-term-description figcaption,.lyson-single__content figcaption,.lyson-product-content figcaption,.lyson-wysiwyg figcaption{font-size:.85rem;color:var(--lyson-muted);text-align:center;margin-top:8px}

/* Shortcode [caption] cũ của WordPress — render ra <div class="wp-caption" style="width:...px">
   với width CỐ ĐỊNH bằng inline style theo ảnh gốc (có thể rất lớn, VD 1290px),
   nên PHẢI ép max-width:100% !important mới thắng được inline style, nếu không
   sẽ tràn ra ngoài khung content trên layout hẹp (VD single blog có sidebar). */
.lyson-term-content .wp-caption,.lyson-term-description .wp-caption,.lyson-single__content .wp-caption,.lyson-product-content .wp-caption,.lyson-wysiwyg .wp-caption{max-width:100%!important;height:auto!important;margin:0 0 20px}
.lyson-term-content .wp-caption img,.lyson-term-description .wp-caption img,.lyson-single__content .wp-caption img,.lyson-product-content .wp-caption img,.lyson-wysiwyg .wp-caption img{max-width:100%;height:auto;border-radius:var(--lyson-radius);display:block;margin:0 auto}
.lyson-term-content .wp-caption-text,.lyson-term-description .wp-caption-text,.lyson-single__content .wp-caption-text,.lyson-product-content .wp-caption-text,.lyson-wysiwyg .wp-caption-text{font-size:.85rem;color:var(--lyson-muted);text-align:center;margin:8px 0 0;padding:0}
.lyson-term-content .wp-caption.alignnone,.lyson-term-description .wp-caption.alignnone,.lyson-single__content .wp-caption.alignnone,.lyson-product-content .wp-caption.alignnone,.lyson-wysiwyg .wp-caption.alignnone{margin-bottom:20px}
.lyson-term-content .wp-caption.alignleft,.lyson-term-description .wp-caption.alignleft,.lyson-single__content .wp-caption.alignleft,.lyson-product-content .wp-caption.alignleft,.lyson-wysiwyg .wp-caption.alignleft{float:left;margin:0 20px 14px 0}
.lyson-term-content .wp-caption.alignright,.lyson-term-description .wp-caption.alignright,.lyson-single__content .wp-caption.alignright,.lyson-product-content .wp-caption.alignright,.lyson-wysiwyg .wp-caption.alignright{float:right;margin:0 0 14px 20px}
.lyson-term-content .wp-caption.aligncenter,.lyson-term-description .wp-caption.aligncenter,.lyson-single__content .wp-caption.aligncenter,.lyson-product-content .wp-caption.aligncenter,.lyson-wysiwyg .wp-caption.aligncenter{margin-left:auto;margin-right:auto}

/* Ảnh/khối căn lề trái-phải-giữa KHÔNG có caption (class WordPress gắn thẳng
   lên <img>/<figure> khi chọn căn lề trong trình soạn thảo). */
.lyson-term-content img.alignleft,.lyson-term-description img.alignleft,.lyson-single__content img.alignleft,.lyson-product-content img.alignleft,.lyson-wysiwyg img.alignleft,
.lyson-term-content .alignleft > img,.lyson-term-description .alignleft > img,.lyson-single__content .alignleft > img,.lyson-product-content .alignleft > img,.lyson-wysiwyg .alignleft > img{float:left;margin:0 20px 14px 0}
.lyson-term-content img.alignright,.lyson-term-description img.alignright,.lyson-single__content img.alignright,.lyson-product-content img.alignright,.lyson-wysiwyg img.alignright,
.lyson-term-content .alignright > img,.lyson-term-description .alignright > img,.lyson-single__content .alignright > img,.lyson-product-content .alignright > img,.lyson-wysiwyg .alignright > img{float:right;margin:0 0 14px 20px}
.lyson-term-content img.aligncenter,.lyson-term-description img.aligncenter,.lyson-single__content img.aligncenter,.lyson-product-content img.aligncenter,.lyson-wysiwyg img.aligncenter{margin-left:auto;margin-right:auto}
.lyson-term-content .alignwide,.lyson-term-description .alignwide,.lyson-single__content .alignwide,.lyson-product-content .alignwide,.lyson-wysiwyg .alignwide,
.lyson-term-content .alignfull,.lyson-term-description .alignfull,.lyson-single__content .alignfull,.lyson-product-content .alignfull,.lyson-wysiwyg .alignfull{max-width:100%!important;width:100%!important;margin-left:0!important;margin-right:0!important}
.lyson-term-content iframe,.lyson-term-description iframe,.lyson-term-content video,.lyson-term-description video,.lyson-term-content embed,.lyson-term-description embed,
.lyson-single__content iframe,.lyson-product-content iframe,.lyson-single__content video,.lyson-product-content video,.lyson-single__content embed,.lyson-product-content embed,
.lyson-wysiwyg iframe,.lyson-wysiwyg video,.lyson-wysiwyg embed{max-width:100%;border-radius:var(--lyson-radius)}

.lyson-term-content > *:first-child,.lyson-term-description > *:first-child,.lyson-single__content > *:first-child,.lyson-product-content > *:first-child,.lyson-wysiwyg > *:first-child{margin-top:0}
.lyson-term-content > *:last-child,.lyson-term-description > *:last-child,.lyson-single__content > *:last-child,.lyson-product-content > *:last-child,.lyson-wysiwyg > *:last-child{margin-bottom:0}
.lyson-term-content::after,.lyson-term-description::after,.lyson-single__content::after,.lyson-product-content::after,.lyson-wysiwyg::after{content:"";display:table;clear:both}

/* Các khối "hộp" gắn thẳng trong nội dung bài viết (soạn tay trong content
   HTML của bài, KHÔNG phải template PHP) — trước đây style inline lặp lại ở
   từng bài, nay chuyển hẳn vào đây để chỉ cần gắn class, không cần lặp style
   inline nữa (đưa CSS đã dùng nguyên giá trị màu/khoảng cách cũ, không đổi
   giao diện hiện có):
     .lssk-tacgia    → hộp "Về tác giả" (viền xanh nhạt, nền trắng xanh)
     .lssk-buoctiep  → hộp "Bước tiếp theo/CTA" (viền + nền xanh lá nhạt)
     .lssk-tomtat    → hộp "Tóm tắt" (viền trái xanh dương, nền xanh dương nhạt) */
.lssk-tacgia{border:1px solid #dde6ee;border-radius:6px;padding:14px 16px;margin:24px 0;background:#fafcfe}
.lssk-buoctiep{border:1px solid #cfe6d4;background:#f4fbf6;border-radius:6px;padding:12px 16px;margin:20px 0}
.lssk-tomtat{border-left:4px solid #0a6ebd;background:#f3f8fc;padding:12px 16px;margin:0 0 20px}
.lssk-lienquan{border-top:1px solid #dde6ee;margin:24px 0;padding-top:12px}
.lssk-lienquan ul{margin:8px 0 0 18px}

/* ── Trang chủ: Hero ──
 * Nay hỗ trợ NHIỀU slide (quản lý ở menu "Slide trang chủ" trong wp-admin —
 * xem inc/cpt-slide.php + inc/hero-slider.php); tham khảo cách làm slide từ
 * theme lysonsaky-v7 (assets/css/style.min.css khối "HERO SLIDER"), đổi hết
 * sang tiền tố lyson-/biến CSS (--lyson-primary...) của theme này.
 * .lyson-hero--static = hero TĨNH mặc định (fallback khi CHƯA có slide nào
 * published) — GIỮ NGUYÊN ảnh nền placeholder cũ (assets/images/hero.jpg).
 */
.lyson-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--lyson-border);color:#fff}
.lyson-hero--static{
	background-image:linear-gradient(135deg,rgba(15,20,15,.15),rgba(15,20,15,.05)),url('../images/hero.jpg');
	background-size:cover;
	background-position:center;
}
.lyson-hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.6) 42%,rgba(10,20,10,.28) 100%)}
.lyson-hero__inner{position:relative;z-index:1;box-sizing:content-box;padding:64px clamp(20px,12vw,220px);max-width:760px}
.lyson-hero__title{font-size:2.1rem;line-height:1.25;font-weight:800;margin:0 0 16px;color:#fff}
.lyson-hero__desc{font-size:1.05rem;color:rgba(255,255,255,.86);margin:0 0 20px}
.lyson-hero__badges{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 26px;font-size:.88rem;font-weight:600;color:#fff}
.lyson-hero__badges li{display:flex;align-items:center;gap:6px}
.lyson-hero__badges li::before{content:"✓";display:inline-flex;color:#000;background:var(--lyson-primary);border-radius:50%;width:18px;height:18px;align-items:center;justify-content:center;font-size:.7rem}
.lyson-hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.lyson-hero__cta .lyson-btn svg{width:18px;height:18px}
.lyson-hero__cta .lyson-btn--outline{border-color:#fff;color:#fff}
.lyson-hero__cta .lyson-btn--outline:hover{background:var(--lyson-primary);border-color:var(--lyson-primary);color:#000}
.lyson-hero .lyson-eyebrow{color:var(--lyson-primary)}

/* ── Trang chủ: Hero SLIDER — nhiều slide, CSS+JS thuần không thư viện ngoài
   (xem khối "Hero slider" trong assets/js/main.js). ── */
.lyson-hero-slides{position:relative;overflow:hidden}
.lyson-hero-slide,.lyson-hero--static{position:relative;min-height:520px;background-size:cover;background-position:center;display:flex;align-items:center}
/* Chưa có JS chạy (hoặc JS lỗi): chỉ hiện slide đầu tiên, các slide sau ẩn hẳn. */
.lyson-hero-slide{display:none;transition:opacity .6s ease}
.lyson-hero-slide:first-child{display:flex}
/* JS đã khởi tạo xong (.js-ready): hiện TẤT CẢ slide (dùng opacity+position để
   crossfade mượt), slide không active nằm chồng lên nhau bằng position:absolute. */
.lyson-hero-slides.js-ready .lyson-hero-slide{display:flex; position:absolute; inset:0; opacity:0; pointer-events:none}
.lyson-hero-slides.js-ready .lyson-hero-slide.is-active{position:relative; opacity:1; pointer-events:auto; z-index:1}

.lyson-hero-slide--left .lyson-hero__inner{margin-left:0;margin-right:auto;text-align:left}
.lyson-hero-slide--center .lyson-hero__inner{margin:0 auto;text-align:center}
.lyson-hero-slide--right .lyson-hero__inner{margin-left:auto;margin-right:0;text-align:right}
.lyson-hero-slide--center .lyson-hero__cta{justify-content:center}
.lyson-hero-slide--right .lyson-hero__cta{justify-content:flex-end}

/* Nút Trước/Sau */
.lyson-hero-prev,.lyson-hero-next{
	position:absolute; top:50%; transform:translateY(-50%); z-index:10;
	width:44px; height:44px; border-radius:50%;
	background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.4);
	color:#fff; font-size:26px; line-height:1; font-family:serif;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer; transition:background .2s,border-color .2s; padding:0;
}
.lyson-hero-prev{left:16px}
.lyson-hero-next{right:16px}
.lyson-hero-prev:hover,.lyson-hero-next:hover{background:var(--lyson-primary);border-color:var(--lyson-primary);color:#000}

/* Chấm điều hướng */
.lyson-hero-dots{position:absolute;bottom:16px;left:0;right:0;z-index:10;display:flex;justify-content:center;gap:8px}
.lyson-hero-dot{width:10px;height:10px;border-radius:50%;padding:0;background:rgba(255,255,255,.45);border:none;cursor:pointer;transition:background .2s,transform .2s}
.lyson-hero-dot.is-active{background:#fff;transform:scale(1.25)}

@media (max-width:640px){
	.lyson-hero-slide,.lyson-hero--static{min-height:420px}
	.lyson-hero-prev,.lyson-hero-next{width:36px;height:36px;font-size:22px}
	.lyson-hero-prev{left:10px}
	.lyson-hero-next{right:10px}
}

/*
 * ── Trang chủ: khung section chung ──
 * CHỈ đặt padding TRÊN/DƯỚI (padding-block), KHÔNG dùng shorthand "padding:
 * 44px 0" như trước — shorthand đó vô tình reset luôn padding TRÁI/PHẢI về 0
 * mỗi khi class .lyson-section gắn CHUNG 1 thẻ với .lyson-container (VD:
 * khối "giới thiệu", "quy trình", "Tin tức" ở trang chủ — xem front-page.php),
 * vì cùng độ ưu tiên CSS nhưng .lyson-section định nghĩa SAU nên đè mất
 * padding trái/phải 20px của .lyson-container. Lỗi vô hình trên desktop (do
 * .lyson-container tự canh giữa bằng margin auto, thừa khoảng trống 2 bên
 * nên không nhận ra), nhưng LỘ RÕ trên di động (container chiếm trọn chiều
 * rộng màn hình, không còn margin auto để "che" mất padding trái/phải bị
 * mất) — đúng như phản ánh: nội dung dính sát mép trái/phải trên điện thoại.
 */
.lyson-section{padding-block:44px}

/* ── Trang chủ: dải nền tràn viền xen kẽ giữa các section (trắng/xám nhạt),
   tách bạch từng phần cho nổi bật hơn — cùng cách dải nền tối "Phối cảnh 3D"
   (.lyson-designs-band) đã làm: section full-bleed bọc ngoài, .lyson-container
   nằm trong để giữ chiều rộng nội dung. Padding dọc do .lyson-section (đặt
   trên chính div .lyson-container bên trong) đảm nhiệm, .lyson-band chỉ lo
   màu nền. ── */
.lyson-band--alt{background:var(--lyson-bg-alt)}

/* ── Trang chủ: 4 dịch vụ (USP) ── */
.lyson-usp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.lyson-usp-card{position:relative;overflow:hidden;padding:22px;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);background:#fff;transition:box-shadow .2s,transform .2s,border-color .2s}
.lyson-usp-card:hover{border-color:var(--lyson-primary);box-shadow:0 12px 28px rgba(0,0,0,.08);transform:translateY(-4px)}
.lyson-usp-card__icon{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:14px;border-radius:14px;background:rgba(145,192,62,.14);color:var(--lyson-primary-dark);transition:background .2s,color .2s}
.lyson-usp-card:hover .lyson-usp-card__icon{background:var(--lyson-primary);color:#fff}
.lyson-usp-card__num{position:absolute;top:0;right:14px;font-size:2.6rem;font-weight:800;line-height:1;color:var(--lyson-border);pointer-events:none;user-select:none}
.lyson-usp-card h3{position:relative;z-index:1;margin:0 0 8px;font-size:1.05rem}
.lyson-usp-card p{position:relative;z-index:1;margin:0;color:var(--lyson-muted);font-size:.9rem}

/* ── Trang chủ: giới thiệu (2 cột — chữ + ảnh xưởng sản xuất thật, cùng
   ảnh dùng ở trang Giới thiệu, xem page-gioi-thieu.php) ── */
.lyson-about__body{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start}
.lyson-about__text p{color:var(--lyson-ink)}
.lyson-about__text p + p{color:var(--lyson-muted)}
.lyson-about__media{margin:0;border-radius:var(--lyson-radius);overflow:hidden;aspect-ratio:4/3}
.lyson-about__media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){
	.lyson-about__body{grid-template-columns:1fr}
	.lyson-about__media{order:-1}
}

/* ── Trang chủ: 6 danh mục (dạng thẻ ảnh — ảnh minh hoạ tạm/placeholder cho
   từng danh mục, đặt trong assets/images/, thay bằng ảnh thật khi có) ── */
.lyson-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.lyson-cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.lyson-cat-grid{grid-template-columns:1fr}}
.lyson-cat-tile{display:block;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);color:var(--lyson-ink);background:#fff;overflow:hidden;transition:.2s}
.lyson-cat-tile:hover{border-color:var(--lyson-primary);box-shadow:0 12px 28px rgba(0,0,0,.08);transform:translateY(-2px);color:var(--lyson-ink)}
.lyson-cat-tile__thumb{position:relative;aspect-ratio:4/3;background:var(--lyson-bg-alt);overflow:hidden}
.lyson-cat-tile__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.lyson-cat-tile:hover .lyson-cat-tile__thumb img{transform:scale(1.06)}
.lyson-cat-tile__thumb img.lyson-cat-tile__fallback{object-fit:contain;padding:22%;background:#eef1ee;opacity:.75}
/*
 * Tên danh mục + số lượng sản phẩm + nút "Xem chi tiết" gộp chung 1 khối,
 * đặt GIỮA ảnh (trước đây tên/số lượng nằm riêng bên dưới ảnh). Khối này
 * LUÔN hiển thị (không chỉ khi hover) vì là thông tin chính của mỗi ô, có
 * lớp phủ tối để chữ trắng luôn đọc rõ trên mọi ảnh nền sáng/tối khác nhau.
 * Lúc hover: ẩn tên + số lượng (.lyson-cat-tile__name), chỉ còn lại nút
 * "Xem chi tiết" hiện rõ kèm hiệu ứng trượt lên.
 */
.lyson-cat-tile__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;background:linear-gradient(180deg,rgba(15,20,15,.15),rgba(15,20,15,.55))}
.lyson-cat-tile__info{display:flex;flex-direction:column;align-items:center;gap:6px}
.lyson-cat-tile__name{display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .2s}
.lyson-cat-tile:hover .lyson-cat-tile__name,.lyson-cat-tile:focus-visible .lyson-cat-tile__name{opacity:0}
.lyson-cat-tile__label{display:inline-flex;align-items:center;padding:9px 18px;border-radius:50px;background:#fff;color:var(--lyson-primary-dark);font-weight:700;font-size:.95rem;margin:0}
.lyson-cat-tile__count{font-size:.82rem;color:#fff;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.lyson-cat-tile__more{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:50px;background:#fff;color:var(--lyson-primary-dark);font-size:.86rem;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.lyson-cat-tile:hover .lyson-cat-tile__more,.lyson-cat-tile:focus-visible .lyson-cat-tile__more{opacity:1;transform:translateY(0)}
@media (hover:none){
	/* Thiết bị cảm ứng không có hover thật — hiện sẵn nút để luôn bấm được. */
	.lyson-cat-tile__more{opacity:1;transform:translateY(0)}
}

/* ── Trang chủ: CTA báo giá ── */
.lyson-cta-quote{background:var(--lyson-bg-alt);border-radius:var(--lyson-radius)}
.lyson-cta-quote__box{padding:36px;max-width:640px}
.lyson-cta-quote__box p{color:var(--lyson-muted);margin:0 0 18px}

@media (max-width:640px){
	.lyson-hero__title{font-size:1.6rem}
	.lyson-cta-quote__box{padding:24px}
}

/* ── Trang chủ: khối section mới (danh mục sản phẩm / công trình tiêu biểu) —
   tiêu đề lớn bên trái + nút "Xem tất cả…" bên phải cùng hàng. ── */
.lyson-home-block__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.lyson-home-block__title{font-size:1.9rem;font-weight:800;margin:0;line-height:1.25}
.lyson-home-block__title em{color:var(--lyson-primary-dark);font-style:normal}
.lyson-home-block__desc{color:var(--lyson-muted);margin:10px 0 0;max-width:560px}
.lyson-home-block--center{text-align:center}
/* .lyson-home-block__head dùng justify-content:space-between để hỗ trợ tiêu
   đề trái + nút "Xem tất cả" phải — nhưng khi chỉ có 1 phần tử con (biến thể
   --center, không có nút bên phải), space-between đẩy nó về sát trái thay vì
   canh giữa. Ép lại justify-content:center riêng cho biến thể này. */
.lyson-home-block--center .lyson-home-block__head{justify-content:center}
.lyson-home-block--center .lyson-home-block__title{margin:0 auto 8px}
@media (max-width:640px){.lyson-home-block__title{font-size:1.5rem}}

/* Card kiểu mới (feature): thêm mô tả ngắn + hàng nút đôi cuối card, dựa
   trên khung .lyson-card sẵn có. .lyson-card__foot dùng chung cho MỌI card
   (không chỉ --feature) — card sản phẩm (.lyson-card--product) cũng dùng
   cùng kiểu chân card: link chữ "Xem chi tiết →" + nút pill "Liên hệ báo
   giá", thay cho 2 nút outline bằng nhau trước đây. */
.lyson-card--feature{position:relative}
.lyson-card__ribbon{position:absolute;top:12px;left:12px;z-index:2;background:var(--lyson-primary);color:#000;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:lowercase}
.lyson-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--lyson-border)}
.lyson-card__more{font-weight:700;color:var(--lyson-primary-dark);font-size:.86rem;white-space:nowrap}
.lyson-pill-btn{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:rgba(145,192,62,.14);color:var(--lyson-primary-dark);font-size:.76rem;font-weight:700;white-space:nowrap}
.lyson-pill-btn:hover{background:var(--lyson-primary);color:#000}
.lyson-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--lyson-bg-alt);border:1px solid var(--lyson-border);font-size:.72rem;font-weight:700;color:var(--lyson-ink);white-space:nowrap}

/* ── Trang chủ: 5 bước quy trình ── */
.lyson-process__list{list-style:none;padding:0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;margin:36px 0 0;text-align:center}
.lyson-process__list::before{content:"";position:absolute;top:25px;left:9%;right:9%;height:2px;background:var(--lyson-border);z-index:0}
.lyson-process__step{flex:1 1 170px;position:relative;z-index:1}
.lyson-process__num{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 14px;border-radius:50%;border:2px solid var(--lyson-primary);background:#000;color:#fff;font-weight:800;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
.lyson-process__step:hover .lyson-process__num{background:var(--lyson-primary);border-color:var(--lyson-primary-dark);color:#fff;box-shadow:0 0 0 6px rgba(145,192,62,.16);transform:scale(1.08)}
.lyson-process__step h3{margin:0 0 6px;font-size:1rem;transition:color .2s}
.lyson-process__step:hover h3{color:var(--lyson-primary-dark)}
.lyson-process__step p{margin:0;color:var(--lyson-muted);font-size:.85rem}
@media (max-width:860px){
	.lyson-process__list{flex-direction:column;text-align:left;gap:22px}
	.lyson-process__list::before{display:none}
	.lyson-process__step{display:flex;gap:16px;text-align:left}
	.lyson-process__num{margin:0;flex:none}
}

/* ── Trang chủ: dải nền tối "Thiết kế tiêu biểu" (tràn viền, phá khung
   .lyson-container — xem front-page.php: đóng/mở lại div bao ngoài quanh
   section này để nền chiếm trọn chiều rộng màn hình). ── */
.lyson-designs-band{background:#0b1a2c;color:#fff;padding:56px 0;margin:44px 0}
.lyson-designs-band .lyson-home-block__title{color:#fff}
.lyson-designs-band .lyson-home-block__desc{color:rgba(255,255,255,.68)}
.lyson-designs-band .lyson-btn--outline{border-color:rgba(255,255,255,.4);color:#fff}
.lyson-designs-band .lyson-btn--outline:hover{background:#fff;color:#000;border-color:#fff}
.lyson-designs-band .lyson-card{background:#132538;border-color:rgba(255,255,255,.12)}
.lyson-designs-band .lyson-card__title a{color:#fff}
.lyson-designs-band .lyson-card__excerpt,.lyson-designs-band .lyson-card__meta{color:rgba(255,255,255,.65)}
.lyson-designs-band .lyson-card__eyebrow{color:var(--lyson-primary)}
.lyson-designs-band .lyson-card__more{color:var(--lyson-primary)}
.lyson-designs-band .lyson-card--feature .lyson-card__foot{border-top-color:rgba(255,255,255,.14)}

/* ── Trang chủ: CTA "Bắt đầu dự án lab" ── */
.lyson-cta-band{background:linear-gradient(120deg,#0b1a2c,#16321f);color:#fff;border-radius:var(--lyson-radius);padding:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:8px 0 44px}
.lyson-cta-band h2{margin:0 0 8px;font-size:1.5rem}
.lyson-cta-band p{margin:0;color:rgba(255,255,255,.75)}
.lyson-cta-band__actions{display:flex;gap:12px;flex-wrap:wrap}
.lyson-cta-band .lyson-btn--outline{border-color:rgba(255,255,255,.5);color:#fff}
.lyson-cta-band .lyson-btn--outline:hover{background:#fff;color:#000}
@media (max-width:640px){.lyson-cta-band{padding:26px}}

/* ── Trang chủ/trang dịch vụ: eyebrow + tagcloud ── */
.lyson-eyebrow{font-size:.85rem;font-weight:700;color:var(--lyson-primary-dark);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
/* Biến thể "pill" (nhãn tròn có chấm) dùng cho các khối mới ở trang chủ
   (danh mục sản phẩm, quy trình, thiết kế, dự án) — xem .lyson-home-block bên dưới. */
.lyson-eyebrow--pill{display:inline-flex;align-items:center;gap:7px;padding:5px 14px 5px 10px;border-radius:999px;background:rgba(145,192,62,.14);text-transform:lowercase;font-size:.8rem}
.lyson-eyebrow--pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lyson-primary-dark);flex:none}
.lyson-eyebrow--light{background:rgba(255,255,255,.12);color:#fff}
.lyson-eyebrow--light::before{background:var(--lyson-primary)}
/* CSS riêng CHỈ áp dụng cho các nhãn "pill" ở TRANG CHỦ (body.home — WordPress
   tự thêm class này cho trang đang đặt làm Trang chủ, xem is_front_page()):
   thêm viền quanh nhãn + chữ IN HOA — khác biệt riêng cho trang chủ, không
   ảnh hưởng .lyson-eyebrow--pill nếu class này còn được dùng ở trang khác. */
body.home .lyson-eyebrow.lyson-eyebrow--pill{border:1px solid var(--lyson-primary);text-transform:uppercase}
body.home .lyson-eyebrow.lyson-eyebrow--pill.lyson-eyebrow--light{border-color:rgba(255,255,255,.45)}
.lyson-tagcloud-label{font-weight:600;margin:22px 0 8px;font-size:.9rem}
.lyson-tagcloud{display:flex;flex-wrap:wrap;gap:8px}
.lyson-tagcloud a,.lyson-tagcloud span{display:inline-block;padding:6px 14px;border-radius:50px;background:#fff;border:1px solid var(--lyson-border);font-size:.82rem;font-weight:600;color:var(--lyson-ink)}
.lyson-tagcloud a:hover{background:var(--lyson-primary);border-color:var(--lyson-primary);color:#000}
.lyson-tagcloud span{color:var(--lyson-muted);cursor:default}

/* ── Trang Giới thiệu ── */
.lyson-trust-badges{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 26px;padding:0}
.lyson-trust-badges li{display:flex;align-items:center;gap:7px;padding:7px 14px 7px 10px;border-radius:50px;background:var(--lyson-bg-alt);border:1px solid var(--lyson-border);font-size:.84rem;font-weight:600;color:var(--lyson-ink)}
.lyson-trust-badges svg{width:16px;height:16px;color:var(--lyson-primary-dark);flex:none}
.lyson-about-lead{color:var(--lyson-muted);margin:-8px 0 18px}

/* --lyson-stat-cols: số ô thực tế đang hiển thị (đặt inline ở front-page.php
   / page-gioi-thieu.php theo count() của mảng — 1 vài ô có thể bị Super
   Admin tắt ở admin, xem lyson_get_lab_stats()) — mặc định 4 nếu không đặt. */
.lyson-about-stats{display:grid;grid-template-columns:repeat(var(--lyson-stat-cols,4),1fr);gap:16px;margin:8px 0 40px}
@media (max-width:760px){.lyson-about-stats{grid-template-columns:repeat(min(2,var(--lyson-stat-cols,4)),1fr)}}
.lyson-about-stats__item{text-align:center;padding:20px 10px;border-radius:var(--lyson-radius);background:var(--lyson-bg-alt);border:1px solid var(--lyson-border)}
.lyson-about-stats__count{display:block;font-size:1.7rem;font-weight:800;color:var(--lyson-primary-dark)}
.lyson-about-stats__label{display:block;margin-top:4px;font-size:.8rem;color:var(--lyson-muted);line-height:1.4}

/* ── Dải số liệu nổi bật (nền đen thương hiệu) ── */
.lyson-stats-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--lyson-ink);border-radius:var(--lyson-radius);padding:30px 20px;margin:8px 0 40px}
.lyson-stats-bar__item{text-align:center;padding:0 12px;border-left:1px solid rgba(255,255,255,.16)}
.lyson-stats-bar__item:first-child{border-left:none}
.lyson-stats-bar__count{display:block;font-size:2.1rem;font-weight:800;color:var(--lyson-primary);line-height:1}
.lyson-stats-bar__label{display:block;margin-top:6px;font-size:.86rem;color:#d1d5db}
@media (max-width:760px){
	.lyson-stats-bar{grid-template-columns:repeat(2,1fr);row-gap:22px}
	.lyson-stats-bar__item:nth-child(3){border-left:none}
}
@media (max-width:420px){
	.lyson-stats-bar{grid-template-columns:1fr;row-gap:18px}
	.lyson-stats-bar__item{border-left:none;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
	.lyson-stats-bar__item:first-child{padding-top:0;border-top:none}
}

/* ── "Cam kết của chúng tôi" — khối giá trị cốt lõi ── */
/* margin do .lyson-page-band đảm nhiệm (xem page-gioi-thieu.php — section
   này nằm trong dải nền tràn viền .lyson-page-band) */
.lyson-values{margin:0}
.lyson-values__head{text-align:center;max-width:560px;margin:0 auto 28px}
.lyson-values__badge{display:inline-block;padding:6px 16px;border-radius:50px;background:#eef7df;color:var(--lyson-primary-dark);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.lyson-values__title{margin:0;font-size:1.7rem;font-weight:800}
.lyson-values__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){.lyson-values__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.lyson-values__grid{grid-template-columns:1fr}}
.lyson-values__card{padding:24px;border:1px solid var(--lyson-border);border-top:3px solid transparent;border-radius:var(--lyson-radius);background:#fff;box-shadow:0 2px 10px rgba(15,20,15,.04);transition:.2s}
.lyson-values__card:hover{border-top-color:var(--lyson-primary);box-shadow:0 10px 24px rgba(15,20,15,.08);transform:translateY(-2px)}
.lyson-values__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:#eef7df;color:var(--lyson-primary-dark);margin-bottom:14px;transition:.2s}
.lyson-values__icon svg{width:24px;height:24px}
.lyson-values__card:hover .lyson-values__icon{background:var(--lyson-primary);color:#000}
.lyson-values__card h3{margin:0 0 8px;font-size:1.05rem}
.lyson-values__card p{margin:0;color:var(--lyson-muted);font-size:.88rem;line-height:1.55}

.lyson-about-factory{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin:20px 0 40px;align-items:start}
@media (max-width:760px){.lyson-about-factory{grid-template-columns:1fr}}
.lyson-about-factory__figure{margin:0}
.lyson-about-factory__img{width:100%;border-radius:var(--lyson-radius);border:1px solid var(--lyson-border)}
.lyson-about-factory__figure figcaption{margin-top:8px;font-size:.82rem;color:var(--lyson-muted);text-align:center}

.lyson-about-info{margin:8px 0 32px;padding:22px 24px;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);background:var(--lyson-bg-alt)}
.lyson-about-info__name{font-weight:700;margin:0 0 12px;font-size:1.02rem}
.lyson-about-info .lyson-contact-list{margin:0 0 12px}
.lyson-about-cta{margin-top:32px}

/* ── Trang Liên hệ ── */
.lyson-contact-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:16px}
@media (max-width:860px){.lyson-contact-layout{grid-template-columns:1fr}}
.lyson-contact-list{margin:16px 0 24px;display:flex;flex-direction:column;gap:14px}
.lyson-contact-list li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem}
.lyson-contact-list svg{flex:none;width:20px;height:20px;color:var(--lyson-primary-dark);margin-top:2px}
.lyson-contact-map iframe{width:100%;border-radius:var(--lyson-radius);display:block}
.lyson-contact-form > p{color:var(--lyson-muted)}

/*
 * ── Form liên hệ — CSS cho Contact Form 7 (form bên thứ 3 đang dùng thật) ──
 * CF7 chỉ xuất ra markup thô (.wpcf7-form, .wpcf7-form-control...), không tự
 * có style — mặc định input rất nhỏ (theo thuộc tính size="") và không có
 * khoảng cách giữa các dòng nên nhìn xấu/vỡ layout. Toàn bộ style dưới đây
 * CHỈ áp dụng bên trong khối .lyson-contact-form (trang Liên hệ), không ảnh
 * hưởng các form CF7 khác trên site nếu có. Nếu cấu trúc field trong form
 * (nhãn/label) khác với giả định ở đây, gửi ảnh chụp hoặc export nội dung
 * form (Contact → form #83 → tab Form) để chỉnh chính xác hơn.
 */
.lyson-contact-form .wpcf7-form{margin-top:8px}
.lyson-contact-form .wpcf7-form p{margin:0 0 18px;color:var(--lyson-ink)}
.lyson-contact-form .wpcf7-form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.lyson-contact-form .wpcf7-form-control-wrap{display:block;position:relative}
.lyson-contact-form .wpcf7-form-control{display:block;width:100%;font-family:inherit;font-size:.95rem;color:var(--lyson-ink);background:var(--lyson-bg);border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);padding:11px 14px;transition:border-color .15s,box-shadow .15s}
.lyson-contact-form textarea.wpcf7-form-control{min-height:120px;resize:vertical}
.lyson-contact-form select.wpcf7-form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;cursor:pointer}
.lyson-contact-form .wpcf7-form-control:focus{outline:none;border-color:var(--lyson-primary);box-shadow:0 0 0 3px rgba(145,192,62,.18)}
.lyson-contact-form .wpcf7-form-control::placeholder{color:var(--lyson-muted)}
.lyson-contact-form .wpcf7-acceptance label{display:flex;align-items:flex-start;gap:8px;font-weight:400}
.lyson-contact-form .wpcf7-acceptance input{margin-top:4px;flex:none}
.lyson-contact-form .wpcf7-not-valid-tip{display:block;color:#dc2626;font-size:.8rem;margin-top:6px}
.lyson-contact-form .wpcf7-form-control.wpcf7-not-valid{border-color:#dc2626}
.lyson-contact-form input.wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;width:auto;background:var(--lyson-primary);color:#000;font-weight:700;font-size:.95rem;border:2px solid transparent;border-radius:6px;padding:12px 30px;cursor:pointer;transition:background .15s,color .15s}
.lyson-contact-form input.wpcf7-submit:hover{background:var(--lyson-primary-dark);color:#fff}
.lyson-contact-form .wpcf7-spinner{margin:0 0 0 10px;vertical-align:middle}
.lyson-contact-form .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border:1px solid var(--lyson-border);border-left:4px solid var(--lyson-muted);border-radius:var(--lyson-radius);font-size:.88rem;color:var(--lyson-ink)}
.lyson-contact-form form.sent .wpcf7-response-output{border-left-color:var(--lyson-primary);background:rgba(145,192,62,.08)}
.lyson-contact-form form.failed .wpcf7-response-output,
.lyson-contact-form form.spam .wpcf7-response-output,
.lyson-contact-form form.aborted .wpcf7-response-output{border-left-color:#dc2626;background:rgba(220,38,38,.06)}
.lyson-contact-form form.invalid .wpcf7-response-output{border-left-color:#d97706;background:rgba(217,119,6,.06)}

/*
 * ── Form [crm_lead_form] — form THẬT đang chạy trên trang Liên hệ ──
 * Kiểm tra trực tiếp trên trình duyệt (localhost) cho thấy site KHÔNG dùng
 * Contact Form 7 (plugin CF7 chưa active) mà đang fallback về shortcode
 * [crm_lead_form] (xem add_shortcode trong inc/crm-lead-form.php) — markup
 * gốc rất đơn giản (<form class="crm-contact-form"><p><label>...) và không
 * có style riêng nên nhìn xấu/vỡ layout. CSS dưới đây style KHÔNG PHỤ THUỘC
 * page template nào (áp dụng bất kỳ đâu chèn shortcode [crm_lead_form]).
 */
.crm-contact-form p{margin:0 0 18px}
.crm-contact-form label{display:block;font-weight:600;font-size:.9rem;color:var(--lyson-ink)}
.crm-contact-form input,
.crm-contact-form select,
.crm-contact-form textarea{display:block;width:100%;margin-top:8px;font-family:inherit;font-weight:400;font-size:.95rem;color:var(--lyson-ink);background:var(--lyson-bg);border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);padding:11px 14px;transition:border-color .15s,box-shadow .15s}
.crm-contact-form textarea{min-height:110px;resize:vertical}
.crm-contact-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;cursor:pointer}
.crm-contact-form input:focus,
.crm-contact-form select:focus,
.crm-contact-form textarea:focus{outline:none;border-color:var(--lyson-primary);box-shadow:0 0 0 3px rgba(145,192,62,.18)}
.crm-contact-form button[type="submit"]{display:inline-flex;align-items:center;justify-content:center;background:var(--lyson-primary);color:#000;font-weight:700;font-size:.95rem;border:2px solid transparent;border-radius:6px;padding:12px 30px;cursor:pointer;transition:background .15s,color .15s}
.crm-contact-form button[type="submit"]:hover{background:var(--lyson-primary-dark);color:#fff}

/* ── Trang Liên hệ — Mẫu 2 (page-templates/lien-he-mau-2.php) ── */
.lyson-contact-alt__intro{color:var(--lyson-muted);margin:8px 0 0}
.lyson-contact-alt__layout{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;margin-top:16px;align-items:start}
@media (max-width:860px){.lyson-contact-alt__layout{grid-template-columns:1fr}}
.lyson-contact-alt__cards{list-style:none;margin:16px 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}
.lyson-contact-alt__card{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);background:var(--lyson-bg-alt)}
.lyson-contact-alt__icon{flex:none;width:38px;height:38px;border-radius:50%;background:var(--lyson-primary);color:#fff;display:flex;align-items:center;justify-content:center}
.lyson-contact-alt__icon svg{width:19px;height:19px}
.lyson-contact-alt__card-body{display:flex;flex-direction:column;gap:2px;font-size:.92rem}
.lyson-contact-alt__card-body strong{color:var(--lyson-ink)}
.lyson-contact-alt__card-body a{color:var(--lyson-primary-dark);font-weight:600;text-decoration:none}
.lyson-contact-alt__card-body a:hover{text-decoration:underline}
.lyson-contact-alt__social{display:flex;gap:10px;margin-bottom:20px}
.lyson-contact-alt__social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--lyson-bg-alt);border:1px solid var(--lyson-border);color:var(--lyson-primary-dark);transition:background .15s,color .15s}
.lyson-contact-alt__social a:hover{background:var(--lyson-primary);color:#fff;border-color:var(--lyson-primary)}
.lyson-contact-alt__social svg{width:18px;height:18px}
.lyson-contact-alt__map iframe{width:100%;border-radius:var(--lyson-radius);display:block}
.lyson-contact-alt__form-box{padding:26px 28px;border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);background:var(--lyson-bg);box-shadow:0 8px 24px rgba(0,0,0,.05)}
.lyson-contact-alt__form-box .lyson-section-title{margin-top:0}
.lyson-contact-alt__form-desc{color:var(--lyson-muted);margin:0 0 18px}
.lyson-contact-alt__content{margin-top:32px}

/*
 * ── Trang Liên hệ — mẫu MẶC ĐỊNH (page-lien-he.php), bản 3 ──
 * 2 bản trước (khối thẻ trắng kiểu Mẫu 2, và khối tối/sáng ghép đôi) đều bị
 * chê xấu — bản này đổi hẳn hướng: nền sáng toàn trang (bỏ khối nền tối),
 * không dùng card/viền lặp lại. Bố cục: dải "liên hệ nhanh" ngay dưới tiêu
 * đề, 2 cột form + địa chỉ ngăn cách bằng 1 đường kẻ mảnh (không phải khối
 * hộp), bản đồ full-width có thẻ thông tin nổi đè lên góc trái.
 */
.lyson-contact-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,rgba(145,192,62,.12),rgba(145,192,62,.03));border:1px solid var(--lyson-border);border-radius:var(--lyson-radius);padding:28px 32px;margin:20px 0 40px}
.lyson-contact-hero__desc{margin:0;max-width:520px;color:var(--lyson-muted);line-height:1.65}
.lyson-contact-hero__quick{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:28px}
.lyson-contact-hero__quick li{display:flex;align-items:center;gap:10px;padding-right:28px;border-right:1px solid var(--lyson-border)}
.lyson-contact-hero__quick li:last-child{padding-right:0;border-right:none}
.lyson-contact-hero__quick svg{flex:none;width:22px;height:22px;color:var(--lyson-primary)}
.lyson-contact-hero__label{display:block;font-size:.76rem;color:var(--lyson-muted);margin-bottom:2px}
.lyson-contact-hero__quick a{font-weight:700;color:var(--lyson-ink)}
.lyson-contact-hero__quick a:hover{color:var(--lyson-primary-dark)}
@media (max-width:760px){.lyson-contact-hero{flex-direction:column;align-items:flex-start;padding:24px}}

.lyson-contact-main{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;margin-bottom:44px}
@media (max-width:860px){.lyson-contact-main{grid-template-columns:1fr;gap:0}}
.lyson-contact-main__form .lyson-section-title{margin-top:0}
.lyson-contact-main__form-desc{color:var(--lyson-muted);margin:8px 0 24px}
.lyson-contact-main__info{border-left:1px solid var(--lyson-border);padding-left:40px}
.lyson-contact-main__info .lyson-section-title{margin-top:0}
@media (max-width:860px){.lyson-contact-main__info{border-left:none;padding-left:0;padding-top:36px;margin-top:36px;border-top:1px solid var(--lyson-border)}}
.lyson-contact-main__addr{list-style:none;margin:20px 0 26px;padding:0;display:flex;flex-direction:column;gap:20px}
.lyson-contact-main__addr li{display:flex;align-items:flex-start;gap:14px}
.lyson-contact-main__addr svg{flex:none;width:20px;height:20px;color:var(--lyson-primary);margin-top:2px}
.lyson-contact-main__addr strong{display:block;color:var(--lyson-ink);font-size:.9rem;margin-bottom:2px}
.lyson-contact-main__addr span{color:var(--lyson-muted);font-size:.92rem;line-height:1.55}
.lyson-contact-main__addr a{color:var(--lyson-ink);font-weight:600}
.lyson-contact-main__addr a:hover{color:var(--lyson-primary-dark)}
.lyson-contact-main__social{display:flex;gap:10px;margin-top:4px}
.lyson-contact-main__social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--lyson-bg-alt);color:var(--lyson-primary-dark);transition:background .15s,color .15s}
.lyson-contact-main__social a:hover{background:var(--lyson-primary);color:#fff}
.lyson-contact-main__social svg{width:17px;height:17px}

.lyson-contact-map{position:relative;border-radius:var(--lyson-radius);overflow:hidden;margin-bottom:8px}
.lyson-contact-map iframe{width:100%;height:340px;display:block;border:0}
.lyson-contact-map__card{position:absolute;left:24px;top:24px;max-width:300px;background:var(--lyson-bg);border-radius:var(--lyson-radius);box-shadow:0 10px 30px rgba(0,0,0,.14);padding:20px 24px}
.lyson-contact-map__card strong{display:block;color:var(--lyson-ink);font-size:.95rem;margin-bottom:6px}
.lyson-contact-map__card span{display:block;color:var(--lyson-muted);font-size:.85rem;line-height:1.5;margin-bottom:12px}
.lyson-contact-map__card a{display:inline-flex;align-items:center;gap:6px;color:var(--lyson-primary-dark);font-weight:700;font-size:.88rem}
.lyson-contact-map__card a svg{width:14px;height:14px}
.lyson-contact-map__card a:hover{color:var(--lyson-primary)}
@media (max-width:600px){.lyson-contact-map__card{position:static;max-width:none;box-shadow:none;border:1px solid var(--lyson-border);margin-bottom:16px}}

/* Tabs chọn địa chỉ (Trụ sở chính / Văn phòng giao dịch / Xưởng) phía trên
   bản đồ ở trang Liên hệ — dùng chung page-lien-he.php và
   page-templates/lien-he-mau-2.php, xem .lyson-contact-map-group ở đó. */
.lyson-contact-map-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.lyson-contact-map-tabs__btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--lyson-border);border-radius:999px;background:var(--lyson-bg);color:var(--lyson-muted);font-size:.88rem;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.lyson-contact-map-tabs__btn svg{width:16px;height:16px;flex:none}
.lyson-contact-map-tabs__btn:hover{border-color:var(--lyson-primary);color:var(--lyson-ink)}
.lyson-contact-map-tabs__btn.is-active{background:var(--lyson-primary);border-color:var(--lyson-primary);color:#fff}

/* ── Quy trình làm việc dạng timeline (trang Giới thiệu) ── */
/* margin do .lyson-page-band đảm nhiệm (xem page-gioi-thieu.php — khối
   quy trình nằm trong dải nền tràn viền .lyson-page-band) */
.lyson-process-timeline{display:flex;justify-content:space-between;position:relative;margin:0}
.lyson-process-timeline::before{content:"";position:absolute;top:27px;left:10%;right:10%;height:2px;background:var(--lyson-primary);z-index:0}
.lyson-process-timeline__item{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px}
.lyson-process-timeline__num{display:inline-flex;align-items:center;justify-content:center;flex:none;width:54px;height:54px;border-radius:50%;background:var(--lyson-ink);border:3px solid var(--lyson-primary);color:var(--lyson-primary);font-weight:800;font-size:.92rem;letter-spacing:.02em;margin-bottom:14px;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
/* Hiệu ứng hover từng bước — giống hệt khối "5 bước" ở trang chủ
   (.lyson-process__step:hover .lyson-process__num) để nhất quán trong theme. */
.lyson-process-timeline__item:hover .lyson-process-timeline__num{background:var(--lyson-primary);border-color:var(--lyson-primary-dark);color:#000;box-shadow:0 0 0 6px rgba(145,192,62,.16);transform:scale(1.08)}
.lyson-process-timeline__item:hover .lyson-process-timeline__title{color:var(--lyson-primary-dark)}
.lyson-process-timeline__content{flex:1;min-width:0}
.lyson-process-timeline__title{margin:0 0 6px;font-size:.98rem;font-weight:700;color:var(--lyson-ink);transition:color .2s}
.lyson-process-timeline__desc{margin:0;font-size:.84rem;color:var(--lyson-muted);line-height:1.5}
.lyson-process-timeline__more{color:var(--lyson-muted)}
@media (max-width:760px){
	.lyson-process-timeline{flex-direction:column}
	.lyson-process-timeline::before{display:none}
	.lyson-process-timeline__item{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding:0 0 26px}
	.lyson-process-timeline__item:last-child{padding-bottom:0}
	.lyson-process-timeline__item:not(:last-child)::after{content:"";position:absolute;left:26px;top:54px;bottom:0;width:2px;background:var(--lyson-primary)}
	.lyson-process-timeline__num{margin-bottom:0}
}

/* ── "Năng lực & Cơ sở hạ tầng" (trang Giới thiệu) ── */
/* margin do .lyson-page-band đảm nhiệm (xem page-gioi-thieu.php — section
   này nằm trong dải nền tràn viền .lyson-page-band) */
.lyson-capacity{margin:0}
.lyson-capacity__head{text-align:center;margin:0 auto 28px}
.lyson-capacity__title{margin:0 0 12px;font-size:1.5rem;font-weight:800;letter-spacing:.02em;color:var(--lyson-primary-dark);text-transform:uppercase}
.lyson-capacity__title::after{content:"";display:block;width:64px;height:3px;background:var(--lyson-primary);margin:12px auto 0;border-radius:2px}
.lyson-capacity__subtitle{margin:0;color:var(--lyson-muted)}
.lyson-capacity__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.lyson-capacity__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.lyson-capacity__grid{grid-template-columns:1fr}}
.lyson-capacity__card{display:flex;gap:14px;padding:22px;border:1px solid var(--lyson-border);border-left:4px solid var(--lyson-primary);border-radius:var(--lyson-radius);background:#fff;box-shadow:0 2px 10px rgba(15,20,15,.04)}
.lyson-capacity__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#eef7df;color:var(--lyson-primary-dark)}
.lyson-capacity__icon svg{width:22px;height:22px}
.lyson-capacity__body{flex:1;min-width:0}
.lyson-capacity__stat{display:block;font-size:1.15rem;font-weight:800;color:var(--lyson-primary-dark)}
.lyson-capacity__label{margin:2px 0 6px;font-weight:700;color:var(--lyson-ink);font-size:.95rem}
.lyson-capacity__desc{margin:0;color:var(--lyson-muted);font-size:.86rem;line-height:1.5}

/* ── Trang Thiết kế phòng Lab ── */
.lyson-process-list{counter-reset:lyson-step;padding-left:0}
.lyson-process-list li{list-style:none;counter-increment:lyson-step;position:relative;padding-left:38px;margin-bottom:12px}
.lyson-process-list li::before{content:counter(lyson-step);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--lyson-primary);color:#000;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.lyson-faq-list{display:flex;flex-direction:column;gap:18px;max-width:820px}
.lyson-faq-item h3{margin:0 0 6px;font-size:1rem}

/* ── Trang 404 ── */
.lyson-404__hero{padding:56px 20px 40px;text-align:center;max-width:640px;display:flex;flex-direction:column;align-items:center}
.lyson-404__art{margin-bottom:8px}
.lyson-404__code{margin:0;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lyson-primary-dark)}
.lyson-404__title{margin:6px 0 12px;font-size:1.85rem;font-weight:800}
.lyson-404__desc{margin:0 0 24px;color:var(--lyson-muted);font-size:.96rem;line-height:1.7}
.lyson-404__search{width:100%;max-width:460px;margin-bottom:22px}
.lyson-404__search .lyson-search-form{display:flex;gap:8px}
.lyson-404__search .lyson-search-field{flex:1;padding:12px 16px;border:1px solid var(--lyson-border);border-radius:50px;font-family:inherit;font-size:.92rem}
.lyson-404__search .lyson-search-field:focus{outline:none;border-color:var(--lyson-primary)}
.lyson-404__search .lyson-search-submit{padding:12px 22px;border-radius:50px;border:none;background:var(--lyson-primary);color:#000;font-weight:700;cursor:pointer;transition:.2s}
.lyson-404__search .lyson-search-submit:hover{background:var(--lyson-primary-dark);color:#fff}
.lyson-404__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

.lyson-404__links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 8px}
@media (max-width:860px){.lyson-404__links{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.lyson-404__links{grid-template-columns:1fr}}
.lyson-404__link-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--lyson-border);border-radius:14px;background:#fff;transition:.15s}
.lyson-404__link-card:hover{border-color:var(--lyson-primary);box-shadow:0 4px 16px rgba(15,20,15,.06);transform:translateY(-1px)}
.lyson-404__link-icon{flex:none;width:42px;height:42px;border-radius:50%;background:var(--lyson-bg-alt);color:var(--lyson-primary-dark);display:flex;align-items:center;justify-content:center}
.lyson-404__link-icon svg{width:22px;height:22px}
.lyson-404__link-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.lyson-404__link-text strong{font-size:.92rem;color:var(--lyson-ink)}
.lyson-404__link-text span{font-size:.78rem;color:var(--lyson-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lyson-404__link-arrow{flex:none;color:var(--lyson-border)}
.lyson-404__link-arrow svg{width:16px;height:16px}
.lyson-404__link-card:hover .lyson-404__link-arrow{color:var(--lyson-primary-dark)}
.lyson-faq-item p{margin:0;color:var(--lyson-muted)}