/*
 * modern-home — trang chủ dựng riêng, hiện dùng ở lysonsakylab.vn
 *
 * Markup của nó nằm trong NỘI DUNG TRANG (page 34), không nằm trong theme.
 * File CSS này trước đây được thêm thẳng vào theme trên server, nên mỗi lần cài
 * đè theme là mất sạch và trang chủ mất định dạng. Đưa vào theme để nó đi cùng
 * các bản phát hành, và chỉ nạp khi nội dung trang chủ thực sự có class
 * .lssk-modern-home — xem inc/home-blocks.php.
 *
 * Ba vỏ bọc .lm-projects / .lm-designs / .lm-products không tự dựng nội dung:
 * bên trong chúng là section do shortcode của theme sinh ra —
 * [lssk_du_an], [lssk_thiet_ke], [lssk_san_pham].
 */

.lssk-modern-home{--lm-ink:#102219;--lm-muted:#66736b;--lm-green:#82b735;--lm-green2:#5f9020;--lm-soft:#f5f8f3;--lm-line:#e2e9df;--lm-card:#fff;color:var(--lm-ink);overflow:hidden}.lm-section{padding:86px 0}.lm-section-head{text-align:center;max-width:760px;margin:0 auto 42px}.lm-section-head h2,.lm-manifesto h2,.lm-advice h2,.lm-about-modern h2{font-size:clamp(30px,4vw,50px);line-height:1.08;letter-spacing:-.035em;margin:8px 0 14px}.lm-section-head p,.lm-media-copy p,.lm-about-copy p{color:var(--lm-muted);font-size:17px}.lm-kicker,.lm-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lm-green2)}.lm-kicker:before,.lm-eyebrow:before{content:"";width:24px;height:2px;background:currentColor}.lm-kicker-light{color:#e7ffd1}.lm-head-left{text-align:left;margin-left:0}.lm-actions{display:flex;gap:12px;flex-wrap:wrap}.lm-btn-glass{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.38)!important;color:#fff!important;backdrop-filter:blur(8px)}.lm-btn-white{background:#fff!important;color:#416d15!important;border-color:#fff!important}.lm-hero{position:relative;background:#0b1710}.lm-slider{position:relative;min-height:min(760px,76vh);overflow:hidden}.lm-slider-track,.lm-slide{position:absolute;inset:0}.lm-slide{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s ease}.lm-slide.is-active{opacity:1;visibility:visible}.lm-slide-image{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.015)}.lm-slide.is-active .lm-slide-image{animation:lmZoom 6s ease-out both}.lm-slide-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,10,.82) 0%,rgba(7,18,10,.46) 45%,rgba(7,18,10,.14) 80%),linear-gradient(0deg,rgba(7,18,10,.38),transparent 45%)}@keyframes lmZoom{from{transform:scale(1.06)}to{transform:scale(1)}}.lm-slider-ui{position:relative;z-index:4;min-height:min(760px,76vh);width:min(1180px,calc(100% - 40px));margin:auto;display:flex;flex-direction:column;justify-content:center}.lm-slider-copy{max-width:720px;color:#fff}.lm-slider-copy h1{font-size:clamp(40px,6vw,76px);line-height:.98;letter-spacing:-.05em;margin:15px 0 18px;color:#fff}.lm-slider-copy p{font-size:clamp(17px,2vw,22px);max-width:620px;color:rgba(255,255,255,.86);margin-bottom:28px}.lm-slider-controls{position:absolute;left:0;right:0;bottom:28px;display:flex;align-items:center;gap:12px}.lm-prev,.lm-next{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}.lm-dots{display:flex;gap:7px;align-items:center}.lm-dot{width:7px;height:7px;border:0;border-radius:99px;padding:0;background:rgba(255,255,255,.42);transition:.25s}.lm-dot.is-active{width:28px;background:#fff}.lm-values{background:#fff}.lm-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.lm-value-card{position:relative;border:1px solid var(--lm-line);border-radius:22px;padding:28px;background:var(--lm-card);min-height:320px;transition:.25s;overflow:hidden}.lm-value-card:hover{transform:translateY(-5px);box-shadow:0 18px 48px rgba(30,70,30,.09);border-color:#cbdabe}.lm-value-no{position:absolute;right:22px;top:16px;font-size:48px;font-weight:900;color:#eef4ea}.lm-value-icon{width:72px;height:72px;border-radius:18px;background:var(--lm-soft);display:grid;place-items:center;margin-bottom:34px;position:relative}.lm-value-icon img{width:48px;height:48px;object-fit:contain}.lm-value-card h3{font-size:21px;line-height:1.25;margin:0 0 12px}.lm-value-card p{color:var(--lm-muted);margin:0}.lm-manifesto{background:linear-gradient(125deg,#6da025,#89bd45);color:#fff;padding:66px 0}.lm-manifesto-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end}.lm-manifesto h2{color:#fff;margin-bottom:0}.lm-manifesto p{font-size:18px;color:rgba(255,255,255,.9);margin:0}.lm-clients{padding-bottom:60px}.lm-clients .lssk-section{padding:0}.lm-clients .lssk-section-header{display:none}.lm-metrics{padding:0 0 86px}.lm-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--lm-line);border-radius:24px;overflow:hidden;background:#fff}.lm-metric{padding:28px 24px;text-align:center;border-right:1px solid var(--lm-line)}.lm-metric:last-child{border-right:0}.lm-metric strong{display:block;font-size:44px;line-height:1;color:var(--lm-green2);letter-spacing:-.04em}.lm-metric strong:after{content:"+"}.lm-metric span{display:block;margin-top:8px;color:var(--lm-muted);font-weight:700}.lm-experience{background:var(--lm-soft)}.lm-experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.lm-media-card{background:#fff;border:1px solid var(--lm-line);border-radius:24px;overflow:hidden}.lm-media-copy{padding:28px 30px 20px}.lm-media-copy h3{font-size:26px;line-height:1.18;margin:10px 0}.lm-chip{display:inline-flex;background:#edf6e6;color:#5c8c22;border-radius:99px;padding:7px 11px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.lm-media-frame{margin:0 14px 14px;border-radius:16px;overflow:hidden}.lm-projects .lssk-section,.lm-designs .lssk-section,.lm-products .lssk-section{padding:0}.lm-projects .lssk-container,.lm-designs .lssk-container,.lm-products .lssk-container{width:100%;max-width:1240px;padding:0}.lm-categories{background:var(--lm-soft)}.lm-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.lm-cat-card{position:relative;background:#fff;border:1px solid var(--lm-line);border-radius:24px;padding:30px;text-decoration:none;color:var(--lm-ink);min-height:300px;transition:.25s}.lm-cat-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(23,58,21,.1);color:var(--lm-ink)}.lm-cat-icon{display:grid;place-items:center;width:54px;height:54px;background:#edf6e6;color:#659627;border-radius:16px;font-size:22px;margin-bottom:34px}.lm-cat-index{position:absolute;right:24px;top:22px;font-size:38px;color:#edf2ea;font-weight:900}.lm-cat-card h3{font-size:25px;margin:0 0 10px}.lm-cat-card p{color:var(--lm-muted);min-height:78px}.lm-cat-card strong{display:flex;align-items:center;gap:8px;color:#659627}.lm-advice{padding-top:40px}.lm-advice-box{background:linear-gradient(120deg,#172c1c,#315626);border-radius:30px;padding:48px;display:flex;align-items:center;justify-content:space-between;gap:32px;color:#fff}.lm-advice h2{color:#fff;max-width:700px;margin-bottom:10px}.lm-advice p{color:rgba(255,255,255,.75);max-width:720px;margin-bottom:0}.lm-about-modern{padding-top:70px}.lm-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.lm-about-copy h2{margin-top:10px}.lm-about-visual{position:relative;min-height:470px;border-radius:30px;background:linear-gradient(145deg,#e9f2e4,#f9fbf8);padding:28px;display:flex;align-items:flex-end}.lm-about-avatar{position:absolute;right:28px;top:28px;width:180px;height:180px;object-fit:cover;border-radius:50%;border:8px solid #fff;box-shadow:0 16px 40px rgba(39,79,32,.13)}.lm-testimonial-card{position:relative;background:#fff;border:1px solid var(--lm-line);border-radius:22px;padding:26px;max-width:440px;box-shadow:0 16px 50px rgba(32,70,29,.1)}.lm-stars{color:#e0ae00;letter-spacing:3px;margin-bottom:10px}.lm-testimonial-card blockquote{font-size:20px;line-height:1.45;margin:0 0 18px}.lm-testimonial-card strong,.lm-testimonial-card span{display:block}.lm-testimonial-card span{color:var(--lm-muted);font-size:14px;margin-top:4px}@media(max-width:980px){.lm-section{padding:66px 0}.lm-value-grid{grid-template-columns:repeat(2,1fr)}.lm-manifesto-inner,.lm-about-grid{grid-template-columns:1fr}.lm-experience-grid{grid-template-columns:1fr}.lm-cat-grid{grid-template-columns:1fr 1fr}.lm-advice-box{align-items:flex-start;flex-direction:column}.lm-about-visual{min-height:420px}}@media(max-width:640px){.lm-slider,.lm-slider-ui{min-height:680px}.lm-slider-ui{width:calc(100% - 28px)}.lm-slider-copy h1{font-size:43px}.lm-slider-controls{bottom:18px}.lm-section{padding:54px 0}.lm-section-head{margin-bottom:28px}.lm-section-head h2,.lm-manifesto h2,.lm-advice h2,.lm-about-modern h2{font-size:32px}.lm-value-grid,.lm-cat-grid{grid-template-columns:1fr}.lm-value-card{min-height:0}.lm-metric-grid{grid-template-columns:1fr 1fr}.lm-metric:nth-child(2){border-right:0}.lm-metric:nth-child(-n+2){border-bottom:1px solid var(--lm-line)}.lm-metric strong{font-size:36px}.lm-manifesto{padding:48px 0}.lm-manifesto-inner{gap:20px}.lm-advice-box{padding:30px 24px;border-radius:24px}.lm-about-visual{min-height:440px;padding:18px}.lm-about-avatar{width:120px;height:120px;right:18px;top:18px}.lm-testimonial-card{padding:20px}}


/* ══════════════════════════════════════════════════════════════
   BẢN VÁ HERO — ảnh slide là banner có sẵn chữ
   ══════════════════════════════════════════════════════════════
   Slide của site này không phải ảnh chụp trơn mà là banner đã thiết kế sẵn,
   bên trong có tiêu đề, 4 ô icon và dải liên hệ. Bản gốc lại phủ thêm
   .lm-slider-copy lên trên nên thành hai lớp chữ chồng nhau.

   Thêm nữa khung slider tỉ lệ 2.08 trong khi banner tỉ lệ 2.38, dùng
   object-fit:cover nên bị cắt ~6% mỗi bên — mất luôn chữ đầu dòng tiêu đề.

   Xử lý: khung chạy theo đúng tỉ lệ banner, ảnh contain nên không cắt, ẩn lớp
   chữ phủ, nút chuyển slide dời ra giữa hai mép để không đè lên dải liên hệ ở
   đáy banner.

   Muốn quay lại kiểu chữ phủ lên ảnh (khi dùng ảnh chụp trơn, không có chữ):
   thêm class lm-hero--overlay vào thẻ <section class="lm-hero"> trong trang.
   ══════════════════════════════════════════════════════════════ */
.lm-hero:not(.lm-hero--overlay) .lm-slider,
.lm-hero:not(.lm-hero--overlay) .lm-slider-ui{min-height:0}
.lm-hero:not(.lm-hero--overlay) .lm-slider{aspect-ratio:2.38/1}
.lm-hero:not(.lm-hero--overlay) .lm-slide-image{object-fit:contain;transform:none;animation:none}
.lm-hero:not(.lm-hero--overlay) .lm-slide.is-active .lm-slide-image{animation:none}
.lm-hero:not(.lm-hero--overlay) .lm-slide-shade{display:none}
.lm-hero:not(.lm-hero--overlay) .lm-slider-copy{display:none}
.lm-hero:not(.lm-hero--overlay) .lm-slider-ui{position:absolute;inset:0;width:100%;pointer-events:none}
.lm-hero:not(.lm-hero--overlay) .lm-slider-controls{position:absolute;top:50%;bottom:auto;transform:translateY(-50%);left:14px;right:14px;justify-content:space-between;pointer-events:auto}
.lm-hero:not(.lm-hero--overlay) .lm-dots{display:none}
@media(max-width:640px){
    .lm-hero:not(.lm-hero--overlay) .lm-slider,
    .lm-hero:not(.lm-hero--overlay) .lm-slider-ui{min-height:0}
    .lm-hero:not(.lm-hero--overlay) .lm-prev,
    .lm-hero:not(.lm-hero--overlay) .lm-next{width:36px;height:36px}
}

/* ══════════════════════════════════════════════════════════════
   KHỐI TRẢI NGHIỆM — tour 360 và video phải cao bằng nhau
   ══════════════════════════════════════════════════════════════
   [lssk_embed] sinh ra chiều cao theo hai kiểu khác nhau: tour dùng height cố
   định (clamp 340–540px), video dùng tỉ lệ 16:9 (padding-top 56.25%). Đặt cạnh
   nhau thì tour 540px còn video 314px, thẻ video thừa hơn 220px khoảng trắng.

   Cả hai đều là inline style nên phải !important mới đè được.
   Đổi 400px bên dưới nếu muốn khung cao hơn hoặc thấp hơn.
   ══════════════════════════════════════════════════════════════ */
.lm-experience .lm-media-card{display:flex;flex-direction:column}
.lm-experience .lm-media-frame{margin-top:auto}
.lm-experience .lm-media-frame .lssk-embed{height:clamp(300px,27vw,400px)!important;padding-top:0!important}