/* ========================================================================== TAKA INTERIOR — layout (editorial luxury) Newsreader serif + Montserrat · utility bar · header co khi cuộn · hero full-bleed · section tối · lưới 12-col · footer tối. Bỏ scroll-cue/eyebrow số/em-dash. ========================================================================== */ /* ---------------------------------------------------------------- HEADER (1 hàng gọn) */ .site-header { position: sticky !important; top: 0 !important; z-index: 50; background: rgba(250,249,246,0.96) !important; -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); transition: box-shadow var(--dur) var(--ease); } .site-header.is-scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 13px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; transition: padding var(--dur) var(--ease); } .site-header.is-scrolled .header-inner { padding: 9px var(--gutter); } .site-header__logo { grid-column: 1; justify-self: start; display: flex; text-decoration: none; border: 0; } .site-header__logo img { height: 22px; width: auto; max-width: none; flex-shrink: 0; border: 0; text-decoration: none; } /* (bỏ thu nhỏ logo khi cuộn — gây cảm giác logo "lúc to lúc nhỏ"; header vẫn thu gọn padding + đổ bóng nhẹ) */ .site-nav { grid-column: 2; display: flex; justify-content: center; gap: clamp(15px, 1.9vw, 30px); } .site-nav a { position: relative; padding-bottom: 5px; font-family: var(--sans); font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--ink-soft); transition: color 0.2s; } /* gạch chân 1px: mọc khi hover, hiện đầy khi tab active */ .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .site-nav a:hover { color: var(--ink); } .site-nav a:hover::after { transform: scaleX(1); } .site-nav a.is-active { color: var(--ink); font-weight: 500; } .site-nav a.is-active::after { transform: scaleX(1); } /* Dropdown danh mục con (Nội thất / Vật liệu) */ .site-nav .nav-item { position: relative; display: inline-flex; align-items: center; } .nav-item__head { display: contents; } .nav-item__toggle { display: none; } .nav-sub { position: absolute; top: 100%; left: 0; transform: translateY(12px); min-width: 230px; background: var(--surface, #fff); border: 1px solid var(--line); padding: 12px 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); z-index: 60; box-shadow: 0 22px 48px -28px rgba(0,0,0,0.4); } .nav-sub::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .site-nav .nav-item.has-sub:hover .nav-sub, .nav-sub:hover, .site-nav .nav-item.has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); } .nav-sub__link { padding: 9px 24px !important; font-size: var(--fs-caption) !important; letter-spacing: 0.08em !important; white-space: nowrap; color: var(--ink-soft); } .nav-sub__link::after { display: none !important; } .nav-sub__link:hover { color: var(--ink); background: rgba(0,0,0,0.04); } /* Mega-menu "Bộ sưu tập" — đổ cả cây danh mục */ /* Menu "Sản phẩm" ĐỔ TẦNG (cascading flyout): hover → 7 nhóm; hover 1 nhóm → con bên cạnh; rồi cháu */ .nav-flyout { position: absolute; top: 100%; left: 0; transform: translateY(12px); opacity: 0; visibility: hidden; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); z-index: 60; } .nav-flyout::before { content: ""; position: absolute; top: -14px; left: 0; width: 240px; height: 14px; } .site-nav .nav-item.has-mega:hover .nav-flyout, .nav-flyout:hover, .site-nav .nav-item.has-mega:focus-within .nav-flyout { opacity: 1; visibility: visible; transform: translateY(0); } .pm, .pm-sub { list-style: none; margin: 0; padding: 8px 0; background: #fff; border: 1px solid var(--line); box-shadow: 0 22px 48px -28px rgba(0,0,0,0.42); width: 212px; } .pm-item { position: relative; } .pm-item > a { display: block; padding: 9px 30px 9px 20px; font-family: var(--sans); font-size: var(--fs-caption); line-height: 1.32; letter-spacing: 0.04em; text-transform: uppercase; white-space: normal; color: var(--ink-soft); text-decoration: none; transition: color 0.2s var(--ease), background 0.2s var(--ease); } .pm-item > a::after { display: none !important; } .pm-item:hover > a { color: var(--ink); background: rgba(0,0,0,0.045); } .pm-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--mut); pointer-events: none; } .pm-arrow svg { width: 15px; height: 15px; } .pm-sub { position: absolute; top: -9px; left: 100%; opacity: 0; visibility: hidden; transform: translateX(6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .pm-item:hover > .pm-sub, .pm-item:focus-within > .pm-sub { opacity: 1; visibility: visible; transform: translateX(0); } .pm-sub.open-left { left: auto; right: 100%; transform: translateX(-6px); } .pm-item:hover > .pm-sub.open-left { transform: translateX(0); } /* Trang /san-pham/ — directory cây danh mục (editorial: ảnh + xen kẽ trái/phải) */ .dir { max-width: var(--maxw); margin: 0 auto; padding: clamp(36px,5vw,76px) var(--gutter) clamp(56px,9vw,120px); } .dir-group { display: grid; grid-template-columns: clamp(240px, 30vw, 380px) minmax(0, 1fr); gap: clamp(28px,4vw,64px); align-items: start; padding: clamp(34px,5vw,60px) 0; border-top: 1px solid var(--line); } .dir-group:first-child { border-top: 0; padding-top: clamp(6px,1.5vw,18px); } .dir-group__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-soft); } .dir-group__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); } .dir-group__media:hover img { transform: scale(1.05); } .dir-group__no { position: absolute; top: clamp(12px,1.4vw,20px); left: clamp(14px,1.6vw,22px); font-family: var(--serif); font-size: var(--fs-h3); line-height: 1; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.45); } .dir-group__content { display: flex; flex-direction: column; min-width: 0; } .dir-group__head { margin-bottom: clamp(18px,2.4vw,30px); } .dir-group__title { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.08; margin: 0; } .dir-group__title a { color: var(--ink); text-decoration: none; } .dir-group__title a:hover { color: var(--ink-soft); } .dir-group__count { display: block; margin-top: 10px; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); } .dir-group__body { display: flex; flex-direction: column; gap: clamp(16px,2vw,26px); } .dir-links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; } .dir-links li { break-inside: avoid; margin-bottom: 9px; } .dir-links a { font-family: var(--sans); font-size: var(--fs-body); color: var(--ink-soft); text-decoration: none; transition: color 0.2s var(--ease); } .dir-links a:hover { color: var(--ink); } .dir-sub__title { font-family: var(--serif); font-weight: 300; font-size: var(--fs-title); margin: 0 0 8px; } .dir-sub__title a { color: var(--ink); text-decoration: none; } .dir-sub__title a:hover { color: var(--ink-soft); } .dir-group__link { margin-top: clamp(20px,2.6vw,34px); align-self: start; } @media (max-width: 860px) { .dir-group { grid-template-columns: 1fr; gap: 20px; } .dir-group__media { aspect-ratio: 16 / 10; } } @media (max-width: 480px) { .dir-links { columns: 1; } } .header-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; } .lang-dd { position: relative; font-size: var(--fs-label); letter-spacing: 0.12em; } /* Box viền ink, cao 38px = nút search; hover/mở fill đậm như nút ĐẶT LỊCH */ .lang-dd__cur { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 11px; margin: 0; background: transparent; border: 1px solid transparent; border-radius: 0; cursor: pointer; font-family: var(--sans); font-size: inherit; letter-spacing: inherit; color: var(--ink); -webkit-appearance: none; appearance: none; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .lang-dd__cur:hover, .lang-dd__cur:focus, .lang-dd__cur:active, .lang-dd:hover .lang-dd__cur, .lang-dd:focus-within .lang-dd__cur { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; outline: none; } .lang-dd__cur:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; } .lang-dd__caret { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: 0.7; transition: transform 0.25s var(--ease); } .lang-dd:hover .lang-dd__caret, .lang-dd:focus-within .lang-dd__caret { transform: rotate(180deg); } .lang-dd__menu { position: absolute; top: calc(100% + 6px); left: 0; right: auto; min-width: 100%; background: var(--surface, #fff); border: 1px solid var(--line); padding: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); z-index: 60; box-shadow: 0 16px 36px -22px rgba(0,0,0,0.4); } .lang-dd__menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } .lang-dd:hover .lang-dd__menu, .lang-dd:focus-within .lang-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-dd__menu a { padding: 9px 12px; text-align: center; color: var(--mut); white-space: nowrap; letter-spacing: 0.12em; transition: color 0.2s var(--ease), background 0.2s var(--ease); } .lang-dd__menu a:hover { color: var(--ink); background: rgba(0,0,0,0.05); } .reservation { font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; white-space: nowrap; border: 1px solid var(--ink); padding: 10px 18px; color: var(--ink); transition: background 0.25s, color 0.25s; } .reservation:hover { background: var(--ink); color: #fff; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 0; font-size: var(--fs-lead); line-height: 1; cursor: pointer; color: var(--ink); -webkit-appearance: none; appearance: none; transition: background 0.25s, color 0.25s, border-color 0.25s; } /* ---------------------------------------------------------------- HERO (full-bleed, chữ trên ảnh) */ .hero { position: relative; height: calc(100vh - 66px); min-height: 560px; overflow: hidden; background: #111; } .hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.8); transform: scale(1.02); } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.6) 100%); } .hero__inner { position: absolute; left: 0; right: 0; bottom: 72px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); color: #fff; } .hero__eyebrow { font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 14px; } .hero__title { font-family: var(--serif); font-weight: 300; font-size: var(--fs-hero); line-height: 1.0; color: #fff; max-width: 16ch; } .hero__lead { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--fs-title); color: rgba(255,255,255,0.92); margin-top: 4px; } .hero__sub { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6; color: rgba(255,255,255,0.92); max-width: 50ch; margin-top: 12px; } /* Giải pháp công nghệ */ .tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .tech-card__img { aspect-ratio: 16/11; overflow: hidden; background: var(--bg-soft); margin-bottom: 18px; } .tech-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); } .tech-card:hover .tech-card__img img { transform: scale(1.04); } .tech-card__no { font-family: var(--serif); font-size: var(--fs-title); color: var(--mut); } .tech-card h3 { font-family: var(--sans) !important; font-weight: 400; font-size: 16px; line-height: 1.35; letter-spacing: 0.01em; margin: 10px 0 6px; } .tech-card p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.75; } @media (max-width: 760px) { .tech-grid { grid-template-columns: 1fr; gap: var(--sp-6); } } /* Logo đối tác */ .partner-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .partner-track { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(38px, 6vw, 88px); width: max-content; animation: partnerScroll 38s linear infinite; } .partner-marquee:hover .partner-track { animation-play-state: paused; } .partner-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 72px; } .partner-logo img { max-height: 46px; width: auto; opacity: 0.65; filter: grayscale(1); transition: opacity 0.25s, filter 0.25s; } .partner-logo:hover img { opacity: 1; filter: none; } .partner-logo--ph { flex: 0 0 auto; min-width: 172px; height: 72px; border: 1px dashed var(--line); color: var(--mut); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; } @keyframes partnerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .partner-track { animation: none; } } @media (max-width: 760px) { .partner-track { gap: 34px; } .partner-logo--ph { min-width: 132px; } } /* Dịch vụ: lợi ích cốt lõi (rich) */ .service-benefits .rich ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 72ch; } .service-benefits .rich li { position: relative; padding-left: 26px; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.7; } .service-benefits .rich li::before { content: ""; position: absolute; left: 0; top: 13px; width: 13px; height: 1px; background: var(--ink); } .service-benefits .rich p { max-width: 72ch; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.85; } /* Lợi ích cốt lõi — thẻ có icon */ .svc-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); } .svc-benefits--prose { grid-template-columns: 1fr; max-width: 86ch; } .svc-benefit { padding-top: 2px; } .svc-benefit__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); margin-bottom: 18px; } .svc-benefit__t { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.72; margin: 0; } .svc-benefits--prose .svc-benefit { display: flex; gap: 22px; align-items: flex-start; } .svc-benefits--prose .svc-benefit__ico { flex: 0 0 auto; margin-bottom: 0; } .svc-benefits--prose .rich p { margin: 0; } @media (max-width: 880px) { .svc-benefits { grid-template-columns: 1fr; gap: 32px; } .svc-benefits--prose .svc-benefit { flex-direction: column; } } /* Quy trình thực hiện — thẻ có ảnh */ .svc-steps { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(20px, 2.6vw, 40px); } .svc-step { position: relative; } .svc-step__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); margin-bottom: 18px; } .svc-step__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .svc-step:hover .svc-step__img img { transform: scale(1.05); } .svc-step__no { display: block; font-family: var(--serif); font-weight: 300; font-size: var(--fs-numeral-sm); line-height: 1; color: var(--mut); } .svc-step__t { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 300; font-size: var(--fs-title); line-height: 1.25; color: var(--ink); } /* Archive Dịch vụ — hàng full-width so le */ .svc-list { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-7) var(--gutter) var(--sp-8); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 104px); } /* Archive Dự án — banner full-width 16:9, title đè lên ảnh */ .proj-banners { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-9); display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 36px); } .proj-banner { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); } .proj-banner__media, .proj-banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; } .proj-banner__media img { object-fit: cover; transition: transform 1.3s var(--ease); } .proj-banner:hover .proj-banner__media img { transform: scale(1.05); } .proj-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,16,13,0.72), rgba(18,16,13,0.12) 52%, rgba(18,16,13,0)); } .proj-banner__overlay { position: absolute; z-index: 2; left: clamp(22px, 4vw, 60px); right: clamp(22px, 4vw, 60px); bottom: clamp(24px, 4vw, 52px); color: #fff; } .proj-banner__no { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(15px, 1.4vw, 19px); color: rgba(255,255,255,0.72); margin-bottom: 8px; } .proj-banner__title { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.04; color: #fff; max-width: 22ch; } .proj-banner__meta { display: block; font-family: var(--sans); font-weight: 400; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-top: 14px; } @media (max-width: 600px) { .proj-banner { aspect-ratio: 4 / 3; } } .svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; } .svc-row--rev .svc-row__media { order: 2; } .svc-row__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); } .svc-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .svc-row:hover .svc-row__media img { transform: scale(1.045); } .svc-row__body { display: flex; flex-direction: column; align-items: flex-start; padding: 0 clamp(0px, 2vw, 32px); } .svc-row__no { font-family: var(--serif); font-weight: 300; font-size: var(--fs-numeral); line-height: 1; color: var(--line); } .svc-row__title { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.1; color: var(--ink); margin-top: 14px; transition: color 0.25s; } .svc-row:hover .svc-row__title { color: var(--brand, var(--ink)); } .svc-row__excerpt { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.8; margin-top: 16px; max-width: 48ch; } .svc-row .link-arrow { margin-top: 24px; } @media (max-width: 860px) { .svc-row { grid-template-columns: 1fr; gap: var(--sp-4); } .svc-row--rev .svc-row__media { order: 0; } .svc-row__body { padding: 0; } } /* FAQ accordion */ .faq-list { max-width: none; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--sans); font-size: var(--fs-title); line-height: 1; color: var(--mut); flex: 0 0 auto; } .faq-item[open] summary::after { content: "\2013"; } .faq-item__a { padding: 0 0 22px; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.8; max-width: 64ch; } /* Before / After slider */ .ba { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; --x: 50%; user-select: none; touch-action: none; background: var(--bg-soft); cursor: ew-resize; } .ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .ba__before { -webkit-clip-path: inset(0 calc(100% - var(--x)) 0 0); clip-path: inset(0 calc(100% - var(--x)) 0 0); } .ba__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; transform: translateX(-1px); z-index: 4; pointer-events: none; } .ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; } .ba__grip::before { content: "\2194"; color: var(--ink); font-size: var(--fs-body); } .ba__tag { position: absolute; top: 14px; z-index: 3; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; background: rgba(10,10,10,0.7); color: #fff; padding: 6px 12px; pointer-events: none; } .ba__tag--before { left: 14px; } .ba__tag--after { right: 14px; } /* Chứng chỉ (B2B) */ .cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .cert-card { border: 1px solid var(--line); padding: 32px; } .cert-card__badge { display: inline-block; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; border: 1px solid var(--ink); padding: 6px 12px; } .cert-card h3 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); margin: 18px 0 10px; } .cert-card p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.75; } .cert-card__file { display: inline-block; margin-top: 16px; font-size: var(--fs-small); color: var(--mut); } @media (max-width: 700px) { .cert-grid { grid-template-columns: 1fr; } } /* input file (form B2B) */ .booking-form input[type="file"] { font-family: var(--sans); font-size: var(--fs-small); color: var(--ink-soft); padding: 12px 14px; border: 1px dashed var(--line); width: 100%; background: transparent; cursor: pointer; border-radius: 0; } .booking-form input[type="file"]:hover { border-color: var(--mut); } .hero__inner .btn { margin-top: 22px; border-color: #fff; background: #fff; color: var(--ink); } .hero__inner .btn:hover { background: transparent; color: #fff; } /* ---------------------------------------------------------------- SECTION PRIMITIVES */ .sec { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-9) var(--gutter); } .sec--tight { padding-block: var(--sp-8); } .sec-head { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: end; margin-bottom: var(--sp-6); padding-bottom: 20px; border-bottom: 1px solid var(--line); } .sec-head__t { display: flex; flex-direction: column; gap: 10px; } .sec-head__en { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0.01em; } .sec-head__sub { font-family: var(--sans); font-weight: 400; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); } .sec-head .link-arrow { justify-self: end; align-self: end; } /* Mục không có nút "Xem tất cả" → tiêu đề + sub dùng full-width, tránh sub dài bị rớt dòng kỳ */ .sec-head:not(:has(.link-arrow)) { grid-template-columns: 1fr; } .sec-head__sub { text-wrap: balance; } /* ---------------------------------------------------------------- MANIFESTO */ .manifesto { background: var(--bg-soft); } .manifesto-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; max-width: var(--maxw); margin-inline: auto; padding: var(--sp-10) var(--gutter); } .manifesto h3 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); line-height: 1.15; } .manifesto .label { display: block; margin-bottom: 14px; } .manifesto p { font-size: var(--fs-body); line-height: 1.85; color: var(--ink-soft); max-width: 60ch; margin-bottom: 18px; } .manifesto .signoff { margin-top: 32px; font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); color: var(--ink); } /* ---------------------------------------------------------------- COLLECTIONS GRID (12-col bất đối xứng) */ .collections-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .collection { position: relative; overflow: hidden; display: block; color: inherit; } .collection .img { aspect-ratio: 4/5; background-size: cover; background-position: center; transition: transform 1.2s var(--ease); } .collection:hover .img { transform: scale(1.04); } .collection .meta { position: relative; border-top: 1px solid var(--line); margin-top: 2px; padding: 16px 30px 6px 0; } .collection .meta h4 { display: block; font-family: var(--serif); font-weight: 300; font-size: var(--fs-title); letter-spacing: 0.01em; line-height: 1.1; } .collection .meta .vi { display: block; font-family: var(--serif); font-style: italic; font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: var(--mut); margin-top: 7px; } .collection .meta::after { content: ""; position: absolute; top: 16px; right: 2px; width: 18px; height: 18px; background: var(--mut); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='3'%20y1='9'%20x2='14'%20y2='9'/%3E%3Cpolyline%20points='9.4%204.4%2015%209%209.4%2013.6'/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='3'%20y1='9'%20x2='14'%20y2='9'/%3E%3Cpolyline%20points='9.4%204.4%2015%209%209.4%2013.6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .collection:hover .meta::after { transform: translateX(5px); background: var(--ink); } .c-1 .meta h4, .c-2 .meta h4 { font-size: var(--fs-h3); } .c-1 { grid-column: span 6; } .c-2 { grid-column: span 6; } .c-3 { grid-column: span 4; } .c-4 { grid-column: span 4; } .c-5 { grid-column: span 4; } /* ---------------------------------------------------------------- DARK STATEMENT */ .section-dark { background: var(--bg-soft); } .section-dark .sec-head { border-color: var(--line); } .section-dark .sec-head__en { color: var(--ink); } .section-dark .sec-head__sub, .section-dark .label { color: var(--mut); } .dark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } .dark-cell { position: relative; overflow: hidden; background: var(--dark); min-height: 440px; } .dark-cell__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 1.4s var(--ease), opacity var(--dur) var(--ease); } .dark-cell:hover .dark-cell__bg { transform: scale(1.05); opacity: 1; } .dark-cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(102deg, rgba(15,15,15,0.66) 0%, rgba(15,15,15,0.38) 50%, rgba(15,15,15,0.16) 100%); } .dark-cell__body { position: relative; z-index: 2; min-height: 440px; padding: clamp(36px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; } .dark-cell h3 { font-family: var(--sans) !important; font-weight: 400; font-size: 16px; line-height: 1.35; letter-spacing: 0.01em; color: #fff; text-shadow: 0 1px 16px rgba(8,8,8,0.45); } .dark-cell p { color: rgba(255,255,255,0.86); font-size: var(--fs-small); line-height: 1.75; max-width: 38ch; margin-top: 6px; text-shadow: 0 1px 14px rgba(8,8,8,0.4); } .dark-cell .btn { align-self: flex-start; border-color: rgba(255,255,255,0.55); color: #fff; background: transparent; } .dark-cell .btn:hover { background: #fff; color: var(--ink); border-color: #fff; } /* ---------------------------------------------------------------- TILE / GALLERY (chung) */ .grid { display: grid; gap: var(--gap); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .tile { display: block; color: inherit; } .tile__media { display: block; overflow: hidden; background: var(--bg-soft); aspect-ratio: 4/5; } .tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .tile:hover .tile__media img { transform: scale(1.04); } .tile__cap { display: block; position: relative; margin-top: 2px; padding: 14px 30px 6px 0; } .tile__cap::after { content: ""; position: absolute; top: 16px; right: 2px; width: 18px; height: 18px; background: var(--mut); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='3'%20y1='9'%20x2='14'%20y2='9'/%3E%3Cpolyline%20points='9.4%204.4%2015%209%209.4%2013.6'/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='3'%20y1='9'%20x2='14'%20y2='9'/%3E%3Cpolyline%20points='9.4%204.4%2015%209%209.4%2013.6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .tile:hover .tile__cap::after { transform: translateX(5px); background: var(--ink); } .tile__en { display: block; font-family: var(--serif); font-weight: 300; font-size: var(--fs-title); letter-spacing: 0.01em; color: var(--ink); line-height: 1.1; } /* thẻ collection nổi bật (full-width) tiêu đề lớn hơn 1 bậc nhưng vẫn ≤ H2 */ .collections-grid .c-1 .tile__en, .collections-grid .c-2 .tile__en { font-size: var(--fs-h3); } .tile__sub { display: block; font-family: var(--sans); font-style: normal; font-size: var(--fs-small); letter-spacing: 0; text-transform: none; color: var(--mut); margin-top: 7px; } .grid-3.stagger > .tile:nth-child(2) { margin-top: var(--sp-9); } .grid-3.stagger > .tile:nth-child(3) { margin-top: var(--sp-7); } .gallery-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .gallery-3 img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--bg-soft); } /* ---------------------------------------------------------------- SPLIT */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; max-width: var(--maxw); margin-inline: auto; padding: var(--sp-10) var(--gutter); } .split__media { aspect-ratio: 4/5; overflow: hidden; } .split__media img { width: 100%; height: 100%; object-fit: cover; } .split__body h2 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); line-height: 1.15; } .split__body p { color: var(--ink-soft); margin: 18px 0 0; max-width: 46ch; line-height: 1.85; } .split__body .link-arrow, .split__body .btn { display: inline-flex; margin-top: 28px; } .split--reverse .split__media { order: 2; } /* ---------------------------------------------------------------- SUB-PAGE: page hero */ .page-hero { position: relative; overflow: hidden; background: var(--bg-soft); border-bottom: 1px solid var(--line); } .page-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: 70% center; opacity: 0.17; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 100%); } .page-hero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; padding: var(--sp-9) var(--gutter) var(--sp-7); } .crumbs { font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mut); margin-bottom: var(--sp-5); display: flex; gap: 8px; } .crumbs a:hover { color: var(--ink); } .page-hero h1 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h1); line-height: 1.08; max-width: 18ch; } .page-hero p { color: var(--ink-soft); margin: var(--sp-5) 0 0; max-width: 60ch; font-size: var(--fs-body); line-height: 1.8; } /* Biến thể HERO VIDEO cho trang menu: video nền tràn + overlay tối + chữ trắng, nội dung căn đáy */ .page-hero--video { background: #15140f; min-height: clamp(380px, 56vh, 600px); display: flex; align-items: flex-end; border-bottom: 0; } .page-hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero--video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.32) 52%, rgba(0,0,0,0.72) 100%); } .page-hero--video .page-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: var(--sp-8); padding-bottom: var(--sp-7); } .page-hero--video .crumbs, .page-hero--video .crumbs span, .page-hero--video .crumbs a { color: rgba(255,255,255,0.78); } .page-hero--video .crumbs a:hover { color: #fff; } .page-hero--video h1 { color: #fff; } .page-hero--video p { color: rgba(255,255,255,0.86); } @media (max-width: 600px) { .page-hero--video { min-height: 60vh; } } /* LEGAL pages (Privacy / Terms) */ .legal__body { max-width: 720px; margin-inline: auto; } .legal__updated { font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--mut); margin: 0 0 var(--sp-6); } .legal__body h2 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); margin: var(--sp-7) 0 var(--sp-3); } .legal__body p { color: var(--ink-soft); line-height: 1.85; margin: 0 0 var(--sp-4); } .legal__body ul { margin: 0 0 var(--sp-4); padding-left: 1.2em; } .legal__body li { color: var(--ink-soft); line-height: 1.8; margin-bottom: 8px; } .legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ---------------------------------------------------------------- SUB-PAGE: archive / single project */ .archive-wrap { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-8) var(--gutter) var(--sp-10); } .proj-hero { width: 100%; height: 80vh; min-height: 460px; overflow: hidden; } .proj-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } .proj-head { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-8) var(--gutter) var(--sp-6); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); align-items: end; border-bottom: 1px solid var(--line); } .proj-head h1 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.12; } .proj-meta { display: flex; flex-wrap: wrap; gap: var(--sp-6); } .proj-meta .k { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.22em; color: var(--mut); } .proj-meta .v { font-size: var(--fs-body); margin-top: 4px; } /* Trang sản phẩm/vật liệu: chỉ 1 khối Mã SP → canh phải sát mép cho cân, hết ô trống lệch */ .prod-detail .proj-meta, .mat-detail .proj-meta { justify-content: flex-end; text-align: right; } /* ====== PROJECT — Sticky Split layout ====== */ .proj-split { max-width: var(--maxw); margin: clamp(40px,5vw,72px) auto 0; padding: 0 var(--gutter) var(--sp-9); display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: clamp(32px,5vw,84px); align-items: start; } .proj-aside { position: sticky; top: 104px; } .proj-aside h1 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.12; margin: 0 0 26px; } .proj-aside__meta { margin: 0 0 26px; display: flex; flex-direction: column; gap: 0; } .proj-aside__meta > div { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--line); padding: 12px 0; } .proj-aside__meta dt { font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); margin: 0; } .proj-aside__meta dd { margin: 0; color: var(--ink); font-size: var(--fs-body); } .proj-aside__body { color: var(--ink-soft); line-height: 1.8; font-size: var(--fs-body); } .proj-web-btn { margin-top: var(--sp-5); padding: 13px 22px; font-size: var(--fs-label); } .proj-web-btn span { font-size: 1.1em; } /* Chi tiết dự án + phong cách: showcase ảnh NGANG có nút trái/phải + chấm chọn + số đếm */ .proj-stream { display: flex; gap: clamp(14px,1.6vw,26px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0; } .proj-stream::-webkit-scrollbar { display: none; } .proj-stream img { flex: 0 0 auto; width: auto; height: clamp(300px, 54vh, 580px); scroll-snap-align: start; display: block; cursor: pointer; } @media (max-width: 900px) { .proj-stream img { height: clamp(240px, 46vh, 420px); } } .proj-viewer { min-width: 0; } .proj-viewer__viewport { position: relative; overflow: hidden; } .proj-viewer__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.94); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: 0 10px 28px -12px rgba(0,0,0,0.5); transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .proj-viewer__btn--prev { left: 14px; } .proj-viewer__btn--next { right: 14px; } .proj-viewer__btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .proj-viewer__btn .ico { width: 20px; height: 20px; } .proj-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: clamp(14px,2vw,24px); margin-top: 18px; } .proj-viewer__thumbs { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; } .proj-viewer__thumbs::-webkit-scrollbar { display: none; } .proj-viewer__thumb { flex: 0 0 auto; width: 72px; height: 54px; padding: 0; border: 0; background: var(--bg-soft); cursor: pointer; overflow: hidden; opacity: 0.5; filter: grayscale(18%); position: relative; transition: opacity 0.3s var(--ease); } .proj-viewer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .proj-viewer__thumb::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--ink); opacity: 0; transition: opacity 0.3s var(--ease); } .proj-viewer__thumb:hover { opacity: 0.85; } .proj-viewer__thumb.is-on { opacity: 1; filter: none; } .proj-viewer__thumb.is-on::after { opacity: 1; } .proj-viewer__count { font-family: var(--sans); font-size: var(--fs-caption); letter-spacing: 0.14em; color: var(--mut); white-space: nowrap; } @media (max-width: 600px) { .proj-viewer__btn { width: 40px; height: 40px; } .proj-viewer__thumb { width: 60px; height: 46px; } } /* Lightbox xem chi tiết ảnh gallery */ html.lb-open { overflow: hidden; } .taka-lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: clamp(8px,2vw,28px); padding: clamp(16px,4vw,56px); background: rgba(16,15,13,0.92); backdrop-filter: blur(3px); animation: lbfade 0.3s var(--ease); } .taka-lb[hidden] { display: none; } @keyframes lbfade { from { opacity: 0; } to { opacity: 1; } } .taka-lb__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; } .taka-lb__img { max-width: min(1100px, 86vw); max-height: 82vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 80px rgba(0,0,0,0.5); } .taka-lb__count { font-family: var(--sans); font-size: var(--fs-caption); letter-spacing: 0.2em; color: rgba(255,255,255,0.7); } .taka-lb__close { position: absolute; top: clamp(14px,3vw,32px); right: clamp(14px,3vw,32px); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s var(--ease); } .taka-lb__close svg { width: 20px; height: 20px; display: block; } .taka-lb__close:hover { background: rgba(255,255,255,0.24); } .taka-lb__nav { flex: 0 0 auto; width: 54px; height: 54px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s var(--ease); } .taka-lb__nav:hover { background: rgba(255,255,255,0.24); } .taka-lb__nav svg { width: 26px; height: 26px; } @media (max-width: 600px) { .taka-lb__nav { width: 44px; height: 44px; position: absolute; bottom: 24px; } .taka-lb__nav--prev { left: 24px; } .taka-lb__nav--next { right: 24px; } } @media (max-width: 900px) { .proj-split { grid-template-columns: 1fr; } .proj-aside { position: static; } } .proj-nav { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-10); border-top: 1px solid var(--line); display: flex; justify-content: space-between; } /* ---------------------------------------------------------------- SUB-PAGE: story / about */ .story-lead { max-width: var(--measure); margin-inline: auto; padding: var(--sp-10) var(--measure-pad); text-align: center; } .story-lead p { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.45; color: var(--ink); } .quote { margin: 0; padding: clamp(56px, 7vw, 96px) max(var(--gutter), calc((100% - var(--measure)) / 2)); background: var(--bg-soft); border-block: 1px solid var(--line); text-align: center; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: var(--fs-quote); line-height: 1.3; color: var(--ink); } .quote cite { display: block; margin-top: var(--sp-5); font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mut); font-style: normal; font-weight: 500; } .materials { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-9) var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); border-top: 1px solid var(--line); } .materials h3 { font-family: var(--sans) !important; font-weight: 400; font-size: 16px; line-height: 1.35; letter-spacing: 0.01em; } .materials p { color: var(--ink-soft); font-size: var(--fs-small); margin-top: 6px; line-height: 1.75; } /* ---------------------------------------------------------------- BOOKING */ .booking { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-9) var(--gutter) var(--sp-10); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 88px); } .booking__info h2 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); } .booking__info p { color: var(--ink-soft); margin-top: 16px; max-width: 42ch; line-height: 1.8; } .booking__info .detail { margin-top: 28px; } .booking__info .detail .k { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.22em; color: var(--mut); } .booking__info .detail .v { margin-top: 6px; line-height: 1.7; } .booking-form { display: grid; gap: 22px; } .field { display: grid; gap: 8px; } .field > label { font-size: var(--fs-small); color: var(--ink-soft); } .booking-form .field input, .booking-form .field select, .booking-form .field textarea { font-family: var(--sans); font-size: var(--fs-body); color: var(--ink); background-color: transparent; border: 1px solid var(--line); padding: 13px 14px; border-radius: 0; width: 100%; } .booking-form .field input:focus, .booking-form .field select:focus, .booking-form .field textarea:focus { outline: none; border-color: var(--ink); } /* select: ẩn mũi tên native, vẽ mũi tên tinh tế đồng bộ (giữ ô ngày native) */ .booking-form .field select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } /* khử tô xanh autofill của Chrome -> đồng bộ nền trong suốt */ .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus, .field input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; box-shadow: 0 0 0 1000px var(--bg) inset; -webkit-text-fill-color: var(--ink); transition: background-color 9999s ease-in-out 0s; } .field--row { grid-template-columns: 1fr 1fr; gap: 16px; display: grid; } .field-check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--ink-soft); cursor: pointer; } .booking-form .btn { justify-self: start; } .notice { grid-column: 1 / -1; max-width: var(--maxw); margin: 0 auto 8px; padding: 14px 18px; font-size: var(--fs-small); border: 1px solid var(--line); } .notice--ok { border-color: #3f6f4f; color: #2f5a3f; background: #f1f6f1; } .notice--err { border-color: #9a3b3b; color: #8a2f2f; background: #faf1f1; } /* ---------------------------------------------------------------- FOOTER (tối) */ .site-footer { background: var(--bg-soft); color: var(--ink-soft); border-top: 1px solid var(--line); padding: var(--sp-8) 0 var(--sp-5); margin-top: 0; } .site-footer .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line); align-items: start; } .site-footer__brand img { height: 24px; margin-bottom: var(--sp-4); } .site-footer__brand p { color: var(--mut); font-size: var(--fs-small); max-width: 340px; margin: 0; line-height: 1.7; } .site-footer h4 { font-family: var(--sans) !important; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); font-weight: 400; margin: 0 0 20px; } .site-footer a { display: block; font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 12px; } .site-footer a:hover { color: var(--ink); } .site-footer__bottom { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 0; display: flex; justify-content: space-between; font-size: var(--fs-small); letter-spacing: 0.02em; text-transform: none; color: var(--mut); } .site-footer__bottom .legal { display: flex; gap: 10px; } .site-footer__bottom a { display: inline; margin: 0; color: var(--mut); } .site-footer__bottom a:hover { color: var(--ink); } /* ---------------------------------------------------------------- RESPONSIVE */ @media (max-width: 1024px) { .site-nav { gap: 22px; } .sec-head, .manifesto-grid { grid-template-columns: 1fr; gap: 24px; } .sec-head .link-arrow { justify-self: start; } .dark-grid { grid-template-columns: 1fr; } .c-1, .c-2 { grid-column: span 12; } .c-3, .c-4, .c-5 { grid-column: span 6; } .c-1 .tile__media, .c-2 .tile__media { aspect-ratio: 16/10; } /* full-width → đổi sang NGANG, tránh card cao quá khổ trên tablet */ .booking { grid-template-columns: 1fr; gap: var(--sp-7); } .materials { grid-template-columns: 1fr; gap: var(--sp-5); } .proj-head { grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; } .site-footer .wrap { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } } /* Header: chuyển hamburger sớm (≤980) để nav 5 mục không bị chật làm rớt nút */ @media (max-width: 980px) { .header-inner { grid-template-columns: 1fr auto; } .site-nav { display: none; } .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 var(--gutter); max-height: calc(100vh - 61px); max-height: calc(100dvh - 61px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Đường chia giữa các mục cấp 1 */ .site-nav.is-open > .nav-item, .site-nav.is-open > a { width: 100%; border-top: 1px solid var(--line); } .site-nav.is-open > .nav-item:first-child, .site-nav.is-open > a:first-child { border-top: 0; } .site-nav .nav-item { display: flex; flex-direction: column; align-items: stretch; width: 100%; } /* Hàng tiêu đề mục: nhãn + nút chevron */ .nav-item__head { display: flex; align-items: center; justify-content: space-between; width: 100%; } .nav-item__head > a { flex: 1 1 auto; padding: 15px 0 !important; } .site-nav.is-open > a { padding: 15px 0 !important; } .nav-item__toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; height: 52px; margin-right: -14px; background: transparent; border: 0; color: var(--mut); cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: transform 0.28s var(--ease), color 0.2s var(--ease); } .nav-item__toggle svg { width: 22px; height: 22px; flex: 0 0 auto; } .nav-item__toggle:focus, .nav-item__toggle:active { background: transparent; outline: none; } .site-nav.is-open a, .site-nav.is-open .nav-item__toggle { -webkit-tap-highlight-color: transparent; } .nav-item.is-expanded > .nav-item__head .nav-item__toggle { transform: rotate(180deg); color: var(--ink); } /* Sub thu gọn mặc định; mở khi .is-expanded */ .nav-sub, .nav-flyout { display: none; position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; border: 0; box-shadow: none; background: transparent; } .nav-item.is-expanded > .nav-sub { display: flex; flex-direction: column; align-items: stretch; } .nav-item.is-expanded > .nav-flyout { display: block; } .nav-sub { padding: 0 0 8px; } .nav-sub::before { display: none; } /* Link con: nền xám full-bleed (tràn hết bề ngang drawer), chữ thụt vào */ .nav-sub__link { display: block; white-space: normal; margin-inline: calc(-1 * var(--gutter)); padding: 11px var(--gutter) 11px calc(var(--gutter) + 26px) !important; } .nav-sub__link:hover, .nav-sub__link:active { background: rgba(0,0,0,0.05); } .nav-flyout::before { display: none; } /* Flyout Sản phẩm: accordion nhiều cấp; nhóm có con → arrow toggle */ .pm { border: 0; box-shadow: none; background: transparent; padding: 0 0 8px; min-width: 0; width: auto; } .pm-item { position: relative; } .pm-item > a { display: block; white-space: normal; margin-inline: calc(-1 * var(--gutter)); padding: 11px calc(var(--gutter) + 52px) 11px calc(var(--gutter) + 26px) !important; } .pm-item > a:active, .pm-item.is-expanded > a { background: rgba(0,0,0,0.05); } .pm-sub .pm-item > a { padding-left: calc(var(--gutter) + 44px) !important; } .pm-sub .pm-sub .pm-item > a { padding-left: calc(var(--gutter) + 62px) !important; } .pm-sub { display: none; position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: transparent; padding: 0; width: auto; } .pm-item.is-expanded > .pm-sub { display: block; } .pm-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; width: 48px; height: 47px; margin: 0; padding: 0; pointer-events: auto; color: var(--mut); transform: rotate(90deg); transition: transform 0.28s var(--ease), color 0.2s var(--ease); -webkit-tap-highlight-color: transparent; } .pm-arrow svg { width: 20px; height: 20px; } .pm-item.is-expanded > .pm-arrow { transform: rotate(-90deg); color: var(--ink); } .nav-toggle { display: inline-flex; } } @media (max-width: 520px) { .site-header__logo img { height: 17px; } } @media (max-width: 760px) { .header-right .lang-dd, .header-right .reservation { display: none; } .gallery-3 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-3.stagger > .tile { margin-top: 0 !important; } .split { grid-template-columns: 1fr; gap: var(--sp-6); } .split--reverse .split__media { order: 0; } .field--row { grid-template-columns: 1fr; } .hero { height: 70vh; } .hero__title { font-size: clamp(34px, 9vw, 52px); } .site-footer .wrap { grid-template-columns: 1fr; } } @media (max-width: 460px) { .c-1, .c-2, .c-3, .c-4, .c-5 { grid-column: span 12; } .c-1 .tile__media, .c-2 .tile__media { aspect-ratio: 4/5; } /* mobile 1 cột → về dọc lại (1 card/màn nhìn đẹp) */ .gallery-3 { grid-template-columns: 1fr; } } /* ========================================================================== CONTENT LAYERS (specs chất liệu · steps quy trình · map) — tái dùng tokens ========================================================================== */ .specs { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-9) var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-7); border-top: 1px solid var(--line); } .specs .item__img, .materials .item__img { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); margin-bottom: 18px; } .specs .item__img img, .materials .item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .specs .item:hover .item__img img, .materials > div:hover .item__img img { transform: scale(1.05); } .materials .item__img { margin-bottom: 18px; } .specs .item h4 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-title); } .specs .item .note { color: var(--ink-soft); font-size: var(--fs-small); margin-top: 10px; line-height: 1.7; } .steps { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-9) var(--gutter); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); } .step { } .step__img { aspect-ratio: 4/5; overflow: hidden; background: var(--bg-soft); margin-bottom: 18px; } .step__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .step:hover .step__img img { transform: scale(1.05); } .step .no { border-top: 1px solid var(--ink); padding-top: 14px; font-family: var(--serif); font-size: var(--fs-h2); line-height: 1; color: var(--mut); } .step h4 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-title); margin-top: 8px; } .step p { color: var(--ink-soft); font-size: var(--fs-small); margin-top: 10px; line-height: 1.7; } .map { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) var(--sp-9); } .map iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(0.25) contrast(1.03); } @media (max-width: 900px) { .specs { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .steps { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } } @media (max-width: 560px) { .specs, .steps { grid-template-columns: 1fr; } .map iframe { height: 300px; } } /* ========================================================================== RESPONSIVE SCALE — laptop → desktop → 2K → 4K TV Base (≤1439): --maxw 1200. Nới container + phóng type ở màn lớn để nội dung không thành "đảo nhỏ" giữa 4K. Chỉ override token + vài cỡ card. ========================================================================== */ @media (min-width: 1440px) { :root { --maxw: 1320px; } } @media (min-width: 1680px) { :root { --maxw: 1440px; --gutter: clamp(48px, 5vw, 88px); } } @media (min-width: 1920px) { :root { --maxw: 1600px; --gutter: 96px; --gap: 28px; --fs-body: 16px; --fs-small: 14px; --fs-hero: clamp(58px, 3.8vw, 80px); --fs-h1: clamp(44px, 3.1vw, 60px); --fs-h2: clamp(30px, 2.2vw, 42px); --fs-h3: clamp(26px, 1.8vw, 34px); --fs-title: clamp(22px, 1.5vw, 28px); } } @media (min-width: 2560px) { :root { --maxw: 2000px; --gutter: 120px; --gap: 32px; --fs-body: 18px; --fs-small: 15px; --fs-label: 12px; --fs-hero: clamp(80px, 3.8vw, 112px); --fs-h1: clamp(56px, 3.3vw, 80px); --fs-h2: clamp(40px, 2.5vw, 56px); --fs-h3: clamp(32px, 1.9vw, 42px); --fs-title: clamp(28px, 1.8vw, 36px); } .tile__sub { font-size: var(--fs-small); } .site-nav a { font-size: var(--fs-small); } .hero__title { max-width: 18ch; } } @media (min-width: 3200px) { :root { --maxw: 2440px; --gutter: 160px; --fs-body: 20px; --fs-small: 16px; --fs-title: clamp(34px, 1.6vw, 44px); } .tile__sub { font-size: var(--fs-small); } } /* Mobile L: 561–767 — cho lưới 2 cột thay vì nhảy thẳng về 1 cột */ @media (min-width: 561px) and (max-width: 767px) { .grid-3, .gallery-3, .specs, .steps { grid-template-columns: 1fr 1fr; } .grid-3.stagger > .tile { margin-top: 0; } .c-1, .c-2 { grid-column: span 12; } .c-3, .c-4, .c-5 { grid-column: span 6; } } /* ========================================================================== WOOCOMMERCE CATALOG — Vật liệu (Phase 1) ========================================================================== */ .catalog { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-8) var(--gutter); display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px,5vw,72px); align-items: start; } .catalog__filter { position: sticky; top: 90px; } .filter__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px; } .filter__clear { font-size: var(--fs-caption); color: var(--mut); } .filter__clear:hover { color: var(--ink); } .filter-group { margin-bottom: 26px; } .filter-group h4 { font-family: var(--sans) !important; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); font-weight: 400; margin-bottom: 10px; } .filter-opt { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: var(--fs-small); color: var(--ink-soft); } /* Checkbox đồng bộ hệ thống: ô vuông viền 1px, góc vuông; chọn → fill ink + tick line 1px trắng */ .filter-opt input[type="checkbox"], .field-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; margin: 0; width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 0; background: transparent; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; } .filter-opt input[type="checkbox"]:hover, .field-check input[type="checkbox"]:hover { border-color: var(--ink-soft); } .filter-opt input[type="checkbox"]:checked, .field-check input[type="checkbox"]:checked { border-color: var(--ink); background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23fff'%20stroke-width='1.45'%20stroke-linecap='square'%20stroke-linejoin='miter'%3E%3Cpolyline%20points='3.8%208.4%206.6%2011%2012%205'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px; } .filter-opt input[type="checkbox"]:focus-visible, .field-check input[type="checkbox"]:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; } .filter-opt em { margin-left: auto; font-style: normal; font-size: var(--fs-caption); color: var(--mut); } .filter-opt.is-on { color: var(--ink); } .filter__apply { width: 100%; justify-content: center; margin-top: 6px; } .catalog__bar { padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line); } .catalog__count { font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); } .catalog__empty { color: var(--ink-soft); } /* Phân trang catalog */ .catalog-pager { margin-top: var(--sp-7); border-top: 1px solid var(--line); padding-top: var(--sp-5); } .catalog-pager .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; } .catalog-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 42px; height: 42px; padding: 0; font-size: var(--fs-small); letter-spacing: 0; color: var(--ink-soft); border: 1px solid var(--line); transition: color 0.2s, border-color 0.2s, background 0.2s; } .catalog-pager a.page-numbers:hover { color: var(--ink); border-color: var(--ink); } .catalog-pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--bg, #fff); } .catalog-pager .page-numbers.dots { border-color: transparent; } .catalog-pager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Material detail */ .mat-split { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-7) var(--gutter) var(--sp-8); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; } .mat-figure { position: relative; background: var(--bg-soft); overflow: hidden; } .mat-figure__img { width: 100%; height: auto; display: block; } .mat-figure__hint { position: absolute; left: 16px; bottom: 16px; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; background: rgba(10,10,10,0.68); color: #fff; padding: 6px 12px; } .mat-info__lead { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.8; margin-bottom: var(--sp-6); } .mat-info__lead p { margin: 0; } .spec-block, .dl-block { padding: var(--sp-5) 0; border-top: 1px solid var(--line); } .spec-block .label-en, .dl-block .label-en { display: block; margin-bottom: 16px; } .spec-list { display: block; } .spec-row { display: flex; justify-content: space-between; gap: 24px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-body); } .spec-row dt { color: var(--mut); margin: 0; font-weight: 400; } .spec-row dd { color: var(--ink); text-align: right; margin: 0; font-weight: 400; } .dl-row { display: flex; flex-wrap: wrap; gap: 12px; } .dl-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; padding: 14px 20px; border: 1px solid var(--line); background: transparent; color: var(--mut); cursor: not-allowed; } .dl-btn em { font-style: normal; font-size: var(--fs-label); opacity: 0.7; } .mat-cta { margin-top: var(--sp-6); } .mat-cta__note { font-size: var(--fs-small); color: var(--mut); margin-top: 12px; max-width: 42ch; line-height: 1.7; } .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.06em; } .mat-related { border-top: 1px solid var(--line); } @media (max-width: 900px) { .catalog { grid-template-columns: 1fr; } .catalog__filter { position: static; } .mat-split { grid-template-columns: 1fr; } } @media (max-width: 600px) { } /* ---------------------------------------------------------------- SP HOÀN THIỆN (Phase 1b) */ .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(32px,3vw,48px) clamp(18px,1.8vw,28px); } @media (max-width: 1000px) { .prod-grid { grid-template-columns: 1fr 1fr; } } .prod-card { display: block; cursor: default; } /* card sản phẩm chỉ hiển thị, không click vào chi tiết */ .prod-card__img { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--bg-soft); } .prod-card__a, .prod-card__b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .prod-card__a { transition: transform 1.2s var(--ease), opacity 0.8s var(--ease); } .prod-card__b { opacity: 0; transition: opacity 0.8s var(--ease); } .prod-card:hover .prod-card__b { opacity: 1; } .prod-card:hover .prod-card__a { transform: scale(1.04); } .prod-card__meta { display: block; padding-top: 18px; } .prod-card__name { display: block; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.35; letter-spacing: 0.01em; } .prod-card__room { display: block; margin-top: 6px; font-family: var(--sans); font-size: var(--fs-small); letter-spacing: 0.01em; text-transform: none; color: var(--mut); } .prod-split { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-7) var(--gutter) var(--sp-8); display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; } .prod-gallery__main { background: var(--bg-soft); overflow: hidden; aspect-ratio: 1/1; } .prod-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; } .prod-gallery__thumbs { display: flex; gap: 12px; margin-top: 14px; } .pg-thumb { width: 80px; height: 80px; padding: 0; border: 1px solid transparent; background: var(--bg-soft); cursor: pointer; overflow: hidden; transition: border-color 0.2s; } .pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-thumb.is-on { border-color: var(--ink); } .prod-info__lead { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.8; margin-bottom: var(--sp-6); } .prod-info__lead p { margin: 0; } @media (max-width: 900px) { .prod-split { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- B2B TOOLS (Phase 2) */ .mat-figure[data-magnify] { cursor: crosshair; } .mag-lens { position: absolute; width: 190px; height: 190px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 6px 30px rgba(0,0,0,0.35); background-repeat: no-repeat; pointer-events: none; display: none; z-index: 5; } .mat-figure__hint { display: flex; align-items: center; gap: 7px; } .mat-figure__hint::before { content: ""; width: 13px; height: 13px; border: 1.5px solid #fff; border-radius: 50%; box-shadow: 2px 2px 0 -1px #fff; } /* nút download đã có file (kích hoạt) */ .dl-btn--on { color: var(--ink); border-color: var(--ink); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .dl-btn--on:hover { background: var(--ink); color: #fff; } .dl-btn--on em { opacity: 0.55; } @media (hover: none) { .mat-figure[data-magnify] { cursor: default; } .mag-lens { display: none !important; } .mat-figure__hint { display: none; } } /* ---------------------------------------------------------------- HOTSPOT "SHOP THE LOOK" (Phase 3) */ .proj-hero { position: relative; } .shop-badge { position: absolute; top: 18px; left: 18px; z-index: 3; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; background: rgba(10,10,10,0.7); color: #fff; padding: 7px 14px; } .hotspots { position: absolute; inset: 0; z-index: 2; } .hs-dot { position: absolute; transform: translate(-50%,-50%); width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; } .hs-dot span { display: block; width: 14px; height: 14px; margin: 8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: transform 0.25s var(--ease); } .hs-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; transform: translate(-50%,-50%); border-radius: 50%; animation: hsPulse 2.4s infinite; } @keyframes hsPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 70% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .hs-dot:hover span, .hs-dot.is-active span { transform: scale(1.25); } .hs-pop { position: absolute; transform: translate(-50%, calc(-100% - 20px)); z-index: 4; width: 240px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .hs-pop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, calc(-100% - 26px)); } .hs-pop__inner { display: flex; gap: 14px; align-items: center; background: var(--bg); border: 1px solid var(--line); padding: 10px 16px 10px 10px; box-shadow: 0 12px 44px rgba(0,0,0,0.2); } .hs-pop__img { flex: 0 0 56px; } .hs-pop__img img { width: 56px; height: 68px; object-fit: cover; display: block; background: var(--bg-soft); } .hs-pop__meta { display: flex; flex-direction: column; gap: 3px; flex: 1; } .hs-pop__sku { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--mut); } .hs-pop__name { font-family: var(--serif); font-size: var(--fs-title); line-height: 1.1; color: var(--ink); } .hs-pop__desc { display: block; margin-top: 4px; font-family: var(--sans); font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-soft); } .hs-pop__go { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; color: var(--mut); transition: transform 0.25s var(--ease), color 0.25s var(--ease); } .hs-pop__inner:hover .hs-pop__go { transform: translateX(4px); color: var(--ink); } /* ---------------------------------------------------------------- SERVICES / JOURNAL / ARTICLE (Phase 4) */ /* JOURNAL ARCHIVE — Style C asymmetric (1 lớn trái + 2 nhỏ phải + lưới thưa) */ .jrnl-filter { max-width: var(--maxw); margin: var(--sp-6) auto var(--sp-4); padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; } .jrnl-filter a { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .jrnl-filter a:hover { color: var(--ink); } .jrnl-filter a.is-on { color: var(--ink); border-bottom-color: var(--ink); } .jrnl-lead { padding-top: var(--sp-4); padding-bottom: var(--sp-7); } .jrnl-more--filtered { padding-top: var(--sp-4); } .jrnl-more--filtered .jrnl-grid { padding-top: var(--sp-6); } .jrnl-feature { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; } .jrnl-eyebrow { display: flex; align-items: center; gap: 14px; } .jrnl-eyebrow__tag { font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .jrnl-eyebrow__date { font-size: var(--fs-small); line-height: 1.2; letter-spacing: 0.06em; color: var(--mut); } .jrnl-eyebrow .jrnl-eyebrow__date { position: relative; padding-left: 14px; } .jrnl-eyebrow .jrnl-eyebrow__date::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 11px; background: var(--line); transform: translateY(-50%); } .jrnl-hero { display: flex; flex-direction: column; } .jrnl-hero__media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); } .jrnl-hero__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .jrnl-hero:hover .jrnl-hero__media img { transform: scale(1.04); } .jrnl-hero__body { display: flex; flex-direction: column; padding-top: 20px; } .jrnl-hero__title { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.14; color: var(--ink); margin-top: 12px; } .jrnl-hero__excerpt { color: var(--ink-soft); line-height: 1.8; margin-top: 13px; max-width: 52ch; } .jrnl-hero .link-arrow { margin-top: 20px; } .jrnl-side { display: flex; flex-direction: column; gap: 24px; justify-content: flex-start; } .jrnl-mini { display: grid; grid-template-columns: 124px 1fr; gap: 18px; align-items: start; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .jrnl-side .jrnl-mini:last-child { border-bottom: 0; padding-bottom: 0; } .jrnl-mini__media { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); } .jrnl-mini__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .jrnl-mini:hover .jrnl-mini__media img { transform: scale(1.05); } .jrnl-mini__body { display: flex; flex-direction: column; gap: 6px; } .jrnl-mini__title { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: 0.01em; color: var(--ink); } .jrnl-more { padding-top: 0; } .jrnl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); border-top: 1px solid var(--line); padding-top: var(--sp-7); } .jrnl-card { display: flex; flex-direction: column; } .jrnl-card__media { aspect-ratio: 3/2; overflow: hidden; background: var(--bg-soft); } .jrnl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .jrnl-card:hover .jrnl-card__media img { transform: scale(1.04); } .jrnl-card__body { display: flex; flex-direction: column; gap: 0; padding-top: 18px; } .jrnl-card__body .jrnl-eyebrow__date { margin-bottom: 6px; } .jrnl-card__title { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: 0.01em; color: var(--ink); margin-bottom: 6px; } .jrnl-card__excerpt { color: var(--ink-soft); line-height: 1.75; font-size: var(--fs-small); } .jrnl-empty { text-align: center; color: var(--mut); } @media (max-width: 900px) { .jrnl-feature { grid-template-columns: 1fr; gap: var(--sp-7); } .jrnl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .jrnl-grid { grid-template-columns: 1fr; } .jrnl-mini { grid-template-columns: 96px 1fr; gap: 14px; } } .article-head { max-width: 760px; margin: var(--sp-9) auto var(--sp-6); padding-inline: var(--gutter); text-align: center; } .article-head .crumbs { justify-content: center; } .article-head h1 { font-size: var(--fs-h1); margin-top: 14px; } .article-meta { font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); margin-top: 18px; } .article-hero { margin: 0 auto var(--sp-7); max-width: 1100px; padding-inline: var(--gutter); } .article-hero img { width: 100%; display: block; } .article-body { max-width: 720px; margin: 0 auto; padding: 0 var(--measure-pad) var(--sp-9); font-size: var(--fs-lead); line-height: 1.85; color: var(--ink-soft); } .article-body p { margin: 0 0 1.3em; } .article-body h2 { font-size: var(--fs-h2); color: var(--ink); margin: var(--sp-7) 0 var(--sp-3); } .article-body h3 { font-size: var(--fs-h3); color: var(--ink); margin: var(--sp-6) 0 var(--sp-3); } .article-body img { width: 100%; margin: var(--sp-6) 0; } .article-body blockquote { font-family: var(--serif); font-style: italic; font-size: var(--fs-h3); line-height: 1.4; color: var(--ink); margin: var(--sp-7) 0; border: 0; padding: 0; } .article-nav { max-width: 720px; margin: 0 auto; padding: var(--sp-5) var(--measure-pad) var(--sp-9); border-top: 1px solid var(--line); } /* ---------------------------------------------------------------- INTERACTIVE (Phase 5) */ /* ===== REVEAL khi cuộn (hướng "Phòng tranh") — trạng thái ẩn CHỈ do JS gắn class → JS lỗi vẫn hiện đủ ===== */ /* Mờ + dâng (khối/tiêu đề/ô lưới); --i = chỉ số so le cho item trong lưới */ .reveal { opacity: 0; transform: translateY(13px); transition: opacity 1.25s var(--ease-soft), transform 1.25s var(--ease-soft); transition-delay: calc(var(--i, 0) * 85ms); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } .reveal--head { transform: translateY(20px); } /* tiêu đề mục trồi lên rõ hơn chút */ /* Hero trang chủ: chữ hiện nhẹ nhàng khi VÀO (kiểu An Cường) — dâng dịu, so le từng dòng, chạy sau preloader */ .reveal-hero { opacity: 0; transform: translateY(22px); transition: opacity 1.25s var(--ease-soft), transform 1.25s var(--ease-soft); transition-delay: calc(var(--i, 0) * 140ms); will-change: opacity, transform; } .reveal-hero.is-in { opacity: 1; transform: none; } /* Ảnh fade khi tải xong (bớt giật) — class .img-fade CHỈ do JS gắn */ .img-fade { opacity: 0; transition: opacity 0.75s var(--ease-soft); } .img-fade.is-loaded { opacity: 1; } .reveal--head.is-in { transform: none; } /* Mặt nạ ảnh: khung cắt sẵn, ảnh lộ dần từ trên xuống (clip-path — chừa transform cho parallax) */ .reveal-mask > img { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease-soft), -webkit-clip-path 1.25s var(--ease-soft); } .reveal-mask.is-in > img { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } /* Tiêu đề trồi lên TỪNG TỪ (chữ tách span, stagger) — class .tsplit/.tw CHỈ do JS gắn */ .tsplit .tw { display: inline-block; opacity: 0; transform: translateY(0.42em); transition: opacity 0.6s var(--ease-soft), transform 0.72s var(--ease-soft); transition-delay: calc(var(--wi, 0) * 55ms); will-change: opacity, transform; } .tsplit.is-in .tw { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal--head, .reveal-hero, .reveal-mask > img { opacity: 1 !important; transform: none !important; -webkit-clip-path: none !important; clip-path: none !important; transition: none !important; } .tsplit .tw { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===== CON TRỎ TÙY BIẾN — MẶC ĐỊNH dùng con trỏ hệ thống bình thường. Chỉ hiện vòng "Xem" khi rê lên ẢNH của card (dự án/sản phẩm/bài viết). ===== */ /* vùng tương tác đặc thù giữ affordance riêng */ html.has-cursor .mat-figure[data-magnify] { cursor: crosshair; } html.has-cursor .ba, html.has-cursor .ba * { cursor: ew-resize; } html.has-cursor .tour360, html.has-cursor .tour360 *, html.has-cursor .pano, html.has-cursor .pano * { cursor: grab; } /* ẩn con trỏ hệ thống CHỈ trên ẢNH của card — nơi hiện vòng hiệu ứng */ html.has-cursor :is(.tile, .jrnl-card, .jrnl-hero, .jrnl-mini, .proj-banner) img { cursor: none; } .taka-cursor { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity 0.28s var(--ease-soft); will-change: transform; } .taka-cursor.is-media { opacity: 1; } .taka-cursor__ring { display: none; } .taka-cursor__label { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%) scale(0.7); transform-origin: center; white-space: nowrap; background: var(--ink); color: #fff; padding: 7px 15px; border-radius: 100px; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; transition: transform 0.28s var(--ease-soft); } .taka-cursor.is-media .taka-cursor__label { transform: translate(-50%, -50%) scale(1); } @media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse), (max-width: 900px) { .taka-cursor { display: none !important; } html.has-cursor :is(.tile, .jrnl-card, .jrnl-hero, .jrnl-mini, .proj-banner) img { cursor: pointer; } } /* ===== PARALLAX cuộn: xử lý bằng JS (initParallax trong motion.js) — dùng CSS property `translate` nên KHÔNG đụng transform của hover-zoom; oversize/scale set inline theo từng loại. ===== */ .split__media { overflow: hidden; } /* ===== Hover overlay tối nhẹ trên ảnh card (kèm zoom sẵn có) ===== */ .tech-card__img, .jrnl-card__media, .jrnl-mini__media, .svc-step__img, .svc-row__media, .step__img, .specs .item__img, .materials .item__img, .vm__media, .tile__media { position: relative; } .tech-card__img::after, .prod-card__img::after, .jrnl-card__media::after, .jrnl-mini__media::after, .svc-step__img::after, .svc-row__media::after, .step__img::after, .specs .item__img::after, .materials .item__img::after, .vm__media::after, .dir-group__media::after, .tile__media::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, 0.26); opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.55s var(--ease); } .tech-card:hover .tech-card__img::after, .prod-card:hover .prod-card__img::after, .jrnl-card:hover .jrnl-card__media::after, .jrnl-mini:hover .jrnl-mini__media::after, .svc-step:hover .svc-step__img::after, .svc-row:hover .svc-row__media::after, .step:hover .step__img::after, .specs .item:hover .item__img::after, .materials > div:hover .item__img::after, .vm-block:hover .vm__media::after, .dir-group__media:hover::after, .tile:hover .tile__media::after { opacity: 1; } /* counting numbers */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); text-align: center; border-block: 1px solid var(--line); } @media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } } /* ============ PRELOADER (màn vào đầu phiên — logo wipe + kẻ chỉ 1px, rồi nhấc rèm lộ trang) ============ */ /* Nhẹ: chỉ animate lớp phủ + logo; KHÔNG giấu/transform nội dung → không lag. Chỉ hiện đầu phiên (chuyển trang sau = ẩn). */ #taka-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: transform 0.8s var(--ease), visibility 0.8s; animation: preFailsafe 0s 4s forwards; } /* failsafe tự nhấc nếu JS lỗi */ #taka-preloader.is-done { transform: translateY(-101%); visibility: hidden; pointer-events: none; } .pre__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } /* ID-scoped để THẮNG `.woocommerce-page img { height:auto }` (không thì logo phình 500×89 trên trang Woo) */ #taka-preloader .pre__logo { width: min(600px, 74vw); height: auto; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: 0; animation: preWipe 1.05s 0.2s var(--ease) forwards; } .pre__line { display: none; } /* bỏ gạch chân đen dưới logo loading (theo feedback) */ @keyframes preWipe { 0% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: 0.25; } 100% { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes preFailsafe { to { transform: translateY(-101%); visibility: hidden; } } /* Lần sau trong phiên: vẫn HIỆN logo nhưng nhanh (wipe gọn, bỏ kẻ chỉ) */ .seen #taka-preloader .pre__logo { animation-duration: 0.5s; animation-delay: 0s; } .seen .pre__line { display: none; } @media (prefers-reduced-motion: reduce) { #taka-preloader { display: none; } } /* hero video nền (sẵn sàng — đổ ảnh fallback khi chưa có video) */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ============ FAB liên hệ nhanh (Zalo · Hotline · Đặt lịch) ============ */ .taka-fab { position: fixed; right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px); z-index: 900; display: flex; flex-direction: column; gap: 12px; } .taka-fab__item { position: relative; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: rgba(255,255,255,0.94); color: var(--ink); box-shadow: 0 12px 30px -12px rgba(0,0,0,0.45); transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); } .taka-fab__item:hover { transform: translateY(-2px); background: var(--ink); border-color: var(--ink); } .taka-fab__item .ico { width: 23px; height: 23px; color: var(--ink-soft); transition: color 0.3s var(--ease); } .taka-fab__item:hover .ico { color: #fff; } .taka-fab__item::after { content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(8px); background: var(--ink); color: #fff; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .taka-fab__item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } @media (max-width: 600px) { .taka-fab__item { width: 46px; height: 46px; } .taka-fab__item .ico { width: 20px; height: 20px; } .taka-fab__item::after { display: none; } } @media print { .taka-fab { display: none; } } /* ============ CAROUSEL DỰ ÁN (Home) — chạy vô tận, click trái/phải, title + mô tả ============ */ .proj-carousel { position: relative; margin-top: var(--sp-5); } .proj-carousel__viewport { overflow: hidden; } .proj-carousel__track { display: flex; align-items: center; transition: transform 0.75s var(--ease-soft); will-change: transform; } /* Nút trái/phải nổi 2 bên carousel */ .caro-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.94); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.45); transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .caro-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .caro-btn--prev { left: clamp(8px, 3vw, 40px); } .caro-btn--next { right: clamp(8px, 3vw, 40px); } .caro-btn:disabled { opacity: 0; pointer-events: none; } .caro-btn .ico { width: 20px; height: 20px; } /* Slide: giữa rõ – 2 bên nhỏ, mờ (blur), ló một phần */ .proj-slide { position: relative; flex: 0 0 clamp(280px, 60%, 940px); margin: 0 clamp(4px, 0.7vw, 12px); aspect-ratio: 16 / 10; overflow: hidden; display: block; text-decoration: none; color: #fff; background: var(--bg-soft); opacity: 0.4; filter: blur(2px); transform: scale(0.9); transition: opacity 0.65s var(--ease-soft), filter 0.65s var(--ease-soft), transform 0.65s var(--ease-soft); } .proj-slide.is-active { opacity: 1; filter: none; transform: scale(1); } .proj-slide__media { position: absolute; inset: 0; display: block; overflow: hidden; } .proj-slide__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease); } .proj-slide.is-active:hover .proj-slide__media img { transform: scale(1.05); } /* Caption overlay TRÊN thumb — chỉ hiện ở slide giữa */ .proj-slide__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px,2.4vw,38px); background: linear-gradient(to top, rgba(12,12,12,0.82) 0%, rgba(12,12,12,0.34) 52%, rgba(12,12,12,0) 100%); opacity: 0; transition: opacity 0.5s var(--ease-soft); } .proj-slide.is-active .proj-slide__cap { opacity: 1; } .proj-slide__loc { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.82); } .proj-slide__title { display: block; font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.14; color: #fff; } .proj-slide__desc { display: block; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; font-family: var(--sans); font-size: var(--fs-small); line-height: 1.6; color: rgba(255,255,255,0.88); transition: max-height 0.55s var(--ease), opacity 0.4s var(--ease), margin-top 0.4s var(--ease); } .proj-slide.is-active:hover .proj-slide__desc { max-height: 7em; opacity: 1; margin-top: 12px; } /* Dots trang */ .proj-carousel__dots { display: flex; justify-content: center; gap: 11px; margin-top: clamp(22px, 2.6vw, 36px); } .proj-carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .proj-carousel__dot.is-on { background: var(--ink); transform: scale(1.4); } @media (max-width: 640px) { .proj-slide { flex-basis: 82%; margin: 0 8px; } .caro-btn { width: 40px; height: 40px; } } /* ============ TRANG PHONG CÁCH (5 phong cách Nhật) ============ */ .styles-hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(48px,7vw,104px) var(--gutter) clamp(28px,4vw,52px); text-align: center; } .styles-hero .page-hero__inner { max-width: 780px; margin: 0 auto; } .styles-hero .page-hero__title { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h1); line-height: 1.1; margin: 14px 0 0; } .styles-hero__lead { margin: 22px auto 0; max-width: 62ch; font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-soft); } .styles-nav { position: sticky; top: 61px; z-index: 20; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px,3.5vw,54px); padding: 15px var(--gutter); background: rgba(250,249,246,0.92); -webkit-backdrop-filter: saturate(150%) blur(8px); backdrop-filter: saturate(150%) blur(8px); border-block: 1px solid var(--line); } .styles-nav a { display: inline-flex; align-items: baseline; gap: 7px; color: var(--mut); text-decoration: none; transition: color 0.25s var(--ease); } .styles-nav a:hover { color: var(--ink); } .styles-nav__kanji { font-family: var(--serif); font-size: 21px; line-height: 1; } .styles-nav__name { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.35; letter-spacing: 0.01em; color: var(--ink); } .style-tagline { display: block; margin: 16px 0 18px; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mut); } .style-palette { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } .style-palette li { font-family: var(--sans); font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--mut); border: 1px solid var(--line); padding: 6px 13px; } /* Chi tiết phong cách (layout dự án) — kanji trong tiêu đề aside + "phong cách khác" */ .styles-detail .proj-aside h1 { display: flex; align-items: baseline; gap: 12px; } .styles-detail .style-tagline { margin: 4px 0 20px; } .styles-detail .style-palette { margin-top: 22px; } .styles-more { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px,4vw,54px) var(--gutter) clamp(40px,5vw,72px); border-top: 1px solid var(--line); text-align: center; } .styles-more__label { display: block; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--mut); margin-bottom: 22px; } .styles-more__list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px,4vw,56px); } .styles-more__list a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--mut); text-decoration: none; transition: color 0.25s var(--ease); } .styles-more__list a:hover { color: var(--ink); } @media (max-width: 860px) { .styles-nav { top: 55px; } } /* ---------------------------------------------------------------- GLOBAL SEARCH (B2B) */ /* ---- HỆ ICON: line 1px, cùng size 18px (nét luôn 1px nhờ non-scaling-stroke) ---- */ .ico { display: inline-block; width: 18px; height: 18px; vertical-align: middle; flex: 0 0 auto; } .ico line, .ico circle, .ico polyline, .ico polygon, .ico path, .ico rect { vector-effect: non-scaling-stroke; } .nav-search { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 0; line-height: 0; cursor: pointer; color: var(--ink); -webkit-appearance: none; appearance: none; transition: background 0.25s, color 0.25s, border-color 0.25s; } /* :focus (sau click chuột) phải SẠCH — nếu không GP `button:focus` (nền tối) kẹt lại sau khi đóng menu */ .nav-search:focus, .nav-toggle:focus { background: transparent; color: var(--ink); border-color: transparent; outline: none; } /* hover/active + hamburger đang mở: fill ink, chữ trắng — đồng bộ nút Đặt lịch (.reservation); đặt SAU :focus để thắng khi vừa hover vừa focus */ .nav-search:hover, .nav-search:active, .nav-toggle:hover, .nav-toggle:active, .nav-toggle.is-open { background: var(--ink); color: #fff; border-color: var(--ink); outline: none; } .nav-search:focus-visible, .nav-toggle:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; } /* Hamburger 3 vạch -> morph chữ X khi .is-open (currentColor: theo màu chữ nút → trắng khi nền ink) */ .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { width: 18px; height: 1px; background: currentColor; } .nav-toggle__bar { position: relative; display: block; transition: background 0.15s var(--ease); } .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; transition: transform 0.3s var(--ease), top 0.3s var(--ease); } .nav-toggle__bar::before { top: -6px; } .nav-toggle__bar::after { top: 6px; } .nav-toggle.is-open .nav-toggle__bar { background: transparent; } .nav-toggle.is-open .nav-toggle__bar::before { top: 0; transform: rotate(45deg); } .nav-toggle.is-open .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); } .search-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,0.08); } .search-panel__inner { position: relative; max-width: var(--maxw); margin-inline: auto; padding: var(--sp-5) var(--gutter); } /* `.search-panel .search-input` (0,2,0) thắng GP `input[type=search]` (0,1,1) → nền trong suốt thật, không còn ô xám */ .search-panel .search-input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; -webkit-appearance: none; appearance: none; font-family: var(--serif); font-size: clamp(17px,1.8vw,22px); font-weight: 300; padding: 6px 40px 12px 0; color: var(--ink); box-shadow: none; } /* GP `input[type=search]:focus` cũng đổ nền → ép trong suốt ở MỌI state, kể cả focus/hover/autofill */ .search-panel .search-input:focus, .search-panel .search-input:hover { background: transparent; box-shadow: none; outline: none; } .search-panel .search-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; -webkit-text-fill-color: var(--ink); } /* ẩn nút X mặc định của input[type=search] (chỉ dùng nút × custom) */ .search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .search-close { position: absolute; right: var(--gutter); top: var(--sp-5); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 0; line-height: 0; cursor: pointer; color: var(--mut); -webkit-appearance: none; appearance: none; transition: color 0.2s; } /* nút × chỉ đổi màu khi hover/focus — KHÔNG đổ nền tối của GP */ .search-close:hover, .search-close:focus, .search-close:active { background: transparent; color: var(--ink); outline: none; } /* ---- Chặn nền hover/focus mặc định của GeneratePress cho các nút custom còn lại (cùng gốc bệnh) ---- */ .filter-toggle:hover, .filter-toggle:focus { background: var(--ink); color: #fff; border-color: var(--ink); outline: none; } /* fill ink như Đặt lịch */ .hs-dot:hover, .hs-dot:focus, .hs-dot:active { background: none; outline: none; } /* chấm hotspot giữ trong suốt */ .pg-thumb:hover, .pg-thumb:focus { background: var(--bg-soft); border-color: var(--line); outline: none; } /* thumbnail giữ nền be, không đen */ .dl-btn:focus, .dl-btn--on:focus { outline: none; } .search-sugg { margin-top: var(--sp-4); display: grid; gap: 2px; } .search-item { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); } .search-item:hover { background: var(--bg-soft); } .search-item__img { flex: 0 0 46px; width: 46px; height: 56px; background: var(--bg-soft) center/cover no-repeat; } .search-item__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; } .search-item__sku { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--mut); } .search-item__name { font-family: var(--serif); font-size: var(--fs-lead); color: var(--ink); } .search-item__type { font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); } .search-empty { color: var(--mut); padding: 14px 0; } /* ---------------------------------------------------------------- TOUR 360 (Kuula/Matterport embed) */ .tour360 { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--bg-soft); overflow: hidden; border: 1px solid var(--line); } .tour360 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 600px) { .tour360 { aspect-ratio: 4/3; } } /* Shop the Look — ảnh không gian gắn hotspot (thay cho hero) */ .shop-img { position: relative; overflow: hidden; background: var(--bg-soft); } .shop-img > img { display: block; width: 100%; height: auto; } /* ===== PHONG CÁCH — explorer 2 cột (trái: list, phải: ảnh + hotspot đổi theo phong cách) ===== */ .stex { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; } .stex__nav { display: flex; flex-direction: column; } /* mỗi mục flex:1 chia đều chiều cao ảnh, có đường kẻ giữa */ .stex__item { position: relative; flex: 1 1 0; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); width: 100%; padding: clamp(12px, 1.4vw, 18px) 4px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--mut); transition: color 0.35s var(--ease), padding-left 0.35s var(--ease); } .stex__item:last-child { border-bottom: 0; } /* mục cuối (RIN) không có đường dưới */ /* Thanh dọc bên trái: hiện khi hover/active (vươn từ giữa ra) */ .stex__item::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: var(--ink); transform: translateY(-50%); transition: height 0.4s var(--ease); } .stex__item:hover::before, .stex__item.is-on::before { height: 42%; } /* KHỬ nền tối của GP (button màu Customizer áp cho hover/focus/active) — ép trong suốt mọi state */ .stex__item, .stex__item:hover, .stex__item:focus, .stex__item:active, .stex__item.is-on { background: transparent !important; box-shadow: none !important; } .stex__item:hover, .stex__item.is-on { color: var(--ink); padding-left: 16px; } /* chỉ đổi màu chữ + thụt vào */ .stex__item:focus, .stex__item:active { outline: none; } .stex__item:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; } /* giữ focus bàn phím */ .stex__no { flex: 0 0 auto; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--mut); font-variant-numeric: tabular-nums; transition: color 0.35s var(--ease); } .stex__item:hover .stex__no, .stex__item.is-on .stex__no { color: var(--ink); } .stex__label { flex: 1 1 auto; display: flex; align-items: baseline; gap: 12px; min-width: 0; } .stex__name { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.35; letter-spacing: 0.06em; color: currentColor; } .stex__kanji { font-family: var(--serif); font-weight: 300; font-size: 15px; color: var(--mut); } .stex__tag { flex: 0 0 auto; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); white-space: nowrap; } .stex__arrow { display: none; } /* dùng thanh dọc bên trái thay cho mũi tên */ /* Sân khấu bên phải */ .stex__stage { position: relative; background: var(--bg-soft); overflow: hidden; aspect-ratio: 16 / 9; } /* ảnh ngang 16:9 (thấp, rộng) — làm mốc chiều cao, list canh đều theo */ .stex__panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.7s var(--ease-soft); } .stex__panel.is-on { opacity: 1; visibility: visible; } .stex__panel .shop-img { position: absolute; inset: 0; height: 100%; } .stex__panel .shop-img > img { width: 100%; height: 100%; object-fit: cover; } .stex__cap { position: absolute; left: clamp(16px, 2vw, 30px); bottom: clamp(16px, 2vw, 30px); z-index: 3; display: flex; flex-direction: column; gap: 3px; color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,0.45); pointer-events: none; } .stex__cap-name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.05; } .stex__cap-tag { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.92; } @media (max-width: 1024px) { /* stack sớm: dưới 1024 cột trái 2-cột quá hẹp cho tên+kanji+tag → xuống 1 cột, ảnh lớn hơn */ .stex { grid-template-columns: 1fr; gap: 22px; } .stex__stage { order: -1; aspect-ratio: 16 / 10; min-height: 0; } /* tablet 1 cột → 16:10 để ảnh không quá cao */ .stex__tag { display: none; } .stex__item { padding: clamp(16px, 4.4vw, 22px) 4px; } /* dòng cao thoáng hơn khi stack */ .stex__name { font-size: clamp(17px, 2.1vw, 20px); } /* nhỉnh hơn desktop 1 chút, không nhảy cỡ mạnh */ .stex__kanji { font-size: 16px; } } @media (max-width: 560px) { /* điện thoại: ảnh cao hơn (4:3) cho màn hẹp */ .stex__stage { aspect-ratio: 4 / 3; } } /* Bổ sung trang dự án: 360°, SP dùng trong dự án, CTA cuối */ .proj-360 .tour360 { max-width: 100%; } .proj-used { padding-bottom: var(--sp-7); } .proj-cta { text-align: center; max-width: var(--maxw); margin-inline: auto; padding: var(--sp-9) var(--gutter); border-top: 1px solid var(--line); } .proj-cta .label-en { display: block; margin-bottom: 14px; } .proj-cta h2 { font-size: var(--fs-h2); margin: 0 0 14px; } .proj-cta p { color: var(--ink-soft); max-width: 50ch; margin: 0 auto 28px; } .proj-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Trang Cảm ơn */ .thankyou { min-height: 58vh; display: flex; align-items: center; } .thankyou__inner { max-width: 640px; margin: var(--sp-10) auto; padding: 0 var(--gutter); text-align: center; } .thankyou__inner .label-en { display: block; margin-bottom: 18px; } .thankyou__inner h1 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-hero); margin-bottom: var(--sp-5); } .thankyou__inner p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.8; margin: 0 auto var(--sp-4); max-width: 52ch; } .thankyou__note { color: var(--mut); font-size: var(--fs-body); } .thankyou__cta { margin-top: var(--sp-6); display: flex; gap: 26px; align-items: center; justify-content: center; flex-wrap: wrap; } /* Bộ lọc loại dự án (archive) */ .proj-filter { max-width: var(--maxw); margin: var(--sp-8) auto var(--sp-5); padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; } /* lưới ngay sau filter → bỏ padding-top thừa (tránh khoảng trống lớn) */ .proj-filter + .archive-wrap { padding-top: 0; } .proj-filter a { font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); padding-bottom: 4px; border-bottom: 1px solid transparent; } .proj-filter a:hover { color: var(--ink); } .proj-filter a.is-on { color: var(--ink); border-bottom-color: var(--ink); } /* Drawer "Bộ lọc" — chỉ mobile */ .filter-toggle { display: none; } @media (max-width: 900px) { .filter-toggle { display: inline-flex; align-items: center; gap: 10px; align-self: start; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; padding: 13px 20px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; margin-bottom: var(--sp-4); } .filter-toggle span { display: inline-flex; line-height: 0; transition: transform 0.25s var(--ease); } .filter-toggle[aria-expanded="true"] span { transform: rotate(45deg); } .catalog__filter { display: none; } .catalog__filter.is-open { display: block; margin-bottom: var(--sp-6); } } /* Timeline lịch sử (About) */ .timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); position: relative; } .timeline::before { content: ""; position: absolute; top: 6px; left: 7px; right: 7px; height: 1px; background: var(--line); } .tl-item { position: relative; padding-top: 30px; } .tl-item::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink); transition: background var(--dur) var(--ease); } .tl-item:hover::before { background: var(--ink); } .tl-year { display: block; font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1; color: var(--ink); } .tl-title { display: block; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); margin: 10px 0 12px; } .tl-text { display: block; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.7; } /* ===== Heritage timeline (Di sản — nhấn mạnh) ===== */ .heritage-band { background: var(--bg-soft); border-block: 1px solid var(--line); } .heritage { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-8) var(--gutter) var(--sp-9); } /* Timeline: tiêu đề "Di sản" dính bên trái, danh sách mốc cuộn qua */ .heritage--split { display: grid; grid-template-columns: minmax(190px, 260px) 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .heritage--split .heritage__head { position: sticky; top: 100px; align-self: start; margin: 0; padding: 0; border-bottom: 0; } .heritage--split .htl { margin-left: 0; } @media (max-width: 880px) { .heritage--split { grid-template-columns: 1fr; gap: var(--sp-5); } .heritage--split .heritage__head { position: static; } } .htl { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; position: relative; } .htl::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 150px; width: 1px; background: var(--line); } .htl__item { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: clamp(34px, 5vw, 70px); padding-bottom: clamp(36px, 5vw, 64px); } .htl__item:last-child { padding-bottom: 0; } .htl__item::before { content: ""; position: absolute; left: 150px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); transform: translateX(-7px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .htl__item:hover::before { transform: translateX(-7px) scale(1.25); box-shadow: 0 0 0 1px var(--ink); } .htl__year { font-family: var(--serif); font-weight: 300; font-size: var(--fs-numeral); line-height: 1; color: var(--ink); letter-spacing: 0.01em; } .htl__body { padding-top: 4px; } .htl__label { display: block; font-family: var(--sans); font-weight: 400; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); margin-bottom: 12px; } .htl__text { margin: 0; color: var(--ink-soft); line-height: 1.85; font-size: var(--fs-body); max-width: 56ch; } @media (max-width: 720px) { .htl::before { left: 5px; } .htl__item { grid-template-columns: 1fr; gap: 10px; padding-left: 32px; padding-bottom: var(--sp-6); } .htl__item::before { left: 5px; top: 8px; } .htl__year { font-size: clamp(28px, 9vw, 40px); } } /* ===== Hồ sơ năng lực ===== */ .about-profile { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-8) var(--gutter); } .profile-lead { max-width: 70ch; } .profile-lead p { font-size: var(--fs-body); line-height: 1.85; color: var(--ink-soft); margin: 0; } .profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(36px, 5vw, 64px); } .pstat { border-top: 1px solid var(--line); padding-top: 18px; } .pstat__n { display: block; font-family: var(--serif); font-weight: 300; font-size: var(--fs-numeral); line-height: 1; color: var(--ink); } .pstat__l { display: block; margin-top: 12px; font-size: var(--fs-small); line-height: 1.6; color: var(--mut); } @media (max-width: 720px) { .profile-stats { grid-template-columns: 1fr 1fr; gap: 24px; } } /* ===== Tầm nhìn & Sứ mệnh ===== */ .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); } .vm-block { border-top: 0; padding-top: 0; } .vm__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); margin-bottom: 18px; } .vm__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .vm-block:hover .vm__media img { transform: scale(1.04); } .vm__k { display: block; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.35; letter-spacing: 0.01em; text-transform: none; color: var(--ink); margin-bottom: 6px; } .vm-block p { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--ink-soft); } @media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; gap: 32px; } } /* ===== Đội ngũ chủ chốt ===== */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 36px); } .team-card { display: flex; flex-direction: column; } .team-card__photo { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; } .team-card__photo--empty { display: flex; align-items: center; justify-content: center; } .team-card__ini { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5vw, 72px); color: var(--mut); line-height: 1; } .team-card__name { display: block; margin-top: 18px; font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.35; letter-spacing: 0.01em; color: var(--ink); } .team-card__role { display: block; margin-top: 6px; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .team-note { margin-top: clamp(24px, 3vw, 36px); font-size: var(--fs-small); color: var(--mut); } @media (max-width: 760px) { .team-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .timeline { grid-template-columns: 1fr; gap: var(--sp-5); } .timeline::before { top: 6px; bottom: 6px; left: 6px; right: auto; width: 1px; height: auto; } .tl-item { padding-top: 0; padding-left: 30px; } .tl-item::before { top: 5px; } }