/* Per-product capabilities: intentionally isolated from Home slider styles. */
.page-product .ld-cap,
.ld-cap {
    --ldcap-gold: #b7832c;
    --ldcap-deep: #9e6d25;
    --ldcap-ink: #2d2a27;
    --ldcap-muted: #6e6964;
    --ldcap-line: #e7dacc;
    box-sizing: border-box;
    padding: 0px 0 0px;
    color: var(--ldcap-ink);
    font-family: inherit;
    font-weight: 400;
}
.ld-cap *, .ld-cap *::before, .ld-cap *::after { box-sizing: border-box; }
.ld-cap__shell { max-width: 1320px; margin: 0 auto; }
.ld-cap__intro { text-align: center; margin-bottom: 27px; }
.ld-cap__intro h2 { margin: 0; color: #3b3531; font-family: inherit; font-size: clamp(26px, 3vw, 30px); line-height: 1.19; font-weight: 600; letter-spacing: -.035em; }
.ld-cap__intro h2 em { font-style: normal; font-weight: 600; color: var(--ldcap-deep); }
.ld-cap__under { display: block; width: 43px; height: 2px; margin: 12px auto 16px; background: #d59c37; }
.ld-cap__intro p {
    margin: 0 auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--ldcap-muted);
}.ld-cap__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-bottom: 32px; }
.ld-cap__card { min-width: 0; background: rgba(255,252,248,.89);  overflow: hidden; }
.ld-cap__card-photo { aspect-ratio: 1.93 / 1; overflow: hidden; background: #ded4c7; }
.ld-cap__card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.ld-cap__card:hover .ld-cap__card-photo img { transform: scale(1.04); }
.ld-cap__card-photo--blank { display: grid; place-items: center; color: #b49060; background: linear-gradient(135deg, #e8e0d5, #f5ece0 65%, #d9c4aa); }
.ld-cap__card-photo--blank i { font-size: 32px; opacity: .64; }
.ld-cap__card-content { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 10px; padding: 15px 15px 16px; }
.ld-cap__card-icon { color: var(--ldcap-gold); font-size: 23px; line-height: 1.2; }
.ld-cap__card-content h3 { margin: 0 0 8px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; color: #302a25; }
.ld-cap__card-content p { margin: 0; color: #6b6661; font-size: 13.8px; font-weight: 400; line-height: 1.65; }
.ld-cap__section-heading { display: flex; align-items: center; gap: 12px; margin: 13px 0 19px; }
.ld-cap__section-heading > span { width: 28px; height: 3px; flex: 0 0 auto; background: #d29a32; }
.ld-cap__section-heading h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; color: #252424; }
.ld-cap__build { margin: 0 0 26px; }
.ld-cap__build-intro { font-size: 13.8px; font-weight: 400; margin: -7px 0 16px 40px; color: var(--ldcap-muted); }
.ld-cap__build-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.ld-cap__build-grid figure { margin: 0; border-radius: 9px; overflow: hidden; background: #fffcf8; border: 1px solid var(--ldcap-line); }
.ld-cap__build-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1.55; object-fit: cover; }
.ld-cap__build-grid figcaption { font-size: 13.8px; font-weight: 400; padding: 10px 11px; color: #544637; }
.ld-cap__information { display: block; width: 100%; min-width: 0; margin-bottom: 24px; }
/* Materials are a full-width, background-free part of the page, not a card. */
.ld-cap__information .ld-cap__info-card { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.ld-cap__info-heading { display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 10px; align-items: start; margin-bottom: 17px; }
.ld-cap__info-icon { font-size: 24px; color: var(--ldcap-gold); }
.ld-cap__info-heading h3 {
    margin: 0 0 0px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
}.ld-cap__info-heading p { margin: 0; color: var(--ldcap-muted); font-size: 13.8px; font-weight: 400; line-height: 1.55; }
/* Material library: 6 desktop / 4 tablet / 3 mobile, without horizontal scrolling.
   JavaScript enables the responsive row-limited preview only after it wires up the controls;
   without JS the complete list stays accessible. */
.ld-cap__materials {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 0;
}
.ld-cap__material { min-width: 0; text-align: center; }
.ld-cap__material-photo { position: relative; overflow: hidden; aspect-ratio: 1.05; background: #e6d6c3; }
.ld-cap__material-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-cap__material-photo--blank { display: grid; place-items: center; color: #b39a79; background: linear-gradient(135deg, #e6dacb, #f7f1ea); }
.ld-cap__material-photo--blank i { font-size: 21px; }
.ld-cap__material > span { display: block; max-width: 100%; margin-top: 7px; font-size: 13.8px; font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; color: #5c5249; }
.ld-cap__material-reveal {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 8px;
    cursor: pointer;
    border: 1px solid rgba(224, 182, 110, .44);
    background: linear-gradient(140deg, rgba(22, 20, 16, .78), rgba(67, 48, 22, .77));
    color: #f6dba4;
    text-align: center;
    transition: background .2s ease;
}
.ld-cap__material-reveal:hover { background: linear-gradient(140deg, rgba(22, 20, 16, .89), rgba(100, 66, 22, .88)); }
.ld-cap__material-reveal:focus-visible, .ld-cap__materials-collapse:focus-visible { outline: 3px solid #c3913c; outline-offset: 3px; }
.ld-cap__material-reveal strong { color: #f7d58b; font-size: clamp(24px, 2.5vw, 38px); font-weight: 600; line-height: 1.12; }
.ld-cap__material-reveal small { font-size: 12px; color: #fff7e9; font-weight: 500; line-height: 1.35; }
.ld-cap__materials-collapse {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px auto 0;
    padding: 9px 22px;
    border: 1px solid #caa672;
    color: #926626;
    background: transparent;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s ease;
}
.ld-cap__materials-collapse:hover { background: #f7efe4; }
/* Desktop: 12 spaces (2 × 6); last photo becomes the expansion tile. */
@media (min-width: 1025px) {
    .ld-cap__materials--ready:not(.is-expanded) > .ld-cap__material:nth-child(n+13) { display: none; }
    .ld-cap__materials--ready:not(.is-expanded) .ld-cap__material-reveal--desktop { display: flex; }
    .ld-cap__materials--ready.is-expanded.ld-cap__materials--overflow-desktop + .ld-cap__materials-collapse { display: flex; }
}
/* Tablet: 12 spaces (3 × 4). */
@media (min-width: 601px) and (max-width: 1024px) {
    .ld-cap__materials { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .ld-cap__materials--ready:not(.is-expanded) > .ld-cap__material:nth-child(n+13) { display: none; }
    .ld-cap__materials--ready:not(.is-expanded) .ld-cap__material-reveal--tablet { display: flex; }
    .ld-cap__materials--ready.is-expanded.ld-cap__materials--overflow-tablet + .ld-cap__materials-collapse { display: flex; }
}
/* Mobile: 9 spaces (3 × 3). */
@media (max-width: 600px) {
    .ld-cap__materials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .ld-cap__materials--ready:not(.is-expanded) > .ld-cap__material:nth-child(n+10) { display: none; }
    .ld-cap__materials--ready:not(.is-expanded) .ld-cap__material-reveal--mobile { display: flex; }
    .ld-cap__materials--ready.is-expanded.ld-cap__materials--overflow-mobile + .ld-cap__materials-collapse { display: flex; }
    .ld-cap__material-reveal strong { font-size: clamp(22px, 7vw, 32px); }
    .ld-cap__material-reveal small { font-size: 10px; }
}
.ld-cap__cta { display: grid; grid-template-columns: 49% 51%; min-height: 195px; height: auto; background: linear-gradient(112deg,#e8d4bd 0%,#f1e2d2 59%,#e9d3b8 100%); overflow: hidden; }
.ld-cap__cta-art { height: 100%; max-height: 195px; overflow: hidden; }
.ld-cap__cta-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-cap__cta-art-pattern { height: 100%; background: radial-gradient(circle at 25% 50%, #d6ad74 0, transparent 30%), radial-gradient(circle at 72% 70%, #b38753 0, transparent 45%), linear-gradient(135deg,#f3e7da,#c7aa87); opacity: .7; }
.ld-cap__cta-body { display: flex; flex-direction: column; justify-content: center; padding: 23px 31px; min-width: 0; }
.ld-cap__cta-body h3 { margin: 0 0 8px; font-family: inherit; color: #99692b; font-weight: 600; font-size: clamp(20px, 2vw, 22px); line-height: 1.2; }
.ld-cap__cta-body p { font-size: 13.8px; font-weight: 400; line-height: 1.6; color: #53473b; margin: 0 0 16px; }
.ld-cap__cta-actions { display: flex; gap: 11px; flex-wrap: wrap; }
.ld-cap__btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 37px; padding: 9px 17px; border-radius: 5px; border: 1px solid #b68b4c; font-size: 13.8px; line-height: 1.3; font-weight: 400; text-decoration: none !important; transition: transform .2s, background .2s; }
.ld-cap__btn:hover { transform: translateY(-2px); }
.ld-cap__btn--light { color: #533f25 !important; background: rgba(255,250,241,.68); }
.ld-cap__btn--gold { background: #b58231; color: #fff !important; border-color: #b58231; }
.ld-cap__btn--gold:hover { background: #93641e; }
.ld-cap__info-card[id$="-materials"] { scroll-margin-top: 110px; }
@media (max-width: 1180px) {
    .ld-cap__cards { gap: 12px; }
    .ld-cap__card-content { padding: 12px; gap: 7px; }
}
@media (max-width: 860px) {
    .ld-cap { padding: 42px 0; }
    .ld-cap__cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ld-cap__build-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ld-cap__cta { grid-template-columns: 40% 60%; }
    .ld-cap__cta-body { padding: 18px 20px; }
}
@media (max-width: 580px) {
    .ld-cap { padding: 36px 0 32px; }
    .ld-cap__intro { margin-bottom: 21px; }
    .ld-cap__intro h2 {
        font-size: clamp(18px,2vw,32px);
        padding: 0px 10px;
        line-height: 1.5;
    }
    .ld-cap__intro p {
        font-size: 12.8px;
        text-align: justify;
        padding: 0px 10px;
    }
    .ld-cap__cards { grid-template-columns: 1fr; gap: 13px; margin-bottom: 25px; }
    .ld-cap__card { display: grid; grid-template-columns: minmax(0,42%) minmax(0,58%); }
    .ld-cap__card-photo { height: 100%; min-height: 140px; aspect-ratio: auto; }
    .ld-cap__card-content { align-content: center; grid-template-columns: 20px minmax(0,1fr); padding: 12px 9px; }
    .ld-cap__card-icon { font-size: 19px; }
    .ld-cap__card-content h3 {
        font-size: 13.8px;
        margin-bottom: 2px;
    }
    .ld-cap__card-content p {
        font-size: 12px;
        line-height: 1.55;
        text-align: justify;
    }
    .ld-cap__section-heading { margin: 8px 0 17px; }
    .ld-cap__section-heading h3 { font-size: 16px; }
    .ld-cap__information .ld-cap__info-card { padding: 0; }
    .ld-cap__info-heading h3 { font-size: 15px; }
    .ld-cap__material > span {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    margin-left: 5%;
    }.ld-cap__info-heading p {
        font-size: 12px;
    }.ld-cap__info-heading {
        margin-bottom: 5px;
    }
    .ld-cap__cta { grid-template-columns: 1fr; height: auto; }
    .ld-cap__cta-art { height: 142px; min-height: 0; }
    .ld-cap__cta-body {
        padding: 10px;
    }
    .ld-cap__cta-body h3 {
        font-size: 16px;
        margin: 0 0 0px;
    }.ld-cap__cta-body p {
        font-size: 12px;
        text-align: justify;
        margin-bottom: 5px;
    }
    .ld-cap__cta-actions { gap: 8px; }
    .ld-cap__btn { flex: 1 1 45%; font-size: 13.8px; padding: 9px 8px; }
    .ld-cap__build-grid { gap: 9px; }
    .ld-cap__build-grid figcaption { font-size: 13.8px; padding: 8px; }
}
@media (max-width: 360px) {
    .ld-cap__card { grid-template-columns: 1fr; }
    .ld-cap__card-photo { height: 145px; }
    .ld-cap__card-content { grid-template-columns: 24px minmax(0,1fr); padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ld-cap__card-photo img, .ld-cap__btn { transition: none; } }

/* LamDesign square-corner system: capability, material and CTA surfaces. */
.ld-cap, .ld-cap *, .ld-cap *::before, .ld-cap *::after { border-radius: 0 !important; }

/* Per-product project file download + branded Zalo action. */
.ld-cap__zalo-icon { display: inline-block; width: 19px; height: 19px; object-fit: contain; flex: 0 0 auto; }
.ld-cap__cta-actions .ld-cap__btn { white-space: normal; text-align: center; }
@media (max-width: 580px) { .ld-cap__cta-actions .ld-cap__btn { flex-basis: 100%; } }