/* =====================================================================
VCN Lighting Solutions — Prototype Front-end (Desktop)
Brand guideline (CATALOGUE VCN DE 2026): "Light Defines Luxury".
Typeface: Montserrat. Palette: luxury black + white, warm
amber-gold accent #D89A4E (per catalogue headings & markers).
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
/* ---------- 1. Tokens ---------- */
:root{
--ink: #0F0E0C;
--gold: #D89A4E;
--gold-light: #ECC677;
--cream: #F7F4EC;
--line-soft: rgba(236,198,119,.13);
--line-mid: rgba(236,198,119,.24);
--ink-2: #18160F;
--ink-3: #1F1C15;
--on-dark: #FFFFFF;
/* Feedback (VCN #7): light/faint text was hard to read — raised to high
contrast so every text token reads clearly white on the dark theme. */
--on-dark-muted: rgba(255,255,255,.86);
--on-dark-faint: rgba(255,255,255,.78); /* t195m12: faint caption/footer/label tier still dim — raised for readability */
/* TYPOGRAPHY — Inter (brand typeface, VCN t199m5) */
--font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
--container: 1320px;
--gap: 10px;
--ease: cubic-bezier(.22,.61,.36,1);
}
/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
font-family:var(--font-sans);
font-weight:300; /* LIGHT by default */
font-size:16px; line-height:1.6;
color:var(--on-dark); background:var(--ink);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-weight:300; } /* headings light too */
::selection{ background:var(--gold); color:var(--ink); }
/* Full-screen layout: content spans the full width with 80px side gutters
(tiles stay edge-to-edge; header, hero text, section titles use this) */
.container{ width:100%; max-width:none; margin-inline:auto; padding-inline:80px; }
/* Uniform vertical rhythm between ALL sections = same as the tile gap,
so no two sections touch and spacing is even top & bottom everywhere. */
main{ display:flex; flex-direction:column; gap:var(--gap); background:var(--ink); }
/* ---------- 3. Header (single row) ---------- */
.site-header{
position:sticky; top:0; z-index:50;
background:rgba(21,20,15,.88); backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid var(--line-soft);
}
.header__in{ display:flex; align-items:center; gap:20px; height:74px; flex-wrap:nowrap; }
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand img{ height:68px; width:auto; }
.nav{ display:flex; align-items:center; gap:2px; margin-inline:auto; flex-wrap:nowrap; }
.nav__item{ position:relative; }
.nav__link{
display:inline-flex; align-items:center; gap:5px;
padding:10px 13px; font-size:16px; font-weight:300; letter-spacing:.02em;
color:var(--on-dark); white-space:nowrap; transition:color .25s var(--ease);
}
.nav__link .chev{ width:9px; height:9px; opacity:.6; transition:transform .3s var(--ease); }
.nav__link:hover{ color:var(--gold); }
.nav__item:hover .chev{ transform:rotate(180deg); }
.nav__link.is-active{ color:var(--gold); }
.actions{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.icon-btn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--on-dark); position:relative; transition:background .25s var(--ease), color .25s var(--ease); }
.icon-btn:hover{ background:var(--ink-3); color:var(--gold); }
.icon-btn svg{ width:19px; height:19px; }
.nav-toggle{ display:none; } /* hamburger — shown on mobile only */
/* header icon order (L→R): language · search · account · cart · menu */
.actions .lang{ order:0; }
.actions [aria-label="Search"]{ order:1; }
.actions [aria-label="Account"]{ order:2; }
.actions [aria-label="Cart"]{ order:3; }
.actions .nav-toggle{ order:4; margin-left:2px; }
.cart-count{ position:absolute; top:5px; right:5px; background:var(--gold); color:var(--ink); font-size:10px; font-weight:500; line-height:1; min-width:16px; height:16px; border-radius:8px; display:grid; place-items:center; padding:0 4px; }
.lang{ display:flex; align-items:center; gap:2px; margin-left:6px; border:1px solid var(--line-soft); border-radius:999px; padding:3px; }
.lang button{ font-size:12px; font-weight:500; letter-spacing:.03em; padding:5px 9px; border-radius:999px; color:var(--on-dark-muted); transition:all .25s var(--ease); }
.lang button.is-active{ background:var(--gold); color:var(--ink); }
/* Mega menu — image-card dropdown (level-1 cards, hover reveals level-2) */
.mega{
position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(8px);
background:var(--ink-2); border:1px solid var(--line-soft);
padding:18px; box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
opacity:0; visibility:hidden; pointer-events:none; transition:all .3s var(--ease); z-index:60;
}
.mega--cards{ width:max-content; max-width:94vw; }
.mega::before{ content:""; position:absolute; top:-20px; left:0; right:0; height:20px; }
.nav__item:hover .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega__slider{ display:flex; align-items:center; gap:8px; }
.mega__track{
display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth;
scroll-snap-type:x mandatory; scrollbar-width:none; max-width:720px;
}
.mega__track::-webkit-scrollbar{ display:none; }
.mcard{
position:relative; flex:0 0 224px; height:158px; overflow:hidden; border-radius:10px;
scroll-snap-align:start;
background-color:var(--ink-3);
}
.mcard::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1); transition:transform .8s var(--ease); z-index:0; } /* t324 m1: zoom bằng transform, đồng bộ hiệu ứng hover ảnh .ptile ở trang Sản phẩm */
.mcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(15,14,12,.88),rgba(15,14,12,.18)); z-index:1; }
.mcard:hover::before{ transform:scale(1.05); } /* t324 m1: scale 1.05 / .8s — giống .ptile:hover img trang Sản phẩm */
.mcard__label{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:12px 14px; font-size:13px; font-weight:500; letter-spacing:.04em;
color:var(--on-dark); text-transform:uppercase; transition:all .3s var(--ease);
}
.mcard:hover .mcard__label{ color:var(--gold); bottom:auto; top:12px; }
.mcard__sub{
position:absolute; inset:0; z-index:2; padding:40px 16px 14px;
display:flex; flex-direction:column; gap:0; line-height:1.32;
opacity:0; visibility:hidden; transform:translateY(6px);
transition:all .3s var(--ease); overflow-y:auto; scrollbar-width:none;
}
.mcard__sub::-webkit-scrollbar{ display:none; }
.mcard:hover .mcard__sub{ opacity:1; visibility:visible; transform:translateY(0); }
.mcard__sub a{ font-size:12.5px; color:var(--on-dark-muted); padding:2.5px 0; transition:color .2s var(--ease), padding .2s var(--ease); }
.mcard__sub a:hover{ color:var(--gold); padding-left:4px; }
.mega__arrow{
flex:0 0 34px; width:34px; height:34px; border-radius:50%;
border:1px solid var(--line-mid); color:var(--on-dark); display:grid; place-items:center;
transition:all .25s var(--ease);
}
.mega__arrow:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.mega__arrow svg{ width:16px; height:16px; }
.mega__arrow[hidden]{ display:none; }
/* ---- Mega dropdown panel: sub-items appear BELOW the image strip (ref: cdnlight) ---- */
.mcard__sub{ display:none !important; } /* retire the cramped in-card overlay */
.mcard:hover .mcard__label{ color:var(--gold); bottom:0; top:auto; } /* keep label anchored, no jump */
.mcard.is-current .mcard__label{ color:var(--gold); }
.mcard.is-current::before{ transform:scale(1.05); } /* t324 m1: đồng bộ zoom transform giống .ptile trang Sản phẩm */
.mega__panel{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.mega__panel:not(:has(.mega__group.is-active)){ margin:0; padding:0; border:0; }
.mega__group{ display:none; }
.mega__group.is-active{ display:block; animation:megaFade .25s var(--ease); }
.mega__group-title{ font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.mega__group-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px 28px; }
.mega__group-links a{ font-size:13px; color:var(--on-dark-muted); padding:3px 0; transition:color .2s var(--ease), padding-left .2s var(--ease); }
.mega__group-links a:hover{ color:var(--gold); padding-left:4px; }
@keyframes megaFade{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:translateY(0); } }
/* ---- VCN feedback #10: Service & Support 2-item dropdown ---- */
.mega--simple{ width:230px; padding:10px; }
.mega--simple .msimple__link{ display:block; padding:12px 14px; font-size:13.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--on-dark); transition:color .2s var(--ease), background .2s var(--ease), padding-left .2s var(--ease); }
.mega--simple .msimple__link:hover{ color:var(--gold); background:var(--ink-3); padding-left:18px; }
.mcard[data-cat="indoor"]::before{ background-image:url('https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="outdoor"]::before{ background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="field1"]::before{ background-image:url('/wp-content/uploads/2026/07/index01_img03.jpg'); }
.mcard[data-cat="field2"]::before{ background-image:url('/wp-content/uploads/2026/07/Image_Riva_ADJ_OR_Plinth-1.jpg'); }
.mcard[data-cat="field3"]::before{ background-image:url('/wp-content/uploads/2026/07/Raster-Wallwasher-Recessed-3-1.jpg'); }
.mcard[data-cat="sol"]::before{ background-image:url('/wp-content/uploads/2026/07/04_Cloud_mini_Rod_1400x1400-1.jpg'); }
.mcard[data-cat="res"]::before{ background-image:url('/wp-content/uploads/2026/07/Fade-White-C-1.jpg'); }
.mcard[data-cat="exp"]::before{ background-image:url('/wp-content/uploads/2026/07/index01_img01.jpg'); }
.mcard[data-cat="warranty"]::before{ background-image:url('https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="download"]::before{ background-image:url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="decorative"]::before{ background-image:url('https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="smart"]::before{ background-image:url('https://images.unsplash.com/photo-1558002038-1055907df827?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="custom"]::before{ background-image:url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="pj-hotel"]::before{ background-image:url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="pj-resort"]::before{ background-image:url('https://images.unsplash.com/photo-1571003123894-1f0594d2b5d9?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="pj-mall"]::before{ background-image:url('https://images.unsplash.com/photo-1519415510236-718bdfcd89c8?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="pj-museum"]::before{ background-image:url('https://images.unsplash.com/photo-1518998053901-5348d3961a04?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="pj-office"]::before{ background-image:url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="pj-public"]::before{ background-image:url('https://images.unsplash.com/photo-1568667256549-094345857637?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="pj-factory"]::before{ background-image:url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="pj-housing"]::before{ background-image:url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="pj-health"]::before{ background-image:url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="about-profile"]::before{ background-image:url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="about-showroom"]::before{ background-image:url('https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="about-video"]::before{ background-image:url('https://images.unsplash.com/photo-1518998053901-5348d3961a04?auto=format&fit=crop&w=600&q=70'); }
.mcard[data-cat="about-careers"]::before{ background-image:url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=600&q=70'); }
/* ---------- 4. Hero — slider (video + project slides) ---------- */
.hero{ position:relative; height:100vh; overflow:hidden; background:var(--ink); isolation:isolate; }
.hero__viewport{ position:absolute; inset:0; }
.slide{ position:absolute; inset:0; display:flex; align-items:center; opacity:0; visibility:hidden; transition:opacity .9s var(--ease); }
.slide.is-active{ opacity:1; visibility:visible; }
.slide__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease); }
.hero:hover .slide__bg{ transform:scale(1.05); }
.slide::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(15,14,10,.80) 0%, rgba(15,14,10,.79) 5%, rgba(15,14,10,.77) 10%, rgba(15,14,10,.73) 15%, rgba(15,14,10,.69) 20%, rgba(15,14,10,.63) 25%, rgba(15,14,10,.57) 30%, rgba(15,14,10,.51) 35%, rgba(15,14,10,.44) 40%, rgba(15,14,10,.37) 45%, rgba(15,14,10,.30) 50%, rgba(15,14,10,.23) 55%, rgba(15,14,10,.17) 60%, rgba(15,14,10,.11) 65%, rgba(15,14,10,.07) 70%, rgba(15,14,10,.03) 75%, rgba(15,14,10,.01) 80%, rgba(15,14,10,0) 85%); }
.slide__in{ width:100%; }
.hero__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:48px; height:48px; border-radius:50%; border:1px solid var(--line-mid); background:rgba(21,20,15,.35); backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--on-dark); transition:all .3s var(--ease); }
.hero__arrow svg{ width:22px; height:22px; }
.hero__arrow:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.hero__arrow.prev{ left:26px; } .hero__arrow.next{ right:26px; }
.hero__dots{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px; }
.hero__dots button{ width:30px; height:3px; background:rgba(244,239,227,.3); transition:all .3s var(--ease); }
.hero__dots button.is-active{ background:var(--gold); width:46px; }
.slide__sector{ display:inline-block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; font-weight:400; color:var(--gold-light); margin-bottom:20px; }
.slide__title{ font-size:48px; font-weight:200; line-height:1.08; letter-spacing:.005em; max-width:18ch; margin-bottom:26px; }
.hero__link{ display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark); padding-bottom:6px; border-bottom:1px solid var(--gold); transition:color .3s var(--ease); }
.hero__link .ar{ transition:transform .3s var(--ease); }
.hero__link:hover{ color:var(--gold); }
.hero__link:hover .ar{ transform:translateX(4px); }
/* =====================================================================
5. TILE SYSTEM — text overlaid on image (shared by every section)
===================================================================== */
.band{ background:var(--ink); }
.band--video{ background:var(--ink); }
/* Sub-page intro band: breathing room below the sticky header and above
the first content section (breadcrumb → title → lead). */
.band.subpage{ padding-top:34px; padding-bottom:20px; }
.band.subpage .breadcrumb{ margin-bottom:6px; }
.band.subpage .lead{ margin-top:18px; }
/* Simple section title — light, single line, no eyebrow/underline
(same understated style as the CTA heading) */
.sec-title{
font-size:clamp(24px,2.6vw,40px);
font-weight:200;
letter-spacing:.01em;
line-height:1.1;
color:var(--on-dark);
white-space:nowrap;
margin:clamp(30px,3.4vw,54px) 0 24px;
}
.tile{
position:relative; display:block; overflow:hidden; isolation:isolate;
background:var(--ink-3); min-height:240px;
}
.tile img,.tile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s var(--ease); }
/* default tiles: dark only at the BOTTOM (where text sits) so the top edge
stays light and section seams remain visible between tiles */
.tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(15,14,10,0) 32%, rgba(15,14,10,.8) 100%); transition:background .4s var(--ease); }
.tile--top::after{ background:linear-gradient(180deg, rgba(15,14,10,.74) 0%, rgba(15,14,10,0) 48%); }
.tile:hover img,.tile:hover video{ transform:scale(1.05); }
.tile:hover::after{ background:linear-gradient(180deg, rgba(15,14,10,0) 38%, rgba(15,14,10,.72) 100%); }
.tile--top:hover::after{ background:linear-gradient(180deg, rgba(15,14,10,.62) 0%, rgba(15,14,10,0) 52%); }
/* text block — bottom-left by default, top-left for categories */
.tile__txt{ position:absolute; left:0; bottom:0; z-index:1; padding:34px 36px; display:flex; flex-direction:column; gap:8px; }
.tile--top .tile__txt{ top:0; bottom:auto; }
.tile__sub{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:400; color:var(--gold-light); }
.tile__label{ font-size:clamp(24px,2.2vw,34px); font-weight:200; line-height:1.12; letter-spacing:.01em; color:#fff; }
.tile__label.sm{ font-size:clamp(19px,1.5vw,23px); font-weight:300; }
/* Category hover panel (home) — reveals sub product-types on hover */
.tile__hover{ position:absolute; inset:0; z-index:2; background:rgba(12,11,8,.97); padding:30px 34px; display:flex; flex-direction:column; justify-content:center; opacity:0; visibility:hidden; transform:translateY(46px); transition:opacity .4s var(--ease), transform .45s var(--ease), visibility .4s var(--ease); overflow-y:auto; }
.tile:hover .tile__hover{ opacity:1; visibility:visible; transform:translateY(0); }
.thv__title{ font-size:clamp(20px,1.5vw,26px); font-weight:300; color:#fff; letter-spacing:.01em; }
.thv__rule{ width:34px; height:2px; background:#E2554A; margin:14px 0 22px; flex:0 0 auto; }
.thv__cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.thv__col{ display:flex; flex-direction:column; }
.thv__col span{ display:flex; align-items:center; justify-content:flex-start; gap:7px; font-size:13px; color:var(--on-dark-muted); padding:6px 0; transition:color .2s var(--ease); }
.thv__col span::after{ content:"→"; flex:0 0 auto; font-size:13px; line-height:1; color:var(--gold); opacity:0; transform:translateX(-4px); transition:transform .2s var(--ease), opacity .2s var(--ease); }
.tile:hover .thv__col span:hover{ color:var(--gold); }
.tile:hover .thv__col span:hover::after{ opacity:1; transform:translateX(0); }
/* t291m4: thv__item hover — yellow + slide-left + > */
.thv__item{ display:inline-flex; align-items:center; font-size:13px; color:var(--on-dark-muted); padding:5px 0; transition:color .2s var(--ease), transform .2s var(--ease); }
.thv__item::after{ content:">"; flex:0 0 auto; font-size:12px; color:var(--gold); margin-left:6px; opacity:0; transform:translateX(-4px); transition:opacity .2s var(--ease), transform .2s var(--ease); }
.tile:hover .thv__item:hover{ color:var(--gold); transform:translateX(-4px); }
.tile:hover .thv__item:hover::after{ opacity:1; transform:translateX(0); }
.thv__more{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:24px; padding:11px 22px; border:1px solid var(--line-mid); border-radius:4px; font-size:13px; color:var(--on-dark); transition:border-color .25s var(--ease), color .25s var(--ease); }
.thv__more:hover{ border-color:var(--gold); color:var(--gold); }
/* play button — unified red circle (t218m24: dong bo nut Play o moi vi tri) */
.tile__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:60px; height:60px; border-radius:50%; border:1px solid #E2554A; background:#E2554A; color:#fff; display:grid; place-items:center; transition:border-color .3s var(--ease), background .3s var(--ease), transform .25s var(--ease); }
.tile:hover .tile__play{ border-color:#d04638; background:#d04638; }
.tile__play svg{ width:22px; height:22px; margin-left:2px; }
/* =====================================================================
GRID — everything on the SAME 4-column base so columns align,
no staggered sections, equal boxes per section.
===================================================================== */
.m-cat,.m-proj,.m-row4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
/* t199m9 — HOME video band: 3 videos as 1 large + 2 small, near full-bleed
(sát mép website) so the videos read MUCH bigger than the old 4-up row. */
.m-vid3{ display:grid; grid-template-columns:2fr 1fr; gap:var(--gap); align-items:stretch; }
.m-vid3 .t-video{ aspect-ratio:auto; min-height:0; }
.m-vid3 .v-side{ aspect-ratio:3/2; } /* t200m10: taller -> whole band bigger */
.m-vid3 .v-lead{ grid-row:1 / span 2; }
@media (max-width:980px){
.m-vid3{ grid-template-columns:1fr 1fr; }
.m-vid3 .v-lead{ grid-row:auto; grid-column:1 / span 2; aspect-ratio:16/9; }
}
@media (max-width:640px){
.m-vid3{ grid-template-columns:1fr; }
.m-vid3 .v-lead{ grid-column:auto; }
}
/* mosaic tiles get their height from the grid track — never from the
.tile min-height (which would overflow the row and overlap the next) */
.m-cat .tile,.m-proj .tile{ min-height:0; }
/* Category mosaic — 4×2, fills cleanly (matches reference) */
.m-cat{ grid-auto-rows:300px; }
.m-cat .t1{ grid-column:1; grid-row:1 / span 2; }
.m-cat .t2{ grid-column:2; grid-row:1 / span 2; }
.m-cat .t3{ grid-column:3 / span 2; grid-row:1; }
.m-cat .t4{ grid-column:3; grid-row:2; }
.m-cat .t5{ grid-column:4; grid-row:2; }
/* Project mosaic — 4×3, fills cleanly (no gaps) */
.m-proj{ grid-auto-rows:228px; }
.m-proj .j1{ grid-column:1 / span 2; grid-row:1 / span 2; }
.m-proj .j2{ grid-column:3 / span 2; grid-row:1; }
.m-proj .j3{ grid-column:3; grid-row:2; }
.m-proj .j4{ grid-column:4; grid-row:2; }
.m-proj .j5{ grid-column:1 / span 2; grid-row:3; }
.m-proj .j6{ grid-column:3 / span 2; grid-row:3; }
/* Equal-box rows — identical 4/3 tiles, aligned to the 4-col grid */
.t-prod,.t-serv,.t-video,.t-news{ aspect-ratio:4/3; min-height:0; }
/* ---------- 6. Partners marquee ---------- */
.marquee{ border-block:1px solid var(--line-soft); padding-block:34px; overflow:hidden; background:var(--ink); }
.marquee__track{ display:flex; gap:72px; width:max-content; animation:scroll 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-size:22px; font-weight:300; color:var(--on-dark-muted); letter-spacing:.1em; white-space:nowrap; opacity:.7; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
/* ---------- 7. CTA — text on image ---------- */
.cta{ position:relative; overflow:hidden; isolation:isolate; }
.cta__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.cta::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg, rgba(15,14,10,.9) 28%, rgba(15,14,10,.45)); }
.cta__in{ padding-block:clamp(80px,11vw,150px); }
.cta__title{ font-size:clamp(28px,3.4vw,46px); font-weight:200; line-height:1.12; letter-spacing:.01em; max-width:20ch; }
.cta__form{ display:flex; gap:0; margin-top:34px; max-width:480px; border-bottom:1px solid var(--line-mid); }
.cta__form input{ flex:1; min-width:200px; padding:14px 0; background:none; border:none; color:var(--on-dark); font-size:15px; font-weight:300; outline:none; }
.cta__form input::placeholder{ color:var(--on-dark-faint); }
.cta__form .hero__link{ border-bottom:none; padding-bottom:0; }
/* ---------- 7b. News & Events — dark section, dark-gray cards ---------- */
.news{ background:var(--ink); color:var(--on-dark); padding-block:clamp(56px,6vw,92px); }
.news__head{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
.news__title{ font-size:clamp(24px,2.6vw,40px); font-weight:200; letter-spacing:.01em; color:var(--on-dark); }
.news__more{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:400; padding:11px 22px; border:1px solid var(--line-mid); border-radius:4px; color:var(--on-dark); transition:border-color .25s var(--ease), color .25s var(--ease); }
.news__more:hover{ border-color:var(--gold); color:var(--gold); }
.news__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.ncard{ display:flex; gap:18px; align-items:center; background:#2A2925; padding:18px; border:2px solid transparent; transition:opacity .6s var(--ease), transform .6s var(--ease), background .25s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease) !important; }
.ncard:hover{ background:#34322B; border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 8px 24px rgba(216,154,78,.18); }
.ncard__thumb{ flex:0 0 120px; width:120px; height:92px; overflow:hidden; background:var(--ink-3); }
.ncard__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ncard:hover .ncard__thumb img{ transform:scale(1.05); }
.ncard__body{ display:flex; flex-direction:column; gap:9px; }
.ncard__date{ font-size:13px; color:#E2554A; }
.ncard__title{ font-size:15px; line-height:1.45; color:var(--on-dark); }
/* ---------- 8. Footer ---------- */
.footer{ background:#100F0B; border-top:1px solid var(--line-soft); padding-top:72px; margin-top:clamp(32px,5vw,64px); }
.footer__top{ display:flex; justify-content:space-between; gap:48px; padding-bottom:56px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.footer__links{ display:grid; grid-template-columns:repeat(4,minmax(0,auto)); gap:34px 40px; flex:1 1 580px; }
.footer__info{ flex:0 0 auto; min-width:230px; max-width:300px; }
.footer__logo{ height:54px; margin-bottom:24px; }
.footer__info .footer__contact{ list-style:none; margin:0; padding:0; }
.footer__col h4 a{ color:inherit; font-size:inherit; letter-spacing:inherit; font-weight:inherit; text-transform:inherit; transition:color .2s var(--ease); display:inline !important; padding:0 !important; }
.footer__col h4 a:hover{ color:#fff; }
.footer__bottom-right{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.footer__bottom .footer__social{ margin-top:0; }
.footer__brand img{ height:62px; margin-bottom:22px; }
.footer__brand p{ font-size:16px; color:var(--on-dark-muted); max-width:34ch; }
.footer__social{ display:flex; gap:10px; margin-top:24px; }
.footer__social a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-soft); display:grid; place-items:center; color:var(--on-dark-muted); transition:all .3s var(--ease); }
.footer__social a:hover{ border-color:var(--gold); color:var(--gold); }
.footer__social svg{ width:17px; height:17px; }
.footer__col h4{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:500; }
.footer__col a{ display:block; padding:7px 0; font-size:16px; color:var(--on-dark-muted); transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--gold); }
.footer__contact li{ display:flex; gap:12px; font-size:16px; color:var(--on-dark-muted); padding:7px 0; }
.footer__contact svg{ width:16px; height:16px; color:var(--gold); flex:0 0 auto; margin-top:3px; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:26px; flex-wrap:wrap; gap:14px; }
.footer__bottom p{ font-size:12px; color:var(--on-dark-faint); }
.footer__bottom nav{ display:flex; gap:24px; }
.footer__bottom nav a{ font-size:12px; color:var(--on-dark-faint); }
.footer__bottom nav a:hover{ color:var(--gold); }
.footer__bottom .mona{ display:inline-flex; align-items:center; vertical-align:middle; }
.footer__bottom .mona img{ height:20px; width:auto; vertical-align:middle; opacity:.85; transition:opacity .25s var(--ease); }
.footer__bottom .mona:hover img{ opacity:1; }
/* ---------- 9. Responsive ---------- */
@media (max-width:1180px){ .nav__link{ padding:10px 9px; } }
@media (max-width:1280px){ .container{ padding-inline:48px; } }
@media (max-width:1024px){
.container{ padding-inline:40px; }
.news__list{ grid-template-columns:1fr; }
.nav-toggle{ display:grid; }
.brand{ margin-right:auto; } /* logo left, icon cluster to the right edge */
.nav{ display:none; }
.nav.is-open{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; margin:0; gap:0; background:rgba(24,22,15,.9); border-top:1px solid var(--line-soft); box-shadow:0 30px 60px -28px rgba(0,0,0,.85); padding:8px 0; max-height:80vh; overflow:auto; }
.nav.is-open .nav__item{ width:100%; }
.nav.is-open .nav__link{ width:100%; padding:15px 28px; font-size:15px; }
.nav.is-open .nav__link .chev{ display:none; }
.nav.is-open .mega{ display:none; }
.m-cat{ grid-template-columns:repeat(2,1fr); grid-auto-rows:260px; }
.m-cat .t1,.m-cat .t2,.m-cat .t4,.m-cat .t5{ grid-column:auto; grid-row:auto; }
.m-cat .t3{ grid-column:1 / span 2; grid-row:auto; }
.m-proj{ grid-template-columns:repeat(2,1fr); grid-auto-rows:220px; }
.m-proj .j1,.m-proj .j2,.m-proj .j3,.m-proj .j4,.m-proj .j5,.m-proj .j6{ grid-column:auto; grid-row:auto; }
.m-proj .j1{ grid-column:1 / span 2; }
.m-row4{ grid-template-columns:repeat(2,1fr); }
.footer__links{ grid-template-columns:repeat(2,1fr); } .footer__info{ flex-basis:100%; max-width:none; }
}
@media (max-width:768px){
/* t218m18: hero giu nut next/prev 2 ben (trai+phai) tren mobile, khong an */
.slide{ align-items:flex-end; }
.slide__in{ padding-bottom:80px; }
.hero__arrow{ display:grid; }
.hero__dots{ left:20px; transform:none; bottom:30px; }
}
@media (max-width:640px){
.container{ padding-inline:20px; }
.m-cat,.m-proj,.m-row4{ grid-template-columns:1fr; grid-auto-rows:auto; }
.m-cat .t1,.m-cat .t2,.m-cat .t3,.m-cat .t4,.m-cat .t5,
.m-proj .j1,.m-proj .j2,.m-proj .j3,.m-proj .j4,.m-proj .j5,.m-proj .j6{ grid-column:auto; grid-row:auto; }
.tile{ min-height:280px; }
.m-cat .tile,.m-proj .tile{ min-height:280px; } /* fix: mobile category tiles collapse (grid-auto-rows:auto + min-height:0 override) */
.t-prod,.t-serv,.t-video,.t-news{ aspect-ratio:16/10; }
.footer__links{ grid-template-columns:repeat(2,1fr); }
.sec-title{ white-space:normal; }
/* keep the header cluster from overflowing the right edge */
.actions [aria-label="Search"]{ display:none; } /* only search hidden on phones, to make room */
.actions{ gap:2px; }
.header__in{ gap:8px; }
.brand img{ height:48px; }
.icon-btn{ width:36px; }
.icon-btn svg{ width:30px; height:30px; }
.lang{ margin-left:2px; padding:2px; } /* compact language switch, kept visible */
.lang button{ padding:5px 7px; font-size:11px; }
}
/* =====================================================================
SUB-PAGES — contained max 1440px (NOT full-screen like the homepage)
===================================================================== */
.subpage .container{ max-width:1440px; padding-inline:32px; }
/* t291m10: footer must stay full-width on subpages — reset the container constraint */
.subpage .footer .container{ max-width:none; padding-inline:80px; }
@media (max-width:1280px){ .subpage .footer .container{ padding-inline:48px; } }
@media (max-width:1024px){ .subpage .footer .container{ padding-inline:40px; } }
@media (max-width:640px){ .subpage .footer .container{ padding-inline:20px; } }
/* ---- Product Listing Page (PLP) — dark theme, colourful tile mosaic ---- */
.plp{ background:var(--ink); color:var(--on-dark); }
.plp__top{ padding:30px 0 4px; }
.breadcrumb{ display:flex; gap:8px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--on-dark-muted); }
.breadcrumb a{ color:var(--on-dark-muted); } .breadcrumb a:hover{ color:var(--gold); }
.breadcrumb span{ color:var(--on-dark-faint); }
.plp__title{ text-align:center; font-size:clamp(18px,1.6vw,24px); font-weight:300; letter-spacing:.06em; color:var(--on-dark); padding:30px 0 22px; }
/* Secondary category nav bar (menu phụ) — Orluna slate strip, full-bleed */
/* Editorial filter tab bar — restyle v2 (task #211 m1): flat text tabs + solid active chip + animated underline, sticky */
.subnav{ background:#2A2925; border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:74px; z-index:40; }
.subnav__in{ display:flex; justify-content:center; align-items:center; gap:2px; flex-wrap:wrap; padding:12px 0; }
.subnav a{ position:relative; flex:0 0 auto; text-align:center; padding:10px 18px; font-size:12.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.56); white-space:nowrap; border:none; border-radius:8px; background:transparent; transition:color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.subnav a::after{ content:""; position:absolute; left:18px; right:18px; bottom:6px; height:1.5px; background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease); }
.subnav a:hover{ color:#fff; }
.subnav a:hover::after{ transform:scaleX(1); }
.subnav a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.subnav a.is-active{ color:var(--ink); background:var(--gold); font-weight:600; box-shadow:0 6px 18px rgba(216,154,78,.32); }
.subnav a.is-active::after{ display:none; }
@media(max-width:600px){
.subnav{ position:static; }
.subnav__in{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:2px; padding:10px 16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.subnav__in::-webkit-scrollbar{ display:none; }
.subnav a{ padding:9px 14px; font-size:12px; }
}
/* Product list grouped by sub-category — each row max 5 tiles, name on hover */
.plp__list{ padding-bottom:64px; }
.pcat{ margin-bottom:40px; }
.pcat:last-child{ margin-bottom:0; }
.pcat__title{ font-size:clamp(15px,1.3vw,19px); font-weight:400; letter-spacing:.05em; color:var(--on-dark); padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line-soft); }
.pgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.pgrid .ptile{ aspect-ratio:1/1; }
.ptile{ position:relative; overflow:hidden; display:block; background:var(--ink-3); }
.ptile img,.ptile video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.ptile:hover img,.ptile:hover video{ transform:scale(1.05); }
.ptile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 56%,rgba(0,0,0,.42)); }
/* product name — synced with the homepage tile label size */
.ptile__label{ position:absolute; left:18px; bottom:15px; z-index:1; font-size:clamp(18px,1.5vw,23px); font-weight:300; line-height:1.15; letter-spacing:.01em; color:#fff; }
/* PLP only — gradient + product name revealed on hover */
.pgrid .ptile::after{ opacity:0; transition:opacity .35s var(--ease); }
.pgrid .ptile:hover::after{ opacity:1; }
.pgrid .ptile__label{ right:16px; font-size:clamp(15px,1.2vw,19px); opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.pgrid .ptile:hover .ptile__label{ opacity:1; transform:none; }
/* =====================================================================
Product Detail Page (PDP) — dark brand, 1440 contained
===================================================================== */
.pdp{ padding-block:34px 88px; }
.pdp .breadcrumb{ color:var(--on-dark-muted); }
.pdp .breadcrumb a{ color:var(--on-dark-muted); } .pdp .breadcrumb a:hover{ color:var(--gold); }
.pdp .breadcrumb span{ color:var(--on-dark-faint); }
.pdp__main{ display:grid; grid-template-columns:1.05fr 1fr; gap:54px; align-items:start; margin-top:26px; }
.gallery{ position:sticky; top:96px; align-self:start; }
.pinfo .pdp__section{ margin-top:42px; }
.pinfo .spec-table{ max-width:none; }
.gallery__main{ position:relative; aspect-ratio:1/1; background:var(--ink-2); overflow:hidden; border:1px solid var(--line-soft); }
.gallery__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:none; border-radius:50%; background:rgba(0,0,0,.42); color:#fff; cursor:pointer; transition:background-color .25s var(--ease), color .25s var(--ease); }
.gallery__nav:hover{ background:var(--gold); color:#111; }
.gallery__nav svg{ width:22px; height:22px; }
.gallery__nav--prev{ left:12px; }
.gallery__nav--next{ right:12px; }
@media (max-width:560px){ .gallery__nav{ width:38px; height:38px; } .gallery__nav--prev{ left:8px; } .gallery__nav--next{ right:8px; } }
.gallery__main img{ width:100%; height:100%; object-fit:cover; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
.gallery__thumbs button{ aspect-ratio:1/1; overflow:hidden; border:1px solid var(--line-soft); background:var(--ink-2); transition:border-color .25s var(--ease); }
.gallery__thumbs button.is-active{ border-color:var(--gold); }
.gallery__thumbs img{ width:100%; height:100%; object-fit:cover; }
.pinfo__cat{ font-size:var(--fs-over,11.5px); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.pinfo__name{ font-size:clamp(30px,3.4vw,46px); font-weight:200; line-height:1.1; margin:14px 0 16px; }
.pinfo__price{ font-size:22px; font-weight:300; color:var(--on-dark); margin-bottom:20px; }
.pinfo__price small{ font-size:13px; color:var(--on-dark-faint); }
.pinfo__desc{ font-size:15px; color:var(--on-dark-muted); max-width:52ch; margin-bottom:30px; }
.variant{ margin-bottom:22px; }
.variant__label{ display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-faint); margin-bottom:10px; }
.variant__opts{ display:flex; gap:8px; flex-wrap:wrap; }
.opt{ min-width:48px; padding:10px 16px; border:1px solid var(--line-soft); border-radius:6px; font-size:16px; color:var(--on-dark-muted); transition:all .2s var(--ease); }
.opt:hover{ border-color:var(--line-mid); color:var(--on-dark); }
.opt.is-active{ border-color:var(--gold); color:var(--gold); }
.opt--cct{ display:inline-flex; align-items:center; gap:8px; }
.opt--cct i{ width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid var(--line-mid); }
.buy{ display:flex; align-items:center; gap:12px; margin:30px 0 22px; flex-wrap:wrap; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-soft); border-radius:999px; }
.qty button{ width:42px; height:46px; color:var(--on-dark); font-size:18px; }
.qty input{ width:44px; height:46px; text-align:center; background:none; border:none; color:var(--on-dark); font:inherit; outline:none; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.btn--add{ background:var(--gold); color:var(--ink); border-radius:999px; padding:15px 32px; font-size:16px; font-weight:600; letter-spacing:.02em; transition:background .25s var(--ease); }
.btn--add:hover{ background:var(--gold-light); }
.btn--wish{ width:48px; height:48px; border:1px solid var(--line-soft); border-radius:50%; display:grid; place-items:center; color:var(--on-dark); transition:all .25s var(--ease); }
.btn--wish:hover{ border-color:var(--gold); color:var(--gold); }
.btn--wish svg{ width:19px; height:19px; }
.pinfo__meta{ font-size:13px; color:var(--on-dark-faint); display:flex; gap:22px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:20px; }
.pdp__section{ margin-top:64px; }
.pdp__h{ font-size:clamp(20px,2vw,28px); font-weight:200; margin-bottom:22px; }
.spec-table{ width:100%; border-collapse:collapse; max-width:760px; }
.spec-table tr{ border-bottom:1px solid var(--line-soft); }
.spec-table th{ text-align:left; font-weight:400; color:var(--on-dark-muted); font-size:16px; padding:14px 0; width:240px; }
.spec-table td{ color:var(--on-dark); font-size:16px; padding:14px 0; }
.downloads{ display:flex; gap:12px; flex-wrap:wrap; }
.dl{ display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border:1px solid var(--line-soft); border-radius:8px; font-size:16px; color:var(--on-dark); transition:all .25s var(--ease); }
.dl:hover{ border-color:var(--gold); color:var(--gold); }
.dl svg{ width:18px; height:18px; color:var(--gold); }
.related{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.related .ptile{ aspect-ratio:1/1; }
@media (max-width:900px){
.pdp__main{ grid-template-columns:1fr; gap:28px; }
.gallery{ position:static; }
.related{ grid-template-columns:repeat(2,1fr); }
}
/* =====================================================================
Projects — listing + detail (dark, 1440 contained)
===================================================================== */
.jgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); padding-bottom:64px; }
.jcard{ position:relative; display:block; overflow:hidden; aspect-ratio:4/3; background:var(--ink-3); }
.jcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.jcard:hover img{ transform:scale(1.05); }
.jcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 44%,rgba(15,14,10,.82)); }
.jcard__txt{ position:absolute; left:22px; right:22px; bottom:20px; z-index:1; display:flex; flex-direction:column; gap:6px; }
.jcard__tag{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); }
.jcard__name{ display:block; font-size:clamp(19px,1.5vw,23px); font-weight:300; color:#fff; line-height:1.2; }
.jcard__loc{ display:block; font-size:13px; color:var(--on-dark-muted); }
.jhero{ position:relative; overflow:hidden; height:clamp(420px,58vh,600px); display:flex; align-items:flex-end; isolation:isolate; margin-top:18px; }
.jhero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.jhero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(15,14,10,.15),rgba(15,14,10,.85)); }
.jhero__in{ padding:0 46px 44px; }
.jhero__tag{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-light); }
.jhero__name{ font-size:clamp(30px,4vw,54px); font-weight:200; line-height:1.06; margin-top:14px; }
.jmeta{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-bottom:1px solid var(--line-soft); padding:38px 0; }
.jmeta__k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-faint); margin-bottom:8px; }
.jmeta__v{ font-size:15px; color:var(--on-dark); }
.jbody{ display:grid; grid-template-columns:1fr; gap:24px; padding:46px 0; }
.jbody h2{ font-size:clamp(20px,2vw,26px); font-weight:200; }
.jbody p{ color:var(--on-dark-muted); font-size:15px; margin-bottom:16px; }
.jgallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); padding-bottom:70px; }
.jgallery .g-wide{ grid-column:span 2; }
.jgallery a{ display:block; overflow:hidden; aspect-ratio:16/10; background:var(--ink-3); }
.jgallery img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.jgallery a:hover img{ transform:scale(1.04); }
@media (max-width:900px){ .jgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:780px){ .jmeta{ grid-template-columns:1fr 1fr; } .jbody{ grid-template-columns:1fr; gap:18px; } .jgallery{ grid-template-columns:1fr; } .jgallery .g-wide{ grid-column:span 1; } }
@media (max-width:600px){ .jgrid{ grid-template-columns:1fr; } }
/* =====================================================================
Phase D — About / News / Contact (dark, 1440 contained)
===================================================================== */
.page-intro{ max-width:760px; color:var(--on-dark-muted); font-size:16px; line-height:1.7; padding-bottom:14px; }
.about-intro{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; padding:30px 0; }
.about-intro h2{ font-size:clamp(22px,2.4vw,32px); font-weight:200; line-height:1.18; margin-bottom:18px; }
.about-intro p{ color:var(--on-dark-muted); font-size:15px; margin-bottom:14px; }
.about-intro__media{ aspect-ratio:4/3; overflow:hidden; background:var(--ink-3); }
.about-intro__media img{ width:100%; height:100%; object-fit:cover; }
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); padding:8px 0 6px; }
.feat{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:12px; padding:30px 26px; }
.feat__ic{ width:48px; height:48px; border-radius:12px; background:var(--ink-3); border:1px solid var(--line-soft); display:grid; place-items:center; color:var(--gold); margin-bottom:18px; }
.feat__ic svg{ width:22px; height:22px; }
.feat h3{ font-size:18px; font-weight:400; margin-bottom:10px; }
.feat p{ font-size:16px; color:var(--on-dark-muted); }
.timeline{ max-width:780px; margin:6px auto 0; }
.tl{ display:grid; grid-template-columns:120px 1fr; gap:28px; padding:22px 0; border-top:1px solid var(--line-soft); }
.tl__y{ color:var(--gold); font-size:20px; font-weight:300; }
.tl__t h3{ font-size:16px; font-weight:400; margin-bottom:6px; }
.tl__t p{ font-size:16px; color:var(--on-dark-muted); }
/* News listing */
.ngrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 30px; padding-bottom:66px; }
.nart{ display:flex; flex-direction:column; }
.nart__media{ aspect-ratio:16/10; overflow:hidden; background:var(--ink-3); margin-bottom:16px; }
.nart__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.nart:hover .nart__media img{ transform:scale(1.05); }
.nart__date{ font-size:12px; letter-spacing:.04em; color:#E2554A; }
.nart__title{ font-size:19px; font-weight:300; line-height:1.35; margin:9px 0; transition:color .25s var(--ease); }
.nart:hover .nart__title{ color:var(--gold); }
.nart__ex{ font-size:16px; color:var(--on-dark-muted); }
/* Article (news detail) */
.article{ max-width:820px; margin:0 auto; }
.article__cat{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:6px; }
.article__cat svg{ width:14px; height:14px; flex:0 0 auto; }
.article__title{ font-size:clamp(28px,3.4vw,46px); font-weight:200; line-height:1.1; margin:14px 0 12px; }
.article__meta{ font-size:13px; color:var(--on-dark-faint); margin-bottom:28px; }
.article__hero{ aspect-ratio:16/9; overflow:hidden; background:var(--ink-3); margin-bottom:34px; }
.article__hero img{ width:100%; height:100%; object-fit:cover; }
.article__body p{ color:var(--on-dark-muted); font-size:16px; line-height:1.85; margin-bottom:20px; }
.article__body h2{ font-size:22px; font-weight:300; margin:32px 0 14px; color:var(--on-dark); }
/* Contact */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:54px; padding-bottom:40px; }
.cform{ display:grid; gap:16px; }
.cform .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cform label{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-faint); margin-bottom:7px; }
.cform input,.cform textarea{ width:100%; background:rgba(244,239,227,.05); border:1px solid var(--line-soft); border-radius:8px; padding:13px 15px; color:var(--on-dark); font:inherit; font-size:16px; outline:none; transition:border-color .2s var(--ease); }
.cform input:focus,.cform textarea:focus{ border-color:var(--gold); }
.cform textarea{ min-height:150px; resize:vertical; }
.cinfo__block{ margin-bottom:28px; }
.cinfo__block h3{ font-size:16px; font-weight:400; margin-bottom:12px; }
.cinfo__row{ display:flex; gap:12px; font-size:16px; color:var(--on-dark-muted); padding:6px 0; }
.cinfo__row svg{ width:17px; height:17px; color:var(--gold); flex:0 0 auto; margin-top:3px; }
.cmap{ aspect-ratio:16/9; background:var(--ink-3); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; margin-top:10px; }
.cmap img{ width:100%; height:100%; object-fit:cover; opacity:.7; }
@media (max-width:860px){
.about-intro,.contact-grid{ grid-template-columns:1fr; gap:26px; }
.feat-grid{ grid-template-columns:repeat(2,1fr); }
.ngrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
.feat-grid,.ngrid{ grid-template-columns:1fr; }
.cform .row2{ grid-template-columns:1fr; }
.tl{ grid-template-columns:1fr; gap:6px; }
}
/* =====================================================================
Phase E/F/G — Cart · Checkout · Order · Auth · Account · Utility
===================================================================== */
.btn--block{ width:100%; justify-content:center; display:inline-flex; }
.btn--ghost-line{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border:1px solid var(--line-mid); border-radius:999px; font-size:16px; font-weight:600; color:var(--on-dark); transition:all .25s var(--ease); }
.btn--ghost-line:hover{ border-color:var(--gold); color:var(--gold); }
/* Cart + Checkout shared two-column */
.cart,.checkout{ display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:start; padding-bottom:64px; }
.citem{ display:grid; grid-template-columns:96px 1fr auto; gap:18px; padding:20px 0; border-bottom:1px solid var(--line-soft); align-items:center; }
.citem__img{ width:96px; height:96px; background:var(--ink-3); overflow:hidden; border-radius:8px; }
.citem__img img{ width:100%; height:100%; object-fit:cover; }
.citem__name{ font-size:16px; font-weight:300; }
.citem__var{ font-size:13px; color:var(--on-dark-muted); margin-top:4px; }
.citem__right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.citem__price{ font-size:15px; }
.citem__rm{ font-size:12px; color:var(--on-dark-faint); }
.citem__rm:hover{ color:var(--gold); }
.summary{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:12px; padding:26px; position:sticky; top:96px; }
.summary h3{ font-size:18px; font-weight:300; margin-bottom:18px; }
.summary__row{ display:flex; justify-content:space-between; font-size:16px; color:var(--on-dark-muted); padding:8px 0; }
.summary__row.total{ color:var(--on-dark); font-size:18px; border-top:1px solid var(--line-soft); margin-top:8px; padding-top:16px; }
.coupon{ display:flex; gap:8px; margin:16px 0; }
.coupon input{ flex:1; background:rgba(244,239,227,.05); border:1px solid var(--line-soft); border-radius:8px; padding:11px 13px; color:var(--on-dark); font:inherit; font-size:16px; outline:none; }
/* Checkout steps */
.steps{ display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 0 38px; flex-wrap:wrap; }
.step{ display:flex; align-items:center; gap:10px; color:var(--on-dark-faint); font-size:13px; }
.step__n{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line-soft); display:grid; place-items:center; font-size:12px; }
.step.is-active{ color:var(--gold); } .step.is-active .step__n{ border-color:var(--gold); color:var(--gold); }
.step__line{ width:40px; height:1px; background:var(--line-soft); }
.cogroup{ margin-bottom:30px; }
.cogroup h3{ font-size:16px; font-weight:400; margin-bottom:14px; }
.pay-opt{ display:flex; align-items:center; gap:12px; border:1px solid var(--line-soft); border-radius:8px; padding:15px; margin-bottom:10px; cursor:pointer; font-size:16px; color:var(--on-dark-muted); transition:border-color .2s var(--ease); }
.pay-opt.is-active{ border-color:var(--gold); color:var(--on-dark); }
.pay-opt i{ width:14px; height:14px; border-radius:50%; border:1px solid var(--line-mid); display:inline-block; }
.pay-opt.is-active i{ border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 3px var(--ink-2); }
/* Order complete */
.complete{ max-width:620px; margin:46px auto 96px; text-align:center; }
.complete__ic{ width:74px; height:74px; border-radius:50%; border:1px solid var(--gold); color:var(--gold); display:grid; place-items:center; margin:0 auto 24px; }
.complete__ic svg{ width:32px; height:32px; }
.complete h1{ font-weight:200; font-size:clamp(26px,3vw,38px); margin-bottom:12px; }
.complete p{ color:var(--on-dark-muted); margin-bottom:8px; font-size:15px; }
.complete__order{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:12px; padding:22px 26px; margin:28px 0; text-align:left; }
.complete__order .summary__row{ color:var(--on-dark-muted); }
/* Auth */
.auth{ max-width:430px; margin:44px auto 90px; }
.auth__title{ font-size:clamp(24px,2.4vw,32px); font-weight:200; text-align:center; margin-bottom:8px; }
.auth__sub{ text-align:center; color:var(--on-dark-muted); font-size:16px; margin-bottom:28px; }
.auth__row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--on-dark-muted); }
.auth__row a{ color:var(--gold); }
.auth__alt{ text-align:center; margin-top:20px; font-size:16px; color:var(--on-dark-muted); }
.auth__alt a{ color:var(--gold); }
/* Account dashboard */
.acct{ display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; padding-bottom:64px; }
.acct__nav{ display:flex; flex-direction:column; gap:2px; position:sticky; top:96px; }
.acct__nav a{ padding:12px 14px; border-radius:8px; font-size:16px; color:var(--on-dark-muted); transition:all .2s var(--ease); }
.acct__nav a.is-active,.acct__nav a:hover{ background:var(--ink-2); color:var(--on-dark); }
.order-card{ border:1px solid var(--line-soft); border-radius:12px; padding:22px; margin-bottom:16px; }
.order-card__top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px; color:var(--on-dark-muted); border-bottom:1px solid var(--line-soft); padding-bottom:14px; margin-bottom:16px; }
.badge{ font-size:11px; padding:5px 11px; border-radius:999px; letter-spacing:.04em; }
.badge--processing{ background:rgba(236,198,119,.15); color:var(--gold-light); }
.badge--shipped{ background:rgba(140,179,214,.16); color:#9fc1e0; }
.badge--done{ background:rgba(123,196,155,.16); color:#8ed1a8; }
.track{ display:flex; margin-top:6px; }
.track__s{ flex:1; text-align:center; font-size:12px; color:var(--on-dark-faint); position:relative; padding-top:22px; }
.track__s::before{ content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:var(--ink-3); border:1px solid var(--line-mid); }
.track__s::after{ content:""; position:absolute; top:11px; left:-50%; width:100%; height:1px; background:var(--line-soft); z-index:-1; }
.track__s:first-child::after{ display:none; }
.track__s.is-done{ color:var(--gold); }
.track__s.is-done::before{ background:var(--gold); border-color:var(--gold); }
/* Wishlist */
.wishgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); padding-bottom:64px; }
.wcard{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; }
.wcard__media{ position:relative; aspect-ratio:1/1; background:var(--ink-3); overflow:hidden; }
.wcard__media img{ width:100%; height:100%; object-fit:cover; }
.wcard__rm{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(15,14,10,.6); color:#fff; display:grid; place-items:center; font-size:16px; }
.wcard__rm:hover{ color:var(--gold); }
.wcard__body{ padding:16px; }
.wcard__name{ font-size:15px; font-weight:300; }
.wcard__price{ font-size:16px; color:var(--on-dark-muted); margin:4px 0 12px; }
.wcard .btn--add{ width:100%; padding:11px; font-size:13px; }
/* Utility pages */
.errpage{ text-align:center; padding:70px 0 110px; }
.errpage h1{ font-size:clamp(70px,12vw,150px); font-weight:200; color:var(--gold); line-height:1; }
.errpage p{ color:var(--on-dark-muted); margin:12px 0 28px; }
.sitemap{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; padding-bottom:64px; }
.sitemap h3{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.sitemap a{ display:block; padding:7px 0; font-size:16px; color:var(--on-dark-muted); transition:color .2s var(--ease); }
.sitemap a:hover{ color:var(--gold); }
.legal{ max-width:820px; margin:0 auto; padding-bottom:72px; }
.legal h2{ font-size:20px; font-weight:300; margin:30px 0 12px; }
.legal p{ color:var(--on-dark-muted); font-size:15px; line-height:1.85; margin-bottom:14px; }
@media (max-width:900px){
.cart,.checkout,.acct{ grid-template-columns:1fr; gap:30px; }
.summary{ position:static; }
.wishgrid{ grid-template-columns:repeat(2,1fr); }
.sitemap{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
.wishgrid,.sitemap{ grid-template-columns:1fr; }
.citem{ grid-template-columns:72px 1fr; }
.citem__right{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
}
/* Reveal-on-scroll — tiles rise up as they enter the viewport */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (max-width:900px){
.pgrid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
.subpage .container{ padding-inline:18px; }
.pgrid{ grid-template-columns:repeat(2,1fr); }
}
/* =====================================================================
WIREFRAME / LAYOUT DEBUG — add class "wire" to .
Hides every image & gradient and fills tiles with flat colours so the
real grid, gaps and alignment are visible. Remove the class to restore.
===================================================================== */
body.wire .tile img,
body.wire .slide__bg,
body.wire .cta__bg,
body.wire .tile__play{ display:none !important; }
body.wire .tile::after,
body.wire .slide::after,
body.wire .cta::after{ background:none !important; }
body.wire .tile{ outline:1px solid rgba(255,255,255,.22); outline-offset:-1px; }
body.wire .tile__label,
body.wire .tile__sub{ color:#0c0b08 !important; }
/* per-section fills */
body.wire .hero{ background:#41506e; }
body.wire .m-cat .tile{ background:#7db3c4; } /* categories — teal */
body.wire .m-row4 .tile{ background:#d6b15e; } /* products — amber */
body.wire .m-proj .tile{ background:#6f86c9; } /* projects — blue */
body.wire .band--video .tile{ background:#9b7bc4; } /* video — purple */
body.wire #services .tile{ background:#7bc49b; } /* services — green */
body.wire #news .tile{ background:#c47b94; } /* news — rose */
body.wire .cta{ background:#3a4a3f; }
body.wire .tile:nth-child(even){ filter:brightness(.85); }
body.wire .marquee__track span{ color:#9a948a; }
/* ---------- Search popup (header search icon) ---------- */
.search-modal{
position:fixed; inset:0; z-index:120;
display:flex; justify-content:center; align-items:flex-start;
visibility:hidden; opacity:0;
transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.search-modal.is-open{ visibility:visible; opacity:1; transition:opacity .3s var(--ease); }
.search-modal__backdrop{
position:absolute; inset:0;
background:rgba(10,9,6,.72); backdrop-filter:blur(6px) saturate(120%);
}
.search-modal__panel{
position:relative; width:100%; max-width:760px; margin:0 24px;
margin-top:14vh; padding:34px 38px 30px;
background:var(--ink-2); border:1px solid var(--line-mid);
border-radius:16px; box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
transform:translateY(-16px); transition:transform .35s var(--ease);
}
.search-modal.is-open .search-modal__panel{ transform:translateY(0); }
.search-modal__close{ position:absolute; top:12px; right:12px; }
.search-modal__form{
display:flex; align-items:center; gap:12px;
border-bottom:1px solid var(--line-mid); padding-bottom:14px;
}
.search-modal__form > svg{ width:24px; height:24px; color:var(--gold); flex:0 0 auto; }
.search-modal__input{
flex:1 1 auto; min-width:0; background:none; border:none; outline:none;
color:var(--on-dark); font-family:var(--font-sans); font-weight:300;
font-size:24px; letter-spacing:.01em; padding:6px 0;
}
.search-modal__input::placeholder{ color:var(--on-dark-faint); }
.search-modal__submit{
flex:0 0 auto; background:var(--gold); color:var(--ink);
font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
padding:11px 22px; border-radius:999px; transition:background .25s var(--ease);
}
.search-modal__submit:hover{ background:var(--gold-light); }
.search-modal__suggest{
display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px;
}
.search-modal__label{
font-size:12px; letter-spacing:.06em; text-transform:uppercase;
color:var(--on-dark-muted); margin-right:4px;
}
.search-modal__suggest a{
font-size:13px; color:var(--on-dark-muted);
border:1px solid var(--line-soft); border-radius:999px; padding:6px 14px;
transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.search-modal__suggest a:hover{ color:var(--gold); border-color:var(--line-mid); background:var(--ink-3); }
body.search-open{ overflow:hidden; }
@media (max-width:640px){
.search-modal__panel{ margin-top:8vh; padding:26px 22px 24px; }
.search-modal__input{ font-size:20px; }
.search-modal__submit{ padding:10px 16px; }
}
/* =====================================================================
CDN-structure additions — VCN brand tokens reused throughout
(partners, about caps, product filter sidebar, payment, TOC,
download, showroom, services, video gallery, forms)
===================================================================== */
/* ---------- Shared subpage section spacing ---------- */
.sect{ padding-block:18px; }
.sect--pad{ padding-block:40px; }
.eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.lead{ color:var(--on-dark-muted); font-size:15px; line-height:1.85; max-width:64ch; }
/* ---------- Partner / client logo strips (home + about) ---------- */
.logos__row{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; }
.logos__row .logo{ display:flex; align-items:center; justify-content:center; min-height:96px; background:var(--ink-2); color:var(--on-dark-muted); font-size:16px; letter-spacing:.12em; text-transform:uppercase; transition:color .25s var(--ease), background .25s var(--ease); }
.logos__row .logo:hover{ color:var(--gold); background:var(--ink-3); }
.logos__row .logo img{ max-height:40px; width:auto; opacity:.7; filter:grayscale(1); transition:opacity .25s var(--ease), filter .25s var(--ease); }
.logos__row .logo:hover img{ opacity:1; filter:none; }
/* ---------- About — capabilities / certifications / sub-brands ---------- */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cap{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:14px; padding:28px 26px; }
.cap h3{ font-size:18px; font-weight:400; margin-bottom:10px; }
.cap p{ color:var(--on-dark-muted); font-size:16px; line-height:1.8; }
.cert-row{ display:flex; flex-wrap:wrap; gap:12px; }
.cert{ border:1px solid var(--line-mid); border-radius:999px; padding:9px 18px; font-size:13px; letter-spacing:.06em; color:var(--on-dark-muted); }
.cert:hover{ color:var(--gold); border-color:var(--gold); }
.subbrand-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.subbrand{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:14px; padding:30px 26px; }
.subbrand h3{ font-size:20px; font-weight:300; color:var(--gold); margin-bottom:8px; }
.subbrand p{ color:var(--on-dark-muted); font-size:16px; line-height:1.8; }
/* ---------- Product listing — advanced filter sidebar ---------- */
.plp-wrap{ display:grid; grid-template-columns:264px 1fr; gap:40px; align-items:start; }
.fbar{ position:sticky; top:90px; border:1px solid var(--line-soft); border-radius:14px; padding:22px 20px; background:var(--ink-2); }
.fbar__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.fbar__head h3{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:500; }
.fclear{ font-size:12px; color:var(--on-dark-faint); }
.fclear:hover{ color:var(--gold); }
.fgroup{ border-top:1px solid var(--line-soft); padding:6px 0; }
.fgroup__title{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:11px 0; font-size:16px; color:var(--on-dark); background:none; border:none; cursor:pointer; text-align:left; }
.fgroup__title .pm{ color:var(--gold); transition:transform .25s var(--ease); }
.fgroup.is-open .fgroup__title .pm{ transform:rotate(45deg); }
.fgroup__body{ display:none; padding:2px 0 10px; }
.fgroup.is-open .fgroup__body{ display:block; }
.fopt{ display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13.5px; color:var(--on-dark-muted); cursor:pointer; }
.fopt input{ accent-color:var(--gold); width:15px; height:15px; }
.fopt:hover{ color:var(--gold); }
/* ---------- PLP — left category rail (feedback VCN t209m1) ---------- */
.catbar{ position:sticky; top:90px; border:1px solid var(--line-soft); border-radius:14px; padding:14px 8px; background:var(--ink-2); }
.catbar__head{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:500; padding:6px 14px 12px; }
.catbar__list{ display:flex; flex-direction:column; }
.catbar__item{ position:relative; width:100%; text-align:left; padding:12px 14px; font-size:14.5px; line-height:1.3; color:var(--on-dark-muted); background:none; border:none; border-left:2px solid transparent; border-radius:0 8px 8px 0; cursor:pointer; transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.catbar__item:hover{ color:var(--on-dark); background:rgba(255,255,255,.05); }
.catbar__item.is-active{ color:var(--gold); border-left-color:var(--gold); background:rgba(216,154,78,.10); font-weight:500; }
/* ---------- Project detail — products used / related / share ---------- */
.used-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.used{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; }
.used img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.used span{ display:block; padding:13px 15px; font-size:16px; color:var(--on-dark); }
.band--share{ padding-block:52px 36px; }
.share-row{ display:flex; align-items:center; gap:12px; }
.share-row span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-faint); }
.share-row a{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-mid); border-radius:50%; color:var(--on-dark-muted); transition:color .2s var(--ease), border-color .2s var(--ease); }
.share-row a:hover{ color:var(--gold); border-color:var(--gold); }
.share-row a svg{ width:17px; height:17px; }
/* ---------- News — year/month filter + featured ---------- */
.nfilter{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:32px; }
.nfilter select{ background:var(--ink-2); border:1px solid var(--line-mid); border-radius:8px; color:var(--on-dark); font:inherit; font-size:16px; padding:11px 16px; outline:none; }
.nfilter select:focus{ border-color:var(--gold); }
.nfeatured{ display:grid; grid-template-columns:1.3fr 1fr; gap:0; border:1px solid var(--line-soft); border-radius:16px; overflow:hidden; background:var(--ink-2); margin-bottom:30px; }
.nfeatured img{ width:100%; height:100%; min-height:320px; object-fit:cover; }
.nfeatured__body{ padding:40px 42px; display:flex; flex-direction:column; justify-content:center; }
.nfeatured__date{ font-size:12px; letter-spacing:.08em; color:var(--gold); margin-bottom:14px; }
.nfeatured__title{ font-size:28px; font-weight:300; line-height:1.25; margin-bottom:14px; }
.nfeatured p{ color:var(--on-dark-muted); font-size:16px; line-height:1.8; margin-bottom:20px; }
/* ---------- Product detail — contact-for-pricing box ---------- */
.buybox{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:22px 0; margin:22px 0; }
.buybox__note{ font-size:13px; color:var(--on-dark-faint); margin-bottom:18px; max-width:48ch; }
.buyrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.btn-buy{ display:inline-flex; align-items:center; gap:8px; background:var(--gold); color:var(--ink); font-size:16px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; padding:14px 30px; border-radius:999px; border:none; cursor:pointer; transition:background .25s var(--ease); }
.btn-buy:hover{ background:var(--gold-light); }
/* ---------- Article TOC (news / service detail) ---------- */
.doc{ display:grid; grid-template-columns:1fr 250px; gap:48px; align-items:start; }
.doc__main{ min-width:0; }
.toc{ position:sticky; top:96px; border-left:1px solid var(--line-mid); padding-left:20px; }
.toc__title{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.toc ul{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.toc a{ display:block; padding:6px 0; font-size:13.5px; line-height:1.5; color:var(--on-dark-muted); border-left:2px solid transparent; margin-left:-22px; padding-left:20px; transition:color .2s var(--ease), border-color .2s var(--ease); }
.toc a:hover{ color:var(--gold); }
.toc a.lvl3{ padding-left:34px; font-size:13px; }
.toc a.is-active{ color:var(--gold); border-left-color:var(--gold); }
.toc__btn{ display:none; }
/* ---------- Download center ---------- */
.dl-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.dl-tab{ font-size:16px; color:var(--on-dark-muted); border:1px solid var(--line-mid); border-radius:999px; padding:10px 22px; background:none; cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.dl-tab:hover{ color:var(--gold); }
.dl-tab.is-active{ color:var(--ink); background:var(--gold); border-color:var(--gold); }
.dl-filter{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:26px; }
.dl-filter .chips{ display:flex; gap:8px; flex-wrap:wrap; }
.dl-filter .chip{ font-size:12.5px; color:var(--on-dark-muted); border:1px solid var(--line-soft); border-radius:999px; padding:7px 15px; cursor:pointer; }
.dl-filter .chip.is-active,.dl-filter .chip:hover{ color:var(--gold); border-color:var(--gold); }
.dl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dl-card{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.dl-card__thumb{ aspect-ratio:4/3; background:var(--ink-3); overflow:hidden; }
.dl-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.dl-card__body{ padding:18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.dl-card__tag{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.dl-card__title{ font-size:15px; color:var(--on-dark); line-height:1.4; }
.dl-card__meta{ font-size:12px; color:var(--on-dark-faint); margin-top:auto; }
.dl-actions{ display:flex; gap:10px; padding:0 20px 20px; }
.btn-dl{ flex:1; text-align:center; font-size:13px; letter-spacing:.03em; padding:11px 14px; border-radius:999px; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.btn-dl--primary{ background:var(--gold); color:var(--ink); border:none; }
.btn-dl--primary:hover{ background:var(--gold-light); }
.btn-dl--ghost{ border:1px solid var(--line-mid); color:var(--on-dark-muted); }
.btn-dl--ghost:hover{ color:var(--gold); border-color:var(--gold); }
.upload{ border:1px dashed var(--line-mid); border-radius:16px; padding:40px; text-align:center; background:var(--ink-2); }
.upload.is-drag{ border-color:var(--gold); background:var(--ink-3); }
.upload svg{ width:42px; height:42px; color:var(--gold); margin-bottom:14px; }
.upload h3{ font-size:18px; font-weight:400; margin-bottom:6px; }
.upload p{ color:var(--on-dark-muted); font-size:16px; margin-bottom:18px; }
.upload input[type=file]{ display:none; }
.upload__btn{ display:inline-block; background:var(--gold); color:var(--ink); font-size:16px; font-weight:500; padding:12px 26px; border-radius:999px; cursor:pointer; }
.upload__list{ margin-top:18px; display:flex; flex-direction:column; gap:8px; text-align:left; }
.upload__file{ display:flex; justify-content:space-between; font-size:13px; color:var(--on-dark-muted); border:1px solid var(--line-soft); border-radius:8px; padding:10px 14px; }
/* ---------- Virtual showroom ---------- */
.sh-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.sh-card{ position:relative; border-radius:16px; overflow:hidden; min-height:300px; display:flex; align-items:flex-end; }
.sh-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.sh-card:hover img{ transform:scale(1.06); }
.sh-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,9,6,.86), rgba(10,9,6,.12) 60%, transparent); }
.sh-card__body{ position:relative; z-index:2; padding:28px 30px; width:100%; }
.sh-card__loc{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.sh-card__title{ font-size:22px; font-weight:300; color:#fff; margin-bottom:14px; }
.sh-enter{ display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:10px 20px; transition:background .25s var(--ease), color .25s var(--ease); }
.sh-enter:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
/* ---------- Service solutions ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc-card{ display:block; background:var(--ink-2); border:1px solid var(--line-soft); border-radius:16px; padding:32px 30px; transition:border-color .25s var(--ease), transform .25s var(--ease); }
.svc-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.svc-card__icon{ width:54px; height:54px; border-radius:12px; background:var(--ink-3); display:flex; align-items:center; justify-content:center; color:var(--gold); margin-bottom:20px; }
.svc-card__icon svg{ width:26px; height:26px; }
.svc-card h3{ font-size:19px; font-weight:400; margin-bottom:10px; }
.svc-card p{ color:var(--on-dark-muted); font-size:16px; line-height:1.8; margin-bottom:16px; }
.svc-card__more{ font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); }
.svc-grid--2{ grid-template-columns:repeat(2,1fr); }
.svc-card__num{ display:inline-block; font-size:13px; font-weight:500; color:var(--gold); letter-spacing:.06em; margin-right:8px; }
.svc-card h3{ display:flex; align-items:baseline; }
.svc-card__list{ list-style:none; margin:6px 0 18px; display:flex; flex-direction:column; gap:9px; }
.svc-card__list li{ position:relative; padding-left:20px; font-size:13.5px; color:var(--on-dark-muted); line-height:1.6; }
.svc-card__list li::before{ content:""; position:absolute; left:1px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--gold); }
/* ---------- Video gallery page ---------- */
.vg-cats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.vg-cat{ font-size:16px; color:var(--on-dark-muted); border:1px solid var(--line-mid); border-radius:999px; padding:10px 22px; background:none; cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.vg-cat.is-active,.vg-cat:hover{ color:var(--ink); background:var(--gold); border-color:var(--gold); }
.vg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.vg-card{ position:relative; border-radius:14px; overflow:hidden; cursor:pointer; background:var(--ink-2); border:1px solid var(--line-soft); }
.vg-card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.vg-card__media img,.vg-card__media video{ width:100%; height:100%; object-fit:cover; }
.vg-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,9,6,.5), transparent 55%); }
.vg-play{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; }
.vg-play span{ width:60px; height:60px; border-radius:50%; background:rgba(194,161,74,.92); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:transform .25s var(--ease); }
.vg-card:hover .vg-play span{ transform:scale(1.1); }
.vg-play svg{ width:26px; height:26px; }
.vg-card__body{ padding:16px 20px; }
.vg-card__cat{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.vg-card__title{ font-size:15px; color:var(--on-dark); margin-top:6px; }
.vg-modal{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:opacity .3s var(--ease), visibility 0s linear .3s; }
.vg-modal.is-open{ visibility:visible; opacity:1; transition:opacity .3s var(--ease); }
.vg-modal__backdrop{ position:absolute; inset:0; background:rgba(8,7,5,.86); backdrop-filter:blur(6px); }
.vg-modal__panel{ position:relative; width:min(960px,92vw); }
.vg-modal__panel video{ width:100%; border-radius:12px; display:block; }
.vg-modal__close{ position:absolute; top:-46px; right:0; }
/* ---------- Generic form feedback + map ---------- */
.form-msg{ display:none; font-size:16px; padding:13px 16px; border-radius:10px; margin-top:4px; }
.form-msg.is-show{ display:block; }
.form-msg.is-ok{ background:rgba(31,111,67,.16); border:1px solid rgba(95,180,130,.4); color:#bfe6cd; }
.form-msg.is-error{ background:rgba(150,50,50,.16); border:1px solid rgba(210,120,120,.4); color:#f0c9c9; }
.cform input.is-invalid,.cform textarea.is-invalid{ border-color:#d27878; }
.map-embed{ border-radius:12px; overflow:hidden; border:1px solid var(--line-soft); aspect-ratio:16/10; }
.map-embed iframe{ width:100%; height:100%; border:0; filter:grayscale(.4) invert(.92) hue-rotate(180deg); }
/* ---------- Responsive ---------- */
@media (max-width:1024px){
.plp-wrap{ grid-template-columns:1fr; }
.fbar{ position:static; }
.catbar{ position:static; }
.catbar__list{ flex-flow:row wrap; gap:6px; }
.catbar__item{ width:auto; border-left:none; border-radius:999px; border:1px solid var(--line-soft); }
.catbar__item.is-active{ border-color:var(--gold); }
.doc{ grid-template-columns:1fr; }
.toc{ position:static; border-left:none; padding-left:0; border-top:1px solid var(--line-mid); padding-top:18px; }
.cap-grid,.subbrand-grid,.svc-grid,.dl-grid,.vg-grid{ grid-template-columns:repeat(2,1fr); }
.used-grid{ grid-template-columns:repeat(2,1fr); }
.logos__row{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:680px){
.cap-grid,.subbrand-grid,.svc-grid,.dl-grid,.vg-grid,.sh-grid,.used-grid,.nfeatured{ grid-template-columns:1fr; }
.logos__row{ grid-template-columns:repeat(2,1fr); }
.nfeatured img{ min-height:220px; }
}
/* ===== task166: transparent header over hero (home), opaque on scroll ===== */
.home .site-header{
background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
border-bottom-color:transparent;
transition:background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
}
.home .site-header.is-scrolled{
background:rgba(21,20,15,.88); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom-color:var(--line-soft);
}
.home .hero{ margin-top:-74px; }
/* end task166 */
/* ---------- Task 166 · Read more buttons — brand gold fill on hover (ref cdnlight) ---------- */
.hero__link[data-i18n="hero.readmore"]{
padding:11px 24px;
border:1px solid var(--gold);
border-radius:4px;
position:relative;
overflow:hidden;
z-index:0;
transition:color .35s var(--ease);
}
.news__more,
.thv__more,
.btn--ghost-line,
.btn-dl--ghost{
position:relative;
overflow:hidden;
z-index:0;
}
.hero__link[data-i18n="hero.readmore"]::before,
.news__more::before,
.thv__more::before,
.btn--ghost-line::before,
.btn-dl--ghost::before{
content:"";
display:block;
position:absolute;
top:0; left:-25%;
width:0; height:100%;
background:var(--gold);
z-index:-1;
transform:skewX(-45deg);
transform-origin:left center;
transition:width .8s var(--ease);
}
.hero__link[data-i18n="hero.readmore"]:hover::before,
.news__more:hover::before,
.thv__more:hover::before,
.btn--ghost-line:hover::before,
.btn-dl--ghost:hover::before{
width:160%;
}
.hero__link[data-i18n="hero.readmore"]:hover,
.news__more:hover,
.thv__more:hover,
.btn--ghost-line:hover,
.btn-dl--ghost:hover{
color:var(--ink);
border-color:var(--gold);
}
.hero__link[data-i18n="hero.readmore"]:hover .ar{ transform:translateX(4px); }
/* fwimg — full-width image banner (task166 muc7) */
.fwimg{ display:block; width:100%; background:var(--ink); line-height:0; }
.fwimg img{ width:100%; height:clamp(280px,38vw,560px); object-fit:cover; display:block; }
/* fwslider — full-width image slider w/ arrows + dots (VCN feedback #8) */
.fwslider{ position:relative; background:var(--ink); overflow:hidden; isolation:isolate; }
.fwslider__viewport{ position:relative; height:clamp(280px,38vw,560px); }
.fwslide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s var(--ease); line-height:0; }
.fwslide.is-active{ opacity:1; visibility:visible; }
.fwslide img{ width:100%; height:100%; object-fit:cover; display:block; }
.fwslider__arrow{ z-index:5; }
.fwslider__dots{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px; }
.fwslider__dots button{ width:30px; height:3px; background:rgba(244,239,227,.3); transition:all .3s var(--ease); cursor:pointer; }
.fwslider__dots button.is-active{ background:var(--gold); width:46px; }
/* ===== PROJECTS — full-width slider + 2 videos (task166 muc8) ===== */
.projsec{ background:var(--ink); }
.projslider{ position:relative; height:clamp(420px,52vw,620px); overflow:hidden; isolation:isolate; }
.projslide{ position:absolute; inset:0; display:flex; align-items:flex-end; opacity:0; visibility:hidden; transition:opacity .9s var(--ease); }
.projslide.is-active{ opacity:1; visibility:visible; }
.projslide__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.projslide::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(15,14,10,.85) 0%, rgba(15,14,10,.25) 45%, rgba(15,14,10,0) 75%); }
.projslide__in{ width:100%; padding-bottom:clamp(34px,5vw,64px); }
.projslide__tag{ display:inline-block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-light); margin-bottom:14px; }
.projslide__title{ font-size:clamp(26px,3.6vw,50px); font-weight:200; line-height:1.1; color:var(--on-dark); max-width:20ch; margin-bottom:20px; }
.projslider__arrow{ z-index:5; }
.projslider__dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px; }
.projslider__dots button{ width:30px; height:3px; background:rgba(244,239,227,.3); transition:all .3s var(--ease); }
.projslider__dots button.is-active{ background:var(--gold); width:46px; }
/* Feedback (VCN #2): now THREE videos in an even grid (was two) */
.projvids{ display:grid; grid-template-columns:2fr 1fr; gap:var(--gap); margin-top:var(--gap); } /* t195m3: 1 large + 2 small */
.projvid{ position:relative; margin:0; overflow:hidden; background:#000; aspect-ratio:16/9; }
.projvid--lg{ grid-column:1; grid-row:1 / span 2; aspect-ratio:auto; }
.projvid--sm{ aspect-ratio:16/9; }
.projvid__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.projvid::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,14,10,.6), rgba(15,14,10,0) 55%); pointer-events:none; transition:opacity .3s var(--ease); }
.projvid.is-playing::after{ opacity:0; }
.projvid__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:64px; height:64px; border-radius:50%; border:1px solid var(--gold); background:rgba(216,154,78,.92); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:all .3s var(--ease); }
.projvid__play svg{ width:26px; height:26px; margin-left:3px; }
.projvid__play:hover{ background:var(--gold-light); transform:translate(-50%,-50%) scale(1.08); }
.projvid.is-playing .projvid__play{ opacity:0; visibility:hidden; }
.projvid__cap{ position:absolute; left:20px; bottom:16px; z-index:2; color:var(--on-dark); font-size:clamp(13px,1.3vw,16px); font-weight:300; letter-spacing:.02em; transition:opacity .3s var(--ease); }
.projvid.is-playing .projvid__cap{ opacity:0; }
@media (max-width:980px){
.projvids{ grid-template-columns:1fr 1fr; }
.projvid--lg{ grid-column:1 / -1; grid-row:auto; aspect-ratio:16/9; }
}
@media (max-width:640px){
.projvids{ grid-template-columns:1fr; }
.projvid--lg{ grid-column:1; grid-row:auto; aspect-ratio:16/9; }
.projvid,.projvid--sm{ aspect-ratio:16/9; }
}
/* =====================================================================
VCN feedback 2026-06 — page banners + about/services/projects blocks
===================================================================== */
/* ---- Shared sub-page hero banner (about / projects: top banner + title) ---- */
.pagehero{ position:relative; height:clamp(300px,34vw,440px); overflow:hidden; display:flex; align-items:center; isolation:isolate; }
.pagehero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.pagehero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(15,14,10,.82) 0%, rgba(15,14,10,.5) 45%, rgba(15,14,10,.2) 100%); }
.pagehero__in{ width:100%; }
.pagehero__crumb{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); margin-bottom:14px; display:flex; gap:8px; }
.pagehero__crumb a{ color:var(--gold-light); } .pagehero__crumb a:hover{ color:#fff; }
.pagehero__crumb span{ opacity:.6; }
.pagehero__title{ font-size:clamp(34px,4.4vw,60px); font-weight:200; line-height:1.05; color:#fff; letter-spacing:.01em; }
/* ---- Secondary section menu (about-us / services sub-nav, ref cdnlight) ---- */
.secnav{ background:#2A2925; border-bottom:1px solid var(--line-soft); position:sticky; top:74px; z-index:40; }
.secnav__in{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.secnav a{ padding:16px 26px; font-size:13.5px; letter-spacing:.04em; color:rgba(255,255,255,.86); white-space:nowrap; transition:color .25s var(--ease), background .25s var(--ease); border-bottom:2px solid transparent; }
.secnav a:hover,.secnav a.is-active{ color:#fff; background:rgba(255,255,255,.08); border-bottom-color:var(--gold); }
/* ---- About: stat band reused ---- */
.stats{ background:var(--ink-2); border-block:1px solid var(--line-soft); margin:34px 0; }
.stats__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:46px 0; }
.stat{ text-align:center; }
.stat__num{ display:block; font-size:clamp(34px,4vw,54px); font-weight:200; color:var(--gold); line-height:1; }
.stat__lab{ display:block; margin-top:10px; font-size:13px; letter-spacing:.04em; color:var(--on-dark-muted); }
/* ---- About: alternating image + text rows (left/right) ---- */
.altrows{ display:flex; flex-direction:column; gap:clamp(28px,4vw,60px); padding:18px 0 8px; }
.altrow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; }
.altrow--rev .altrow__media{ order:2; }
.altrow__media{ aspect-ratio:4/3; overflow:hidden; background:var(--ink-3); border:1px solid var(--line-soft); }
.altrow__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.altrow:hover .altrow__media img{ transform:scale(1.04); }
.altrow__tag{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.altrow h3{ font-size:clamp(22px,2.4vw,32px); font-weight:200; line-height:1.18; margin:12px 0 14px; color:#fff; }
.altrow p{ color:var(--on-dark-muted); font-size:15px; line-height:1.8; margin-bottom:12px; }
/* ---- About: Our Clients grouped by industry ---- */
.clients-ind{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); padding-bottom:12px; }
.cind{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:14px; padding:26px 28px; }
.cind h3{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.cind__list{ display:flex; flex-wrap:wrap; gap:10px; }
.cind__list span{ font-size:13.5px; color:var(--on-dark-muted); border:1px solid var(--line-soft); border-radius:999px; padding:8px 16px; transition:color .2s var(--ease), border-color .2s var(--ease); }
.cind__list span:hover{ color:var(--gold); border-color:var(--gold); }
/* Our Clients: sample logo tiles per industry (t195m8) */
.clients-note{ color:var(--on-dark-muted); font-size:16px; line-height:1.7; margin:-6px 0 22px; max-width:760px; }
.clients-note em{ font-style:normal; opacity:.72; }
.cind__logos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; }
.clogo{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:62px; padding:10px 12px; background:var(--ink-3,rgba(255,255,255,.02)); border:1px solid var(--line-soft); border-radius:10px; color:var(--on-dark-muted); font-size:13px; font-weight:600; letter-spacing:.03em; line-height:1.25; filter:grayscale(1); opacity:.8; transition:color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); }
.clogo:hover{ color:var(--gold); border-color:var(--gold); opacity:1; }
/* ---- Services: tabbed Warranty / Download ---- */
.svctabs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:8px 0 30px; }
.svctab{ font-size:16px; letter-spacing:.03em; color:var(--on-dark-muted); border:1px solid var(--line-mid); border-radius:999px; padding:12px 30px; background:none; cursor:pointer; transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.svctab:hover{ color:var(--gold); }
.svctab.is-active{ color:var(--ink); background:var(--gold); border-color:var(--gold); }
.svcpane{ display:none; }
.svcpane.is-active{ display:block; }
/* Warranty article */
.warranty{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
.warranty__media{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line-soft); background:var(--ink-3); }
.warranty__media img{ width:100%; height:100%; object-fit:cover; }
.warranty__body h2{ font-size:clamp(22px,2.4vw,30px); font-weight:200; margin-bottom:16px; color:#fff; }
.warranty__body p{ color:var(--on-dark-muted); font-size:15px; line-height:1.85; margin-bottom:16px; }
.warranty__body h3{ font-size:17px; font-weight:400; color:#fff; margin:22px 0 10px; }
.warranty__body ul{ display:flex; flex-direction:column; gap:10px; }
.warranty__body li{ position:relative; padding-left:20px; font-size:16px; color:var(--on-dark-muted); line-height:1.7; }
.warranty__body li::before{ content:""; position:absolute; left:1px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--gold); }
@media (max-width:900px){
.stats__in{ grid-template-columns:repeat(2,1fr); }
.altrow,.altrow--rev .altrow__media{ grid-template-columns:1fr; }
.altrow--rev .altrow__media{ order:0; }
.clients-ind{ grid-template-columns:1fr; }
.warranty{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:560px){ .stats__in{ grid-template-columns:1fr; } }
/* ---- Projects: masonry layout (ref cdnlight Projects/list.aspx) ---- */
.pmasonry{ columns:3; column-gap:var(--gap); padding-bottom:64px; }
.pmasonry .jcard{ display:block; break-inside:avoid; margin-bottom:var(--gap); aspect-ratio:auto; }
.pmasonry .jcard img{ position:static; width:100%; height:auto; }
.pmasonry .jcard.tall img{ aspect-ratio:3/4; object-fit:cover; }
.pmasonry .jcard.wide img{ aspect-ratio:16/10; object-fit:cover; }
.pmasonry .jcard.sq img{ aspect-ratio:1/1; object-fit:cover; }
@media (max-width:1024px){ .pmasonry{ columns:2; } }
@media (max-width:600px){ .pmasonry{ columns:1; } }
/* ===== About Us card menu (task195 m9) ===== */
.abmenu{ background:#221F1B; border-bottom:1px solid var(--line-soft); }
.abmenu__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:22px 0; }
.abm{ position:relative; display:flex; align-items:flex-end; min-height:128px; border-radius:10px; overflow:hidden; padding:16px 18px; isolation:isolate; }
.abm::before{ content:""; position:absolute; inset:0; background:var(--bg) center/cover no-repeat; transform:scale(1.02); transition:transform .5s var(--ease); z-index:-2; }
.abm::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,18,16,.12),rgba(20,18,16,.80)); z-index:-1; transition:background .3s var(--ease); }
.abm__label{ color:#fff; font-size:15px; font-weight:600; letter-spacing:.02em; line-height:1.3; }
.abm:hover::before{ transform:scale(1.08); }
.abm:hover::after{ background:linear-gradient(180deg,rgba(122,90,40,.22),rgba(20,18,16,.84)); }
.abm.is-active{ outline:2px solid var(--gold); outline-offset:-2px; }
.abm.is-active::after{ background:linear-gradient(180deg,rgba(122,90,40,.30),rgba(20,18,16,.86)); }
@media(max-width:860px){ .abmenu__in{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .abmenu__in{ grid-template-columns:1fr; } .abm{ min-height:96px; } }
/* ---- VCN feedback t320 mục 3: bỏ overlay tối + viền dày khi hover, chỉ zoom ảnh + label vàng ---- */
.mcard.is-current .mcard__label,
.mcard:hover .mcard__label{ color:var(--gold); }
/* ===== VCN feedback #11 — Mega dropdown trải FULL header width (ref: cdnlight) ===== */
@media (min-width:1025px){
.mega--cards{
position:fixed; top:74px; left:0; right:0;
width:100%; max-width:none;
transform:translateY(10px); /* chỉ slide-in, bỏ căn giữa ngang */
padding:30px 80px 34px; border-left:0; border-right:0;
}
.nav__item:hover .mega--cards{ transform:translateY(0); } /* đè translateX(-50%) của .mega gốc */
.mega--cards::before{ top:-24px; height:24px; left:0; right:0; } /* cầu hover full-width nối header → band */
.mega--cards .mega__slider{ max-width:1280px; margin-inline:auto; justify-content:center; }
.mega--cards .mega__track{ max-width:none; justify-content:center; }
.mega--cards .mega__panel{ max-width:1280px; margin-inline:auto; }
}
@media (min-width:1025px) and (max-width:1280px){ .mega--cards{ padding-inline:48px; } }
/* ===== t200 m10: 3 videos to ra full, gan sat mep website (near full-bleed) ===== */
/* .projvids dong thoi la .container (padding-inline 80px) -> giam padding cho video gan sat mep, chua ~24px gutter */
.projvids{ padding-inline:24px; }
@media (max-width:640px){ .projvids{ padding-inline:16px; } }
/* =====================================================================
VCN feedback round 2 (task VSXTM-6) — CDN-style polish
Áp lên cuối style.css, đè các rule liên quan ở trên.
===================================================================== */
/* 1) Banner full dynamic viewport (đúng cả khi address bar ẩn/hiện) */
.hero{
height: 100vh; /* fallback */
height: 100svh;
height: 100dvh;
min-height: -webkit-fill-available;
}
/* 7) Zoom ảnh nền cực chậm khi slide active */
@keyframes vcnHeroZoom{
from{ transform: scale(1); }
to { transform: scale(1.08); }
}
.hero .slide__bg{ transition: transform .7s cubic-bezier(.22,.61,.36,1); transform: scale(1); }
.hero:hover .slide__bg{ transform: none; } /* huỷ rule hover cũ */
.hero .slide.is-active .slide__bg{
animation: vcnHeroZoom 9s cubic-bezier(.22,.61,.36,1) both;
}
/* 2) Title + subtitle banner: căn giữa màn hình + center text */
.hero .slide{ align-items: center !important; justify-content: flex-start; }
.hero .slide__in{
text-align: left;
/* t211m12: bỏ padding ngang 24px, để .container (80px) áp dụng -> mép trái text thẳng hàng logo header */
padding-block: 0;
display: flex; flex-direction: column; align-items: flex-start;
}
.hero .slide__title{
max-width: 24ch;
margin-left: 0; margin-right: auto;
}
.hero .slide__sector{ text-align: left; }
/* 3) Fade-in Up cho cụm chữ trên banner — delay sau khi ảnh bắt đầu zoom */
.hero .slide .slide__sector,
.hero .slide .slide__title,
.hero .slide .hero__link{
opacity: 0;
transform: translateY(28px);
transition: opacity .9s cubic-bezier(.22,.61,.36,1),
transform .9s cubic-bezier(.22,.61,.36,1);
}
.hero .slide.is-active .slide__sector{ transition-delay: .30s; }
.hero .slide.is-active .slide__title { transition-delay: .50s; }
.hero .slide.is-active .hero__link { transition-delay: .70s; }
.hero .slide.is-active .slide__sector,
.hero .slide.is-active .slide__title,
.hero .slide.is-active .hero__link{
opacity: 1;
transform: translateY(0);
}
/* 4) Nút Next/Prev: mảnh, mờ nhẹ, chỉ rõ khi hover, bám 2 mép */
.hero .hero__arrow{
width: 34px; height: 34px;
border: 1px solid rgba(255,255,255,.35);
background: rgba(255,255,255,.06);
backdrop-filter: blur(4px);
opacity: .55;
transition: opacity .3s var(--ease), background .3s var(--ease),
border-color .3s var(--ease), transform .3s var(--ease);
}
.hero .hero__arrow svg{ width: 14px; height: 14px; }
.hero:hover .hero__arrow{ opacity: .85; }
.hero .hero__arrow:hover{
opacity: 1;
background: rgba(255,255,255,.18);
border-color: #fff;
}
.hero .hero__arrow.prev{ left: 16px; }
.hero .hero__arrow.next{ right: 16px; }
/* task320m6: projslider arrow kế thừa .hero__arrow base (48px) quá to — thu nhỏ khớp banner */
.projslider .hero__arrow{
width: 34px; height: 34px;
}
.projslider .hero__arrow svg{ width: 14px; height: 14px; }
.projslider .hero__arrow.prev{ left: 16px; }
.projslider .hero__arrow.next{ right: 16px; }
/* 5) Pagination chấm tròn (thay vì gạch ngang) */
.hero .hero__dots{ bottom: 30px; gap: 20px; }
.hero .hero__dots button{
width: 12px; height: 12px;
border-radius: 50%;
background: rgb(244 239 227 / 0%);
border: 2px solid rgb(255 255 255 / 63%);
transition: all .3s var(--ease);
}
.hero .hero__dots button.is-active{
width: 12px; height: 12px;
background: var(--gold);
border-color: var(--gold);
}
/* 8) Border drawing hover cho card tin tức (.ncard) */
.ncard{
position: relative;
border: none !important;
box-shadow: none !important;
}
.ncard::before,
.ncard::after{
content: "";
position: absolute;
pointer-events: none;
width: 0; height: 0;
transition: width .4s cubic-bezier(.22,.61,.36,1),
height .4s cubic-bezier(.22,.61,.36,1) .35s;
}
.ncard::before{
top: 0; left: 0;
border-top: 1px solid var(--gold);
border-left: 1px solid var(--gold);
}
.ncard::after{
bottom: 0; right: 0;
border-bottom: 1px solid var(--gold);
border-right: 1px solid var(--gold);
}
.ncard:hover::before,
.ncard:hover::after{
width: 100%; height: 100%;
}
/* 9) Menu hamburger: nền mờ ~92% */
@media (max-width:1024px){
.nav.is-open{
background: rgba(21,20,15,.92) !important;
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
}
}
/* 10) Read More: viền trắng mỏng, nền trong suốt, mũi tên ↗ ở phải */
.hero__link{
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 22px;
border: 1px solid rgba(255,255,255,.85);
background: transparent;
border-radius: 0;
color: #fff;
font-size: 13px;
letter-spacing: .14em;
text-transform: uppercase;
transition: background .3s var(--ease), color .3s var(--ease),
border-color .3s var(--ease);
}
.hero__link .ar{
display: inline-block;
transform: rotate(-45deg);
transition: transform .3s var(--ease);
}
.hero__link:hover{
background: rgba(255,255,255,.12);
color: #fff;
border-color: #fff;
}
.hero__link:hover .ar{
transform: rotate(-45deg) translateX(4px);
}
/* 11) Nút Play (video): vòng tròn đỏ + mũi tên trắng + scale hover */
.projvid__play,
.tile__play{
background: #E2554A !important;
border: 1px solid #E2554A !important;
color: #fff !important;
width: 64px; height: 64px;
}
.projvid__play svg,
.tile__play svg{
width: 26px; height: 26px;
fill: #fff;
color: #fff;
}
.projvid__play:hover,
.tile:hover .tile__play{
background: #d04638 !important;
border-color: #d04638 !important;
transform: translate(-50%,-50%) scale(1.1);
}
/* 12-13) Cỡ chữ + trọng lượng chữ tiêu đề (300) */
.slide__title{
font-size: 35px;
font-weight: 300;
line-height: 1.15;
}
.sec-title,
.news__title{
font-size: 25px;
font-weight: 300;
letter-spacing: .01em;
}
.cta__title{ font-weight: 300; }
/* ---------- Mobile (<= 640px) refinements ---------- */
@media (max-width:768px){
/* huỷ rule cũ dồn text xuống bottom-left */
.hero .slide{ align-items: center !important; }
.hero .slide__in{ padding-bottom: 0; }
/* task320m8: nút chuyển slide mobile quá to — giảm 50% (30px->15px) */
.hero .hero__arrow{ display: grid; width: 15px; height: 15px; }
.hero .hero__arrow svg{ width: 6.5px; height: 6.5px; }
.hero .hero__arrow.prev{ left: 8px; }
.hero .hero__arrow.next{ right: 8px; }
/* task320m6: projslider arrow mobile — khớp size banner */
.projslider .hero__arrow{ display: grid; width: 30px; height: 30px; }
.projslider .hero__arrow svg{ width: 13px; height: 13px; }
.projslider .hero__arrow.prev{ left: 8px; }
.projslider .hero__arrow.next{ right: 8px; }
/* dots ở giữa dưới (override rule cũ đẩy sang trái) */
.hero .hero__dots{
left: 50%; transform: translateX(-50%);
bottom: 24px;
}
}
@media (max-width:640px){
.slide__title{ font-size: 30px; }
.hero .slide__in{ padding: 0 18px; }
}
/* Patch: tăng specificity Read More để đè rule có attribute selector */
.hero__link[data-i18n],
a.hero__link{
border: 1px solid rgba(255,255,255,.85) !important;
background: transparent !important;
color: #fff !important;
padding: 12px 22px !important;
border-radius: 0 !important;
font-size: 13px;
}
.hero__link[data-i18n]:hover,
a.hero__link:hover{
background: rgba(255,255,255,.12) !important;
border-color: #fff !important;
}
/* ---------- PDP gallery dots + key spec icons (task209 m4) ---------- */
.gallery__dots{ display:flex; justify-content:center; gap:10px; margin-top:14px; }
.gallery__dots button{ width:9px; height:9px; padding:0; border-radius:50%; background:transparent; border:1.5px solid var(--on-dark-faint); cursor:pointer; transition:background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.gallery__dots button:hover{ border-color:var(--gold); }
.gallery__dots button.is-active{ background:var(--gold); border-color:var(--gold); transform:scale(1.15); }
.gallery__specs{ list-style:none; margin:24px 0 0; padding:22px 0 0; border-top:1px solid var(--line-soft); display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.gallery__specs li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; }
.gallery__specs svg{ width:26px; height:26px; color:var(--gold); }
.gallery__specs span{ font-size:12.5px; color:var(--on-dark); font-weight:400; line-height:1.2; }
.gallery__specs small{ font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--on-dark-faint); }
@media (max-width:560px){ .gallery__specs{ grid-template-columns:repeat(3,1fr); row-gap:22px; } }
/* ---------- Product listing — Advanced Filtering bar (muc 2) ---------- */
.afilter{ border:none; border-radius:14px; background:var(--ink-2); padding:18px 20px 20px; margin-bottom:34px; }
.afilter__head{ display:flex; justify-content:space-between; align-items:center; margin:-18px -20px 14px; padding:14px 20px; background:var(--ink-3); border-radius:14px 14px 0 0; }
.afilter__label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:500; }
.afilter__clear{ font-size:12px; color:var(--on-dark-faint); background:none; border:none; cursor:pointer; transition:color .2s var(--ease); }
.afilter__clear:hover{ color:var(--gold); }
.afilter__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.afilter .affield{ width:100%; appearance:none; -webkit-appearance:none; background:var(--ink-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A227' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center; background-size:11px 8px; border:1px solid var(--line-mid); border-radius:8px; color:var(--on-dark-faint); font:inherit; font-size:13.5px; line-height:1.2; padding:11px 34px 11px 14px; outline:none; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease); }
.afilter .affield:hover{ border-color:var(--gold); }
.afilter .affield:focus{ border-color:var(--gold); }
.afilter .affield.is-set{ color:var(--on-dark); border-color:var(--gold); }
.afilter .affield option{ color:var(--ink); }
@media (max-width:900px){ .afilter__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .afilter__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .afilter__grid{ grid-template-columns:1fr; } }
/* ============ Task 209 · #9 — Project card hover overlay (slide-up from bottom) ============ */
.pmasonry .jcard{ isolation:isolate; }
.jcard__ov{
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; justify-content:flex-end;
gap:7px; padding:26px 22px 24px;
background:linear-gradient(180deg, rgba(15,14,10,.10) 0%, rgba(15,14,10,.86) 62%, rgba(15,14,10,.95) 100%);
transform:translateY(100%);
transition:transform .5s var(--ease);
pointer-events:none;
}
.jcard:hover .jcard__ov,
.jcard:focus-within .jcard__ov{ transform:translateY(0); }
.jcard:hover .jcard__txt{ opacity:0; transition:opacity .28s var(--ease); }
.jcard__ov-name{ font-size:clamp(19px,1.5vw,23px); font-weight:300; color:#fff; line-height:1.25; margin-bottom:5px; }
.jcard__ov-meta{ font-size:13.5px; color:var(--on-dark-muted); letter-spacing:.01em; }
.jcard__ov-meta b{ color:#fff; font-weight:400; }
/* CTA synced 1:1 with home Read more CTA — .hero__link[data-i18n=hero.readmore] */
.jcard__cta{
align-self:flex-start; margin-top:12px; pointer-events:auto;
display:inline-flex; align-items:center; gap:9px;
font-size:13px; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
color:var(--on-dark); padding:10px 22px;
border:1px solid var(--gold); border-radius:4px;
position:relative; overflow:hidden; z-index:0;
transition:color .35s var(--ease);
}
.jcard__cta::before{
content:""; display:block; position:absolute; top:0; left:-25%;
width:0; height:100%; background:var(--gold); z-index:-1;
transform:skewX(-45deg); transform-origin:left center;
transition:width .8s var(--ease);
}
.jcard__cta:hover::before{ width:160%; }
.jcard__cta:hover{ color:var(--ink); border-color:var(--gold); }
.jcard__cta .ar{ transition:transform .3s var(--ease); }
.jcard__cta:hover .ar{ transform:translateX(4px); }
/* === MỤC 10 (t209): nfeat featured slider — cdnlight News/list.aspx (grey fullwidth band) === */
.nfeat{ background:#ECECEC; padding:46px 0 58px; margin-bottom:34px; }
.nfeat__heading{ font-size:clamp(22px,2.2vw,28px); font-weight:400; letter-spacing:.01em; color:#1a1a1a; margin-bottom:24px; }
.nfeat__slider{ position:relative; }
.nfeat__viewport{ overflow:hidden; }
.nfeat__track{ display:flex; transition:transform .5s var(--ease); }
.nfeat__slide{ flex:0 0 100%; display:grid; grid-template-columns:1.2fr 1fr; background:#fff; }
.nfeat__media{ aspect-ratio:16/9; overflow:hidden; background:#dcdcdc; }
.nfeat__media img{ width:100%; height:100%; object-fit:cover; }
.nfeat__body{ padding:clamp(28px,3.4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.nfeat__date{ font-size:12px; letter-spacing:.05em; color:#E2554A; margin-bottom:18px; }
.nfeat__title{ font-size:clamp(18px,1.7vw,23px); font-weight:400; line-height:1.4; color:#222; margin-bottom:28px; }
.nfeat__btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.02em; color:#333; background:#fff; border:1px solid #c9c9c9; border-radius:2px; padding:9px 18px; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.nfeat__btn:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.nfeat__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); border:1px solid #d6d6d6; color:#555; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.12); transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.nfeat__arrow svg{ width:20px; height:20px; }
.nfeat__arrow--prev{ left:-12px; }
.nfeat__arrow--next{ right:-12px; }
.nfeat__arrow:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.nfeat__dots{ display:flex; gap:9px; justify-content:flex-end; margin-top:18px; }
.nfeat__dots button{ width:9px; height:9px; border-radius:50%; border:0; padding:0; background:#bcbcbc; cursor:pointer; transition:background .25s var(--ease), width .25s var(--ease); }
.nfeat__dots button.is-active{ background:var(--gold); width:9px; border-radius:50%; transform:scale(1.25); } /* t218m19: bar -> round dot, sync all sliders */
@media(max-width:720px){
.nfeat__slide{ grid-template-columns:1fr; }
.nfeat__arrow{ display:none; }
}
/* ===== T209 M12 · Global footprint location list (contact.html) ===== */
.geo{ padding-bottom:48px; }
.geo__region{ margin-top:38px; }
.geo__region-head{ font-size:clamp(18px,1.5vw,22px); font-weight:300; letter-spacing:.04em; color:var(--on-dark); padding-bottom:14px; margin-bottom:22px; border-bottom:1px solid var(--line-soft); }
.geo__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.geo-card{ position:relative; background:#2A2925; padding:20px; transition:background .25s var(--ease); }
.geo-card::before,.geo-card::after{ content:""; position:absolute; pointer-events:none; width:0; height:0; transition:width .4s cubic-bezier(.22,.61,.36,1), height .4s cubic-bezier(.22,.61,.36,1) .35s; }
.geo-card::before{ top:0; left:0; border-top:1px solid var(--gold); border-left:1px solid var(--gold); }
.geo-card::after{ bottom:0; right:0; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold); }
.geo-card:hover{ background:#34322B; }
.geo-card:hover::before,.geo-card:hover::after{ width:100%; height:100%; }
.geo-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.geo-card__country{ font-size:16px; font-weight:400; color:var(--on-dark); }
.geo-card__flag{ width:30px; height:auto; flex:0 0 auto; border:1px solid var(--line-soft); }
.geo-card__partner{ font-size:13px; color:#E2554A; margin-bottom:10px; }
.geo-card__rows{ display:flex; flex-direction:column; gap:6px; }
.geo-card__row{ font-size:13.5px; line-height:1.5; color:var(--on-dark-muted); }
@media (max-width:900px){ .geo__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .geo__grid{ grid-template-columns:1fr; } }
/* ============ Task 209 · #17 — Đồng bộ hiệu ứng nút "Read More" / CTA toàn site ============ */
/* Chuẩn = brand gold sweep-fill (task166). Hero & Featured-Project "Read More" bị patch
viền-trắng cũ đè -> tái khẳng định để khớp 1:1 với .news__more / .thv__more / .jcard__cta.
Kết quả: mọi nút Read More / CTA dùng CHUNG một hiệu ứng hover (gold sweep -> chữ ink). */
/* t320m29: bỏ ràng buộc [data-i18n="hero.readmore"] — nút "View Project" (projslider,
không có attribute này) và input submit (.hero__link) trước đó rớt xuống rule viền-trắng
cũ (dòng ~1586: `.hero__link[data-i18n], a.hero__link`, specificity 0,2,0). Dùng
`.hero__link.hero__link` (0,2,0, lặp class) để thắng patch cũ ở MỌI trường hợp — có/không
attribute, thẻ hay — bất kể thứ tự source. */
.hero__link.hero__link{
position:relative; overflow:hidden; z-index:0;
padding:11px 24px !important;
background:transparent !important;
border:1px solid var(--gold) !important;
border-radius:4px !important;
color:var(--on-dark) !important;
transition:color .35s var(--ease) !important;
}
.hero__link.hero__link::before{
content:""; display:block; position:absolute; top:0; left:-25%;
width:0; height:100%; background:var(--gold); z-index:-1;
transform:skewX(-45deg); transform-origin:left center;
transition:width .8s var(--ease);
}
.hero__link.hero__link:hover::before{ width:160%; }
.hero__link.hero__link:hover{
background:transparent !important;
color:var(--ink) !important;
border-color:var(--gold) !important;
}
.hero__link.hero__link:hover .ar{ color:var(--ink) !important; }
/* t209m18: nút play video căn giữa tuyệt đối trên thumbnail, khung 40x40px */
.projvid__play{
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
width:40px; height:40px;
display:grid; place-items:center; padding:0;
}
.projvid__play svg{ width:18px; height:18px; margin-left:2px; }
.projvid__play:hover{ transform:translate(-50%,-50%) scale(1.1); }
/* ===== Task 209 · #17 (b) — đồng bộ nốt .nfeat__btn (Read More featured-news) vào hiệu ứng gold-sweep chuẩn ===== */
.nfeat__btn{ position:relative; overflow:hidden; z-index:0; border:1px solid var(--gold); transition:color .35s var(--ease); }
.nfeat__btn::before{
content:""; display:block; position:absolute; top:0; left:-25%;
width:0; height:100%; background:var(--gold); z-index:-1;
transform:skewX(-45deg); transform-origin:left center;
transition:width .8s var(--ease);
}
.nfeat__btn:hover::before{ width:160%; }
.nfeat__btn:hover{ background:#fff; border-color:var(--gold); color:var(--ink); }
/* ===== Task209 · Mục 19 — Text banner HOME căn lề trái (lock) ===== */
.hero .slide{ justify-content: flex-start !important; }
.hero .slide__in{ text-align: left !important; align-items: flex-start !important; margin-left: 0 !important; margin-right: auto !important; }
.hero .slide__sector,
.hero .slide__title,
.hero .hero__link{ text-align: left !important; }
/* task211 m9: product attribute / certification icon strip (right column) */
.pspecs{ list-style:none; margin:24px 0 0; padding:24px 0 0; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; align-items:flex-start; gap:18px 14px; }
.pspecs__item{ display:flex; flex-direction:column; align-items:center; gap:8px; width:60px; text-align:center; }
.pspecs__ic{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid var(--line-soft); border-radius:11px; color:var(--gold); transition:border-color .25s var(--ease), color .25s var(--ease); }
.pspecs__item:hover .pspecs__ic{ border-color:var(--gold); color:var(--gold-light); }
.pspecs__ic svg{ width:24px; height:24px; }
.pspecs__lbl{ font-size:10.5px; line-height:1.2; letter-spacing:.04em; text-transform:uppercase; color:var(--on-dark-muted); }
.pspecs__cert{ display:flex; align-items:center; gap:8px; margin-left:auto; align-self:center; }
.pspecs__badge{ display:inline-flex; align-items:center; justify-content:center; min-width:48px; height:48px; padding:0 12px; border:1px solid var(--line-soft); border-radius:11px; font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--on-dark); }
@media (max-width:560px){ .pspecs{ gap:16px 12px; } .pspecs__cert{ margin-left:0; } }
/* =====================================================================
VCN feedback 2026-06-22 (vcnfb622) — CONSOLIDATED OVERRIDES
Ordered last so these win without touching the original rules above.
===================================================================== */
/* ---- A. No letter-spacing anywhere (whole site, no stretched text) ---- */
*,*::before,*::after{ letter-spacing:0 !important; }
/* ---- B. Title sizes: PC 30px / mobile 25px for main titles; section + tile labels 25px ---- */
.pagehero__title,.pinfo__name{ font-size:30px !important; line-height:1.15; }
.jhero__name{ font-size:30px !important; line-height:1.15; }
.tile__label,.tile__label.sm{ font-size:25px !important; line-height:1.15; }
.sec-title,.news__title,.plp__title,.pcat__title,
.prj-title,.prj__title,.section-title{ font-size:25px !important; line-height:1.18; }
.slide__title{ font-size:30px !important; }
@media (max-width:768px){
.pagehero__title,.pinfo__name{ font-size:25px !important; }
.jhero__name{ font-size:22px !important; }
.tile__label,.tile__label.sm{ font-size:25px !important; }
.slide__title{ font-size:25px !important; }
.sec-title,.news__title{ font-size:25px !important; }
}
/* ---- C. jhero spacing ---- */
.jhero__in{ padding:0 20px 44px !important; }
/* ---- D. Play button — RED circle, WHITE triangle, PC 50px (sync all) ---- */
.tile__play,.projvid__play,.vplay,.vg-play span,.vg-card__play,.vidcard__play{
width:50px !important; height:50px !important;
background:#E2554A !important; border:1px solid #E2554A !important;
color:#fff !important; border-radius:50% !important;
}
.tile__play svg,.projvid__play svg,.vplay svg,.vg-play svg,.vg-card__play svg,.vidcard__play svg{
width:20px !important; height:20px !important; fill:#fff !important; color:#fff !important;
}
.tile:hover .tile__play,.projvid__play:hover,.vplay:hover,
.vg-card:hover .vg-play span,.vg-card:hover .vg-card__play{
background:#d04638 !important; border-color:#d04638 !important;
}
@media (max-width:768px){
.tile__play,.projvid__play,.vplay,.vg-play span,.vg-card__play,.vidcard__play{ width:46px !important; height:46px !important; }
.tile__play svg,.projvid__play svg,.vg-play svg{ width:18px !important; height:18px !important; }
}
/* ---- E. Slider indicators -> round DOTS everywhere (was bars) ---- */
.hero__dots button,.fwslider__dots button,.projslider__dots button{
width:10px !important; height:10px !important; border-radius:50% !important;
background:rgba(244,239,227,.45) !important; transition:all .3s var(--ease);
}
.hero__dots button.is-active,.fwslider__dots button.is-active,.projslider__dots button.is-active{
width:10px !important; height:10px !important; background:var(--gold) !important; transform:scale(1.25);
}
/* ---- F. Buttons — one shared token system (primary / secondary / hover) ---- */
.btn,.btn--primary,.thv__more,.news__more,.hero__link,.cta__btn,.btn--ghost-line,
.svc__more,.nfeat__btn{
--btn-accent:var(--gold);
}
.thv__more:hover,.news__more:hover,.btn--ghost-line:hover{
border-color:var(--gold) !important; color:var(--ink) !important;
}
/* ---- G. afilter (t322m8 16/07: bo override vang, tra ve bordered field
dung cau truc anh minh hoa khach gui — giu nguyen mau ink-2/gold goc) ---- */
.afilter__clear{ color:rgba(255,255,255,.78) !important; }
.afilter__clear:hover{ color:#fff !important; }
/* ---- H. Mobile menu: transparent (no solid panel bg) + accordion submenu ---- */
@media (max-width:1024px){
.nav.is-open{
background:rgba(15,14,12,.55) !important;
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
border-top:1px solid rgba(255,255,255,.08) !important;
box-shadow:none !important;
}
/* show chevron on items that own a submenu, rotate when expanded */
.nav.is-open .nav__item:has(> .mega) > .nav__link .chev{
display:inline-block !important; margin-left:auto; transition:transform .25s var(--ease);
}
.nav.is-open .nav__item.is-expanded > .nav__link .chev{ transform:rotate(180deg); }
.nav.is-open .nav__link{ display:flex !important; align-items:center; justify-content:space-between; }
/* accordion: mega hidden until item expanded; then static list, full width */
.nav.is-open .mega{
display:none !important; position:static !important; transform:none !important;
opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
width:100% !important; max-width:none !important; border:none !important;
background:transparent !important; box-shadow:none !important; padding:4px 16px 14px !important;
}
.nav.is-open .nav__item.is-expanded > .mega{ display:block !important; }
.nav.is-open .mega--cards .mega__slider,
.nav.is-open .mega--cards .mega__arrow{ display:none !important; }
.nav.is-open .mega--cards .mega__panel{ margin:0 !important; padding:0 !important; border:none !important; }
.nav.is-open .mega__group{ display:block !important; }
.nav.is-open .mega__group-links{ grid-template-columns:1fr !important; }
.nav.is-open .mega--simple{ width:100% !important; }
/* mobile search button in menu */
.nav__search-m{ display:block; border-top:1px solid rgba(255,255,255,.08); }
.nav__search-btn{ display:flex !important; align-items:center; gap:8px; width:100%; padding:15px 28px; font-size:15px; }
}
@media (min-width:1025px){ .nav__search-m{ display:none !important; } }
/* ---- I. Desktop nav: transparent over slide + WHITE underline on active ---- */
.site-header:not(.is-scrolled){ background:transparent !important; }
.nav__link.is-active::after,
.nav__link:hover::after{
content:""; position:absolute; left:10px; right:10px; bottom:4px;
height:2px; background:#fff; border-radius:2px;
}
.nav__link{ position:relative; }
.nav__link.is-active{ color:#fff !important; }
/* desktop submenu width — match the root demo (full strip), not a narrow box */
@media (min-width:1025px){
.mega--cards{ left:0 !important; right:0 !important; transform:none !important;
width:auto !important; max-width:none !important; margin-inline:32px; }
.nav__item:hover .mega--cards{ transform:none !important; }
.mega--cards .mega__track{ max-width:100% !important; }
}
/* ---- J. Arrow glyph "->" replaced by ">" ---- */
.thv__col span::after{ content:">" !important; }
/* ---- K. Home hero text block: drop below the next arrow so it doesn't overlap ---- */
@media (max-width:768px){
.hero .slide{ align-items:flex-end !important; }
.hero .slide__in{ padding-bottom:84px !important; }
.hero .hero__dots{ bottom:18px !important; }
}
/* ---- L. Smaller mobile buttons (read more etc.) — extended task218·m8 ---- */
@media (max-width:768px){
.hero__link,a.hero__link,.hero__link[data-i18n]{ padding:9px 16px !important; font-size:12px !important; }
.news__more,.thv__more,.btn--ghost-line,.svc__more{ padding:9px 16px !important; font-size:12px !important; }
/* t320m29: btn--add/btn-buy/btn-dl--primary nay dùng chuẩn hero__link -> đồng bộ luôn cỡ mobile */
.btn,.btn--primary,.btn--add,.btn-buy,.btn-dl--primary{ padding:9px 16px !important; font-size:12px !important; }
/* t218m8: action buttons that were still PC-sized on mobile */
.btn-buy{ padding:11px 22px !important; font-size:14px !important; letter-spacing:.02em !important; gap:6px !important; }
.cta .cta__form .wpcf7-submit,.wpcf7-submit,.cta__btn{ padding:12px 24px !important; font-size:14px !important; }
.btn--wish{ width:42px !important; height:42px !important; }
.btn--wish svg{ width:17px !important; height:17px !important; }
}
/* ---- M. Footer (t218 m25): can doi bo cuc, giam padding, dan dong ---- */
.footer{ padding-top:56px !important; }
.footer__top{ padding-bottom:44px !important; gap:40px !important; }
/* cot deu nhau, lap kin hang -> bo khoang trong lech phai (minmax auto cu) */
.footer__links{ grid-template-columns:repeat(4,1fr) !important; gap:28px 32px !important; align-content:start; }
.footer__col h4{ margin-bottom:14px !important; }
.footer__col a{ line-height:1.75 !important; padding:6px 0 !important; }
.footer__bottom{ padding-block:22px !important; }
@media (max-width:1024px){
.footer__links{ grid-template-columns:repeat(2,1fr) !important; gap:24px 26px !important; }
/* t320m5: footer__links + footer__info xep chong tren mobile/tablet (footer__info flex-basis:100%) -> gap flex 40px thanh khoang trang doc qua lon, keo sat lai */
.footer__top{ gap:16px !important; }
}
@media (max-width:640px){
.footer__links{ grid-template-columns:repeat(2,1fr) !important; gap:20px 18px !important; }
.footer__col{ margin-bottom:4px; }
.footer__col h4{ margin-bottom:10px !important; }
.footer__bottom{ flex-direction:column; gap:12px; text-align:center; }
}
.footer__social{ display:flex !important; gap:10px; }
.footer__social a{ display:grid; place-items:center; }
/* ---- N. Forms: tighter padding, unified panel block, equal L/R columns ---- */
.cform,.contact__form,.cta__form{ padding:clamp(20px,3vw,32px) !important; }
.cgrid,.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); align-items:stretch; }
.cgrid > *,.contact__grid > *{ background:var(--ink-2); border:1px solid var(--line-soft); border-radius:14px; padding:clamp(20px,3vw,32px); }
@media (max-width:780px){ .cgrid,.contact__grid{ grid-template-columns:1fr; } }
/* ---- O. Mobile category banner: image height fits text-list viewport ---- */
@media (max-width:768px){
.tile,.m-cat .tile,.m-proj .tile{ min-height:240px; }
.tile__hover{ overflow-y:auto; }
}
/* ===== task218·m9 · Transparent menu over hero slide on category pages (VCN fb #1) ===== */
/* Subpages that have a .pagehero banner (About / Services / Solutions / Projects / Careers
— the main category names) get the same overlay treatment as the home page: the header
is transparent and sits ON TOP of the hero slide, turning opaque only on scroll. */
body:has(.pagehero) .site-header{
background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
border-bottom-color:transparent;
transition:background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
}
body:has(.pagehero) .site-header.is-scrolled{
background:rgba(21,20,15,.88); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom-color:var(--line-soft);
}
/* pull the slide up under the transparent header so it shows through behind the menu */
body:has(.pagehero) .pagehero{ margin-top:-74px; }
body:has(.pagehero) .pagehero__in{ padding-top:74px; }
/* end task218·m9 */
/* ===== task218·m11 · Mobile home category banner — auto-reveal text list on scroll (VCN fb #2) =====
On mobile there is no :hover, so the category text list (.tile__hover) used to stay hidden and a
tap on the tile-link jumped straight to the page. We now show the list by default on mobile, so
scrolling the banner into view reveals it; navigation is gated in JS to only the text items. */
@media (max-width:768px){
.m-cat .tile__hover{ opacity:1 !important; visibility:visible !important; transform:none !important; }
.m-cat .thv__col span{ padding:9px 0; } /* bigger tap targets for each category name */
.m-cat .thv__col span::after{ opacity:1; transform:none; } /* show the ">" cue (no hover on touch) */
}
/* end task218·m11 */
/* task218·m16 — Mobile: khối chữ banner đang đè nút Next (cả 2 căn giữa dọc).
Dịch khối chữ xuống dưới (align bottom) để chừa nút Next ở giữa, vẫn trên dots. */
@media (max-width:768px){
.hero .slide{ align-items: flex-end !important; }
.hero .slide__in{ padding-bottom: 92px; }
}
/* end task218·m16 */
/* ---- T218 M20: center Play triangle INSIDE circle (was rendered to the right / "thừa thụt") ---- */
.vg-play svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
/* ===== VCN feedback #7 / task218 m28 — Menu PC: khung vien + sub full width (authoritative) ===== */
@media (min-width:1025px){
.mega--cards{
position:fixed; top:74px; left:0 !important; right:0 !important;
width:auto !important; max-width:none !important; margin-inline:0 !important;
transform:translateY(10px); padding:30px 80px 34px;
border-top:1px solid rgba(236,198,119,.18) !important;
border-bottom:1px solid rgba(236,198,119,.18) !important;
border-left:0 !important; border-right:0 !important;
box-shadow:0 30px 80px -30px rgba(0,0,0,.85);
}
.nav__item:hover .mega--cards{ transform:translateY(0) !important; }
.mega--cards::before{ top:-24px; height:24px; left:0; right:0; }
.mega--cards .mega__slider{ max-width:1280px; margin-inline:auto; justify-content:center; }
.mega--cards .mega__track{ max-width:100% !important; justify-content:center; }
.mega--cards .mega__panel{ max-width:none !important; margin-inline:0 !important; }
.mega--cards .mega__group-links{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; }
}
@media (min-width:1025px) and (max-width:1280px){ .mega--cards{ padding-inline:48px !important; } }
/* end task218 m28 */
/* task218·m29: tiêu đề category trong submenu (mobile + desktop) bấm được, giữ màu gold */
.mega__group-title a{ color:inherit; text-decoration:none; display:inline-block; }
.mega__group-title a:hover{ color:var(--gold); }
/* =====================================================================
VCN feedback round 3 (task VSXTM-7) — Hamburger menu mobile
- Menu nền đen tuyền, không blur/trong suốt
- Icon hamburger đổi thành dấu X khi menu mở
- Bỏ nền nút hamburger
===================================================================== */
@media (max-width:1024px){
.nav.is-open{
background: #000 !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
border-top: none !important;
}
}
.nav-toggle{
background: transparent !important;
}
.nav-toggle:hover,
.nav-toggle:focus{
background: transparent !important;
}
.nav-toggle.is-open svg{ display: none; }
.nav-toggle.is-open::before{
content: "\2715"; /* ✕ */
font-size: 26px;
line-height: 1;
color: var(--on-dark, #efe9df);
font-weight: 300;
display: inline-block;
}
/* ===== VCN fb STT6 — Footer mobile accordion (tap heading -> xổ link con) ===== */
@media (max-width:640px){
/* one full-width column so each heading is its own collapsible row */
.footer__links{ grid-template-columns:1fr !important; gap:0 !important; }
.footer__col--acc,.footer__col--plain{ border-bottom:1px solid rgba(255,255,255,.10); }
.footer__col--acc > h4,.footer__col--plain > h4{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:0 !important; padding:15px 2px; cursor:pointer;
}
/* ▼ chevron drawn from borders; rotates when the column is open */
.footer__col--acc > h4::after{
content:""; width:8px; height:8px; margin-left:auto; opacity:.7;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:rotate(45deg); transition:transform .25s var(--ease);
}
.footer__col--acc.is-open > h4::after{ transform:rotate(-135deg); }
/* t326m7: h4 tu wrap (vd "Du an", "Tin tuc" dung chung cot voi "Dich vu & Ho tro")
la link dieu huong, khong phai nut toggle — an mui ten de tranh hieu lam co the bam
xoay huong nhung thuc te khong lam gi (chi h4 khong wrap moi la header that su). */
.footer__col--acc > h4:has(> a)::after{ content:none; }
/* sub-links hidden until the column is expanded */
.footer__col--acc > a{ display:none; }
.footer__col--acc.is-open > a{ display:block; }
.footer__col--acc.is-open > a:last-child{ padding-bottom:14px; }
}
/* =====================================================================
VCN fb — Mobile menu polish
1) Fade in/out khi mở/đóng (display animate qua allow-discrete;
trình duyệt cũ fallback về bật/tắt tức thì như trước)
2) Gạch chân item active ôm theo chữ, không full width
3) Nền menu đen opacity 90%
===================================================================== */
@media (max-width:1024px){
/* Panel giữ nguyên layout ở cả 2 trạng thái để fade-out không bị vỡ khung
(các style này trước đây chỉ nằm trên .nav.is-open) */
.nav{
display:none;
flex-direction:column; position:absolute; top:100%; left:0; right:0;
margin:0; gap:0; padding:8px 0 88px; overflow:auto;
/* full màn hình: cao trọn 1 viewport tính từ đáy header -> không bao giờ hở
nội dung trang bên dưới; padding-bottom 88px giữ hàng Tìm kiếm trong tầm nhìn */
max-height:none;
height:100vh;
height:100dvh;
overscroll-behavior:contain;
background:rgba(0,0,0,.9);
border-top:none; box-shadow:none;
opacity:0;
transition:opacity .3s var(--ease), display .3s allow-discrete, overlay .3s allow-discrete;
}
/* panel full height -> neo hàng Tìm kiếm xuống đáy menu */
.nav .nav__search-m{ margin-top:0; }
/* menu mở: chặn scroll body (nội dung phía sau đứng yên) */
body:has(.nav.is-open){ overflow:hidden; }
/* WP: ẩn topbar lúc menu mở để header luôn sát mép trên -> panel phủ kín màn hình */
body:has(.nav.is-open) .topbar{ display:none; }
.nav .nav__item{ width:100%; }
.nav .nav__link{
display:flex !important; align-items:center; justify-content:space-between;
width:100%; padding:15px 28px; font-size:15px;
}
.nav .nav__link .chev{ display:none; }
.nav .nav__item:has(> .mega) > .nav__link .chev{
display:inline-block !important; margin-left:auto; transition:transform .25s var(--ease);
}
.nav.is-open{
opacity:1; background:rgba(0,0,0,.9) !important;
/* đè max-height:80vh + padding của rule .nav.is-open gốc (specificity cao hơn .nav) */
max-height:none; height:100vh; height:100dvh; padding:8px 0 88px;
}
@starting-style{
.nav.is-open{ opacity:0; }
}
/* Gạch chân active: bỏ thanh ::after full width, underline ôm theo text */
.nav .nav__link.is-active::after,
.nav .nav__link:hover::after{ content:none; }
.nav .nav__link.is-active{
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:7px;
text-decoration-color:#fff;
}
}
/* =====================================================================
VCN fb — Mobile menu round 2: căn chỉnh lại submenu accordion
- Thụt lề thẳng hàng với label cha (28px), link con thụt thêm 12px
- Tách nhóm rõ ràng: title nhóm có khoảng thở trên/dưới
- Link con tap target cao hơn (padding 9px)
Áp cho CẢ 2 cấu trúc markup:
- Template tĩnh: .mega__panel > .mega__group (main.js build từ .mcard)
- WordPress: .mega-img > .mega-card > .mega-card__sub (vcn_mega_menu)
===================================================================== */
@media (max-width:1024px){
.nav.is-open .mega{ padding:0 28px 18px !important; }
/* -- cấu trúc template: mega__group -- */
.nav.is-open .mega__panel{ margin:0 !important; padding:0 !important; border:none !important; }
.nav.is-open .mega__group-title{ margin:16px 0 4px; }
.nav.is-open .mega__group:first-child > .mega__group-title{ margin-top:6px; }
.nav.is-open .mega__group-links{ gap:0 28px !important; }
.nav.is-open .mega__group-links a{ padding:9px 0 9px 12px; font-size:14px; }
/* -- cấu trúc WordPress: mega-img / mega-card -- */
.nav.is-open .mega-img__row{ display:block; overflow:visible; }
.nav.is-open .mega-card{ min-width:0; }
.nav.is-open .mega-card__link{ display:none; } /* ẩn ảnh + label card, dùng head của sub */
.nav.is-open .mega-card__sub{
position:static; opacity:1; visibility:visible; pointer-events:auto;
background:transparent; border:0; box-shadow:none; padding:0;
transition:none;
}
.nav.is-open .mega-sub__head{ margin:16px 0 4px; }
.nav.is-open .mega-card:first-child .mega-sub__head{ margin-top:6px; }
.nav.is-open .mega-sub__links{ display:block; }
.nav.is-open .mega-sub__links a{ padding:9px 0 9px 12px; font-size:14px; }
/* -- mega--simple (Services & Support, About): đồng bộ thụt lề -- */
.nav.is-open .mega--simple a{ padding:9px 0 9px 12px; font-size:14px; border-radius:0; }
}
/* =====================================================================
VCN fb — Page loader: logo chạy animation khi trang đang tải
Không cần markup mới (dùng chung template tĩnh + WordPress):
- html::before = màn nền đen phủ toàn trang
- body::before = logo VCN giữa màn hình, hiệu ứng "thở" sáng/tối
- body::after = vạch sáng gold chạy ngang bên dưới logo
JS trong main.js gắn .vcn-loaded lên khi window "load" xong -> fade out.
Safety: tự ẩn sau 6s (animation forwards) kể cả khi JS không chạy được.
===================================================================== */
html::before,
body::before,
body::after{ content:""; position:fixed; pointer-events:none; }
html::before{
inset:0; z-index:9998; background:#0F0E0A;
animation:vcnLoadAway .5s var(--ease, ease) 6s forwards;
}
body::before{
z-index:9999;
top:50%; left:50%; width:190px; height:130px;
transform:translate(-50%,-58%);
background:url("../img/logo.png") center/contain no-repeat;
animation:vcnLoadPulse 1.6s ease-in-out infinite, vcnLoadAway .5s var(--ease, ease) 6s forwards;
}
body::after{
z-index:9999;
top:calc(50% + 56px); left:50%; width:170px; height:2px;
transform:translateX(-50%);
border-radius:2px;
background-color:rgba(255,255,255,.08);
background-image:linear-gradient(90deg, transparent 30%, var(--gold, #C9A24B) 50%, transparent 70%);
background-size:200% 100%;
background-repeat:no-repeat;
animation:vcnLoadBar 1.2s linear infinite, vcnLoadAway .5s var(--ease, ease) 6s forwards;
}
@keyframes vcnLoadPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
@keyframes vcnLoadBar{ 0%{ background-position:170% 0; } 100%{ background-position:-170% 0; } }
@keyframes vcnLoadAway{ to{ opacity:0; visibility:hidden; } }
/* load xong (JS gắn class): fade mượt, logo nở nhẹ rồi biến mất */
html.vcn-loaded::before,
html.vcn-loaded body::after{
opacity:0; visibility:hidden;
transition:opacity .45s var(--ease, ease), visibility 0s linear .45s;
animation:none;
}
html.vcn-loaded body::before{
opacity:0; visibility:hidden;
transform:translate(-50%,-58%) scale(1.07);
transition:opacity .45s var(--ease, ease), transform .45s var(--ease, ease), visibility 0s linear .45s;
animation:none;
}
@media (prefers-reduced-motion:reduce){
body::before, body::after{ animation:vcnLoadAway .5s ease 4s forwards; }
}
/* ===== t279m5 — mobile category section: bỏ popup overlay, hiển thị inline trong section ===== */
/* Fix: .tile__hover đổi từ position:absolute inset:0 (phủ toàn tile)
sang flow bình thường phía dưới ảnh — section tự giãn ra chứa đủ content. */
@media (max-width:768px){
/* Tile tự giãn: 200px image + chiều cao links bên dưới */
.m-cat .tile{
height:auto !important;
min-height:0 !important;
padding-top:200px !important;
overflow:visible !important;
}
/* Ảnh/video ghim ở top 200px trong tile */
.m-cat .tile > img,
.m-cat .tile > video{
position:absolute !important;
top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
height:200px !important;
}
/* Gradient overlay giới hạn trong vùng ảnh */
.m-cat .tile::after{ bottom:auto !important; height:200px !important; }
/* tile__hover: flow bình thường nằm dưới vùng ảnh — không còn là overlay */
.m-cat .tile .tile__hover{
position:relative !important;
inset:auto !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
overflow:visible !important;
padding:22px 18px 26px !important;
}
}
/* end t279m5 */
/* ===== t282m11 — mobile category tiles: scroll-triggered detail reveal =====
Replaces always-on from t218m11 + t279m5.
JS adds .is-center when tile reaches middle of viewport (IntersectionObserver). */
@media (max-width:768px){
/* Hide detail panel by default — only label on image is shown */
.m-cat .tile .tile__hover{
opacity:0 !important;
visibility:hidden !important;
max-height:0 !important;
padding:0 !important;
overflow:hidden !important;
transition:opacity .35s ease,max-height .4s ease,padding .35s ease,visibility .35s ease !important;
}
/* Show detail panel when tile is in center of viewport */
.m-cat .tile.is-center .tile__hover{
opacity:1 !important;
visibility:visible !important;
max-height:600px !important;
padding:22px 18px 26px !important;
overflow:visible !important;
transition:opacity .35s ease,max-height .4s ease,padding .35s ease,visibility .35s ease !important;
}
/* Fade out image label when detail panel opens — prevents double title */
.m-cat .tile .tile__txt{
transition:opacity .35s ease,visibility .35s ease !important;
}
.m-cat .tile.is-center .tile__txt{
opacity:0 !important;
visibility:hidden !important;
}
}
/* end t282m11 */
/* ===== t291m3: sync .thv__more với hero__link — gold border luôn; bỏ arrow icons ===== */
.thv__more{ border-color:var(--gold); }
.thv__more .ar{ display:none; }
/* end t291m3 */
/* ===== t292m1 — mobile home category: khi tap, panel PHỦ LÊN ẢNH (giống hover PC),
không còn là dải chữ nằm DƯỚI ảnh (thay layout của t279m5 + t282m11).
Vẫn giữ cơ chế accordion tap-to-toggle .is-center trong JS (task232·m2). ===== */
@media (max-width:768px){
/* Ảnh/video phủ lại toàn bộ tile (t279m5 đã ghim vào dải 200px trên cùng) */
.m-cat .tile > img,
.m-cat .tile > video{
top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
height:100% !important;
}
/* Gradient trở lại phủ full tile */
.m-cat .tile::after{ top:0 !important; bottom:0 !important; inset:0 !important; height:auto !important; }
/* Đóng: tile là banner ảnh; mở: tile tự giãn theo panel in-flow đè lên ảnh */
.m-cat .tile{
padding-top:0 !important;
min-height:280px !important;
height:auto !important;
}
/* Panel nền tối 97% (từ base .tile__hover) đè lên ảnh; canh nội dung từ trên xuống */
.m-cat .tile.is-center .tile__hover{
justify-content:flex-start !important;
max-height:1200px !important;
padding:34px 24px 32px !important;
}
}
/* end t292m1 */
/* ===== t320 m12 — mobile home category: banner "thông số danh mục" (tile__hover)
chưa fix vị trí, bị nhảy khi cuộn trang. Nguyên nhân: tile__hover vẫn
position:relative (nằm trong luồng, kế thừa từ t279m5) trong khi .m-cat .tile
là height:auto (t292m1) — mỗi lần JS đổi tile trung tâm (.is-center) lúc
scroll, max-height 0→1200px đẩy chiều cao tile đổi liên tục → cả trang bị
đẩy/nhảy theo khi đang cuộn. Fix: đưa tile__hover về position:absolute
inset:0 (đúng như comment gốc của t292m1 "giống hover PC"), tile giữ chiều
cao cố định — is-center chỉ đổi opacity/visibility của lớp phủ, không còn
đụng tới layout height khi cuộn. ===== */
@media (max-width:768px){
.m-cat .tile{
height:280px !important;
overflow:hidden !important;
}
.m-cat .tile .tile__hover{
position:absolute !important;
inset:0 !important;
top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
}
.m-cat .tile.is-center{ z-index:5; }
}
/* end t320m12 */
/* =====================================================================
Mega menu chỉnh sửa v1 (task VSXTM-8) — bỏ khoảng trắng trái + format sub-links
===================================================================== */
/* 1) Bỏ khoảng trắng dư bên trái mega — thẻ đầu căn sát lề trái mega */
.mega.mega--cards{
padding-left: 16px !important;
padding-right: 16px !important;
}
.mega--cards .mega__slider{
justify-content: flex-start !important;
gap: 0 !important;
}
.mega--cards .mega__track{
justify-content: flex-start !important;
max-width: 100% !important;
gap: 12px !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* thẻ đầu không có margin trái, giữ nguyên chiều rộng */
.mega--cards .mega__track > .mcard:first-child{
margin-left: 0 !important;
}
/* 2) Bỏ khoảng trắng lẻ mép trái các ô hình */
.mega--cards .mcard::before{
background-position: left center !important;
background-repeat: no-repeat !important;
}
/* 3) Format hàng chữ danh mục con phía dưới — thoáng, font gọn */
.mega__panel{
padding-top: 18px !important;
margin-top: 18px !important;
}
.mega__group-title{
font-size: 12px;
letter-spacing: .12em;
margin-bottom: 14px;
}
.mega__group-links{
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 12px 48px !important;
}
.mega__group-links a{
font-size: 13px !important;
font-weight: 300 !important;
letter-spacing: .05em !important;
padding: 6px 0 !important;
line-height: 1.5 !important;
color: var(--on-dark-muted);
}
.mega__group-links a:hover{ color: var(--gold); padding-left: 4px !important; }
/* Patch v1 - override rules cũ đè max-width và margin-inline của slider */
.mega.mega--cards .mega__slider,
.mega--cards .mega__slider{
max-width: none !important;
margin-inline: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
justify-content: flex-start !important;
}
/* =====================================================================
Mega menu v2 (task VSXTM-9) — thu hẹp bằng nav + scroll snap + arrows
===================================================================== */
@media (min-width:1025px){
/* Bỏ position:fixed, chuyển absolute; JS set --mega-left, --mega-width theo nav */
.mega.mega--cards{
position: absolute !important;
top: calc(100% + 16px) !important;
left: var(--mega-left, 0px) !important;
right: auto !important;
width: var(--mega-width, 100%) !important;
max-width: var(--mega-width, none) !important;
padding: 30px 16px 34px !important;
transform: translateY(10px) !important;
}
.nav__item:hover .mega.mega--cards{
transform: translateY(0) !important;
}
/* slider + track: full width, scroll snap */
.mega.mega--cards .mega__slider,
.mega--cards .mega__slider{
position: relative !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
justify-content: flex-start !important;
gap: 0 !important;
}
.mega--cards .mega__track{
max-width: 100% !important;
justify-content: flex-start !important;
overflow-x: auto !important;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
gap: 12px !important;
padding: 0 !important;
}
.mega--cards .mega__track::-webkit-scrollbar{ display: none; }
.mega--cards .mcard{
flex: 0 0 224px !important;
scroll-snap-align: start;
}
/* Arrows position tại 2 mép mega */
.mega--cards .mega__arrow{
position: absolute !important;
top: 50% !important;
transform: translateY(-50%);
z-index: 10 !important;
width: 32px !important; height: 32px !important;
background: rgba(21,20,15,.85) !important;
border: 1px solid var(--line-mid) !important;
border-radius: 50% !important;
color: var(--on-dark);
display: grid; place-items: center;
cursor: pointer;
}
.mega--cards .mega__arrow[hidden]{ display: none !important; }
.mega--cards .mega__arrow svg{ width: 14px; height: 14px; }
.mega--cards .mega__arrow--prev{ left: -14px !important; }
.mega--cards .mega__arrow--next{ right: -14px !important; }
.mega--cards .mega__arrow:hover{
background: var(--gold) !important;
color: var(--ink) !important;
border-color: var(--gold) !important;
}
}
/* Task VSXTM-10 — bỏ 2 đường kẻ trên/dưới khối .buybox (Liên hệ báo giá + Chat Zalo) */
.buybox{
border-top: none !important;
border-bottom: none !important;
}
/* Task VSXTM-11 — Showroom: khung ảnh 16:9 + grid responsive auto-fit */
.sh-grid{
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)) !important;
gap: 24px !important;
}
.sh-card{
aspect-ratio: 16 / 9 !important;
min-height: 0 !important;
height: auto !important;
}
.sh-card img{
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
}
/* Task VSXTM-12 — cấu hình lại 2 nút .btn-buy + .btn-zalo trên product.html */
.btn-buy{
font-size: 15px !important;
padding: 7px 28px !important;
text-transform: none !important;
}
.btn-zalo{
font-size: 15px !important;
padding: 7px 28px !important;
text-transform: none !important;
}
/* Task VSXTM-13 — ẩn breadcrumb mobile chỉ trong trang chi tiết bài viết (news-detail) */
@media (max-width: 768px){
main.plp:has(.doc .article) .plp__top,
main.plp:has(.doc .article) .breadcrumb{
display: none !important;
}
}
/* Task VSXTM-15 — cards trong mega căn giữa theo width mới (t323 m1: revert, gây centerMode lộ ảnh cuối bên trái) */
@media (min-width:1025px){
.mega.mega--cards .mega__track,
.mega--cards .mega__track{
justify-content: flex-start !important;
}
}
/* Task VSXTM-17 — giữ khung mega ổn định khi hover chuyển giữa các mục */
@media (min-width:1025px){
.mega.mega--cards{
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: none !important;
}
.mega.mega--cards.is-mega-open{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.nav__item:hover .mega.mega--cards:not(.is-mega-open){
opacity: 0 !important;
visibility: hidden !important;
}
}
/* Task VSXTM-18 — giữ nguyên mũi tên chéo (↗) ở nút Xem thêm banner khi hover */
.hero__link .ar,
.hero__link[data-i18n="hero.readmore"] .ar,
a.hero__link .ar{
display: inline-block;
transform: rotate(-45deg) !important;
transition: transform .3s var(--ease);
}
.hero__link:hover .ar,
.hero__link[data-i18n="hero.readmore"]:hover .ar,
a.hero__link:hover .ar{
transform: rotate(-45deg) translateX(4px) !important;
}
/* Task VSXTM-19 — Filter Bar trang Dự án */
.pfilter{
background: #14130f;
padding: 18px 0;
margin: 0 0 24px;
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.pfilter__inner{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px 22px;
flex-wrap: wrap;
}
.pfilter__btn{
background: transparent;
border: none;
padding: 8px 16px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: .1em;
line-height: 1.2;
text-transform: uppercase;
color: #b7b3aa;
cursor: pointer;
border-radius: 4px;
transition: color .25s var(--ease, ease), background .25s var(--ease, ease);
}
.pfilter__btn:hover{
color: var(--gold, #E4B96C);
}
.pfilter__btn.is-active{
background: var(--gold, #E4B96C);
color: #14130f;
}
.pfilter__btn.is-active:hover{
color: #14130f;
}
.pmasonry .jcard.is-hidden{ display: none !important; }
@media (max-width:640px){
.pfilter{ padding: 12px 0; }
.pfilter__inner{ gap: 6px 14px; }
.pfilter__btn{ padding: 6px 12px; font-size: 12px; letter-spacing: .06em; }
}
/* Task VSXTM-20 — refine filter bar: zero gap + underline center-out */
.pfilter{
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: #14130f;
}
.pfilter > .container{
padding-block: 0;
}
.pfilter__inner{
padding: 14px 0;
}
.pfilter__btn{
position: relative;
}
/* Center-out underline cho các mục KHÔNG active */
.pfilter__btn:not(.is-active)::after{
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: 4px;
height: 2px;
background: var(--gold, #E4B96C);
transform: scaleX(0);
transform-origin: center;
transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.pfilter__btn:not(.is-active):hover::after{
transform: scaleX(1);
}
/* Bỏ background-color hover để hover chỉ hiện underline, chữ giữ xám nhạt */
.pfilter__btn:not(.is-active):hover{
color: #cfcbc0;
background: transparent;
}
/* Zero gap tiếp giáp banner + pmasonry */
.pagehero + .pfilter{ margin-top: 0 !important; }
.pfilter + main.plp,
.pfilter + main{ margin-top: 0 !important; padding-top: 0 !important; }
.pfilter + main .container:first-child,
.pfilter + main.plp .container:first-child{ padding-top: 24px; }
/* Task VSXTM-20 patch — ẩn subnav cũ, giữ pfilter mới */
main.plp > .subnav,
.pfilter ~ * .subnav,
body.template-projects .subnav,
main.plp .subnav{
display: none !important;
}
/* Fallback: ẩn nếu subnav là sibling của pagehero (bản tĩnh template) */
.pagehero + .subnav{
display: none !important;
}
/* Task VSXTM-21 — zero gap pfilter trên WP archive-project */
body.post-type-archive-project main.plp,
main.plp:has(> .pfilter){
gap: 0 !important;
}
body.post-type-archive-project main.plp > .pfilter,
main.plp:has(> .pfilter) > .pfilter{
margin: 0 !important;
}
body.post-type-archive-project main.plp > .pfilter + .container,
main.plp:has(> .pfilter) > .pfilter + .container{
padding-top: 24px;
}
/* Task VSXTM-22 — bỏ hoàn toàn khoảng cách giữa pfilter và section chứa dự án */
.pfilter + .container,
main.plp .pfilter + .container,
main.plp:has(> .pfilter) > .pfilter + .container,
body.post-type-archive-project main.plp > .pfilter + .container{
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Task VSXTM-23 — jgallery 5 ảnh lưới 2 cột, ảnh đầu span 2, gap 7px */
.jgallery{
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 7px !important;
}
.jgallery > img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
aspect-ratio: 4 / 3;
}
.jgallery > img:first-child{
grid-column: 1 / -1 !important;
aspect-ratio: 21 / 9;
}
@media (max-width:640px){
.jgallery{ gap: 6px !important; }
.jgallery > img,
.jgallery > img:first-child{ aspect-ratio: 4/3; }
}
/* Task #320 M21 — Showroom (about/showroom): giảm size chữ tiêu đề/mô tả các khối showroom */
.sh-card__title{
font-size: 18px !important;
}
.sh-card__loc{
font-size: 11px !important;
}
/* Task #320 M22 — Showroom (about/showroom): đồng bộ nút "Enter tour" với style + hiệu ứng
nút "Xem thêm" (Read More) trang chủ — chuẩn = brand gold sweep-fill (task166/t209m17):
viền gold bo góc 4px, nền trong suốt, quét fill vàng chéo khi hover, chữ chuyển sang --ink,
mũi tên trượt phải khi hover (đồng bộ .jcard__cta / .news__more / .hero__link). */
.sh-enter{
display:inline-flex; align-items:center; gap:8.1px;
font-size:11.7px; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
color:var(--on-dark);
padding:9.9px 21.6px;
background:transparent;
border:1px solid var(--gold);
border-radius:4px;
position:relative; overflow:hidden; z-index:0;
transition:color .35s var(--ease);
}
.sh-enter::before{
content:""; display:block; position:absolute; top:0; left:-25%;
width:0; height:100%; background:var(--gold); z-index:-1;
transform:skewX(-45deg); transform-origin:left center;
transition:width .8s var(--ease);
}
.sh-enter:hover::before{ width:160%; }
.sh-enter:hover{
background:transparent;
color:var(--ink);
border-color:var(--gold);
}
.sh-enter .ar{ display:inline-block; transform:rotate(-45deg); transition:transform .3s var(--ease); }
.sh-enter:hover .ar{ transform:rotate(-45deg) translateX(4px); }
/* ---- Task320 m26: VCN Video Gallery — Play button +50% size (scoped to .vg-play only, not other play buttons site-wide) ---- */
.vg-play span{ width:75px !important; height:75px !important; }
.vg-play svg{ width:30px !important; height:30px !important; }
@media (max-width:768px){
.vg-play span{ width:69px !important; height:69px !important; }
.vg-play svg{ width:27px !important; height:27px !important; }
}
/* ============ Task320 · Mục 29 — Đồng bộ TOÀN BỘ nút hành động (CTA) theo chuẩn
nút "Xem thêm" banner home (.hero__link, gold sweep-fill, xem task209 #17).
Trước mục này còn lệch: .news__more viền mờ (var(--line-mid)) thay vì gold đặc;
.btn--add / .btn-buy / .btn-dl--primary vẫn là pill đặc màu vàng kiểu cũ
(404 "Về trang chủ", Contact "Send message", PDP "Contact now"/"Send request",
trang Download "Download"). Đưa tất cả về CHUNG 1 style: viền gold 1px, bo 4px,
nền trong suốt, chữ hoa 13px letter-spacing .14em, hover quét nền vàng chéo -> chữ ink. ============ */
.news__more{ border-color:var(--gold); }
.btn--add,
.btn-buy,
.btn-dl--primary{
position:relative; overflow:hidden; z-index:0;
display:inline-flex; align-items:center; gap:9px;
padding:11px 24px !important;
background:transparent !important;
border:1px solid var(--gold) !important;
border-radius:4px !important;
color:var(--on-dark) !important;
font-size:13px !important;
font-weight:400 !important;
letter-spacing:.14em;
text-transform:uppercase;
transition:color .35s var(--ease) !important;
}
.btn--add::before,
.btn-buy::before,
.btn-dl--primary::before{
content:""; display:block; position:absolute; top:0; left:-25%;
width:0; height:100%; background:var(--gold); z-index:-1;
transform:skewX(-45deg); transform-origin:left center;
transition:width .8s var(--ease);
}
.btn--add:hover::before,
.btn-buy:hover::before,
.btn-dl--primary:hover::before{ width:160%; }
.btn--add:hover,
.btn-buy:hover,
.btn-dl--primary:hover{
background:transparent !important;
color:var(--ink) !important;
border-color:var(--gold) !important;
}
/* .btn-dl--ghost (nút "Preview" cạnh Download) — cùng bo góc 4px, viền gold đặc
để khớp cặp nút trong .dl-actions với chuẩn mới (hiệu ứng sweep đã có sẵn ở dòng ~1131) */
.btn-dl--ghost{ border-radius:4px !important; border-color:var(--gold) !important; color:var(--on-dark) !important; }
/* ============ Task324 · Mục 5 — Download Center: nút Preview/TẢI VỀ thu gọn
padding + đồng nhất kích cỡ. Trước đó lệch nhau: .btn-dl--primary padding
11px 24px (desktop) / 9px 16px (mobile, từ rule dùng chung .btn--add/.btn-buy)
trong khi .btn-dl--ghost giữ nguyên 11px 14px base — khiến 2 nút cao/rộng
khác nhau. Scope trong .dl-actions để không đụng các nút btn--add/btn-buy
khác nơi (404, contact, PDP). ============ */
.dl-actions .btn-dl--primary,
.dl-actions .btn-dl--ghost{
padding:9px 12px !important;
font-size:12.5px !important;
letter-spacing:.02em !important;
text-transform:uppercase; /* t326m6 (fb 16/07): đồng bộ cách viết 2 nút — "Preview" thường vs "DOWNLOAD" hoa; ép uppercase cả cặp theo chuẩn nút toàn site */
}
@media (max-width:768px){
.dl-actions .btn-dl--primary,
.dl-actions .btn-dl--ghost{
padding:8px 10px !important;
font-size:12px !important;
}
}
/* ============ Task326 · Mục 4 (fb PDF 3, 16/07) — Mobile: bỏ "bóng mờ" dọc mép
trái màn hình trên banner trang chủ. Nguyên nhân: .slide::after (dòng ~207)
là gradient NGANG trái→phải (đậm .80 ở mép trái, tan dần tới 85%) — hợp lý
trên desktop (chữ nằm trái, ảnh rộng), nhưng trên màn hình hẹp nó hiện thành
một dải tối mờ ôm suốt mép trái (khách khoanh đỏ). Đổi sang gradient DỌC
dưới→lên ở mobile: vùng chữ (đáy banner) vẫn đủ tương phản, mép trái sạch. ============ */
@media (max-width:768px){
.slide::after{
background:linear-gradient(180deg, rgba(15,14,10,0) 42%, rgba(15,14,10,.38) 68%, rgba(15,14,10,.72) 100%);
}
}