/* ========================================================================== TAKA INTERIOR — layout (editorial luxury) Cormorant serif + Inter · 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; } .site-header__logo img { height: 22px; width: auto; max-width: none; flex-shrink: 0; } /* (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: 34px; } .site-nav a { position: relative; padding-bottom: 5px; font-family: var(--sans); font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; 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-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); } .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: 400; 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: 400; 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.55; color: rgba(255,255,255,0.82); 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: 22px; } .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(--serif); font-weight: 400; font-size: var(--fs-h3); margin: 10px 0 10px; } .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-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); align-items: center; } .partner-logo { 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 { border: 1px dashed var(--line); color: var(--mut); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; } .partners__note { margin-top: 18px; font-size: var(--fs-small); color: var(--mut); } @media (max-width: 760px) { .partner-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } } /* 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: 400; 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: 400; 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: 400; 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: 400; 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: 400; font-size: var(--fs-numeral); line-height: 1; color: var(--line); } .svc-row__title { font-family: var(--serif); font-weight: 400; 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: 400; 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; } .proj-ba__note { text-align: center; font-size: var(--fs-small); color: var(--mut); margin-top: 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: 400; 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__meta { margin-top: 28px; display: flex; align-items: center; gap: 22px; font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.9); } .hero__meta .divider { width: 40px; height: 1px; background: rgba(255,255,255,0.55); } .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: 400; 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: 400; 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: 400; 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(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; 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: 14px; 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-4 { grid-template-columns: repeat(4, 1fr); } .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: 400; 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: 400; 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: 400; 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: 400; 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: 400; 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; } .proj-body { max-width: var(--maxw); margin: var(--sp-8) auto; padding-inline: var(--gutter); color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.85; } .proj-body > * { max-width: 62ch; } .proj-body p { margin: 0; } .proj-body p + p { margin-top: 1.3em; } .proj-body h2, .proj-body h3 { color: var(--ink); margin: var(--sp-7) 0 var(--sp-3); } .proj-gallery { max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) var(--sp-9); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .proj-gallery img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--bg-soft); } .proj-gallery .wide { grid-column: 1 / -1; aspect-ratio: 16/9; } /* ====== 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 1fr; gap: clamp(32px,5vw,84px); align-items: start; } .proj-aside { position: sticky; top: 104px; } .proj-aside h1 { font-family: var(--serif); font-weight: 400; 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; } .proj-stream { display: flex; flex-direction: column; gap: clamp(16px,2vw,30px); } .proj-stream img { width: 100%; display: block; } @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: 400; font-size: var(--fs-h2); line-height: 1.45; color: var(--ink); } .full-img { width: 100%; height: 74vh; min-height: 420px; } .full-img img { width: 100%; height: 100%; object-fit: cover; } .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: 400; 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(--serif); font-weight: 400; font-size: var(--fs-h3); } .materials p { color: var(--ink-soft); font-size: var(--fs-small); margin-top: 12px; 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: 400; 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 */ .grid-4 { grid-template-columns: 1fr 1fr; } /* duyệt theo phòng: 2 cột tablet (không 4 cột chật) */ .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: flex-start; gap: var(--sp-4); position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--sp-5) var(--gutter); } .site-nav .nav-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .nav-sub { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 6px 0 2px 14px; } .nav-sub::before { display: none; } .nav-sub__link { padding: 5px 0 !important; } .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; } .grid-4, .gallery-3, .proj-gallery { 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) */ .grid-4, .gallery-3, .proj-gallery { 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: 22px; } .specs .item h4 { font-family: var(--serif); font-weight: 400; 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: 400; 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, .proj-gallery, .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); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); font-weight: 600; 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; min-width: 40px; height: 40px; padding: 0 10px; font-size: var(--fs-small); letter-spacing: 0.04em; 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); } .mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .mat-card { display: block; } .mat-card__img { display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-soft); } .mat-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .mat-card:hover .mat-card__img img { transform: scale(1.05); } .mat-card__meta { display: block; padding-top: 14px; } .mat-card__sku { display: block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: var(--fs-caption); letter-spacing: 0.08em; color: var(--mut); } .mat-card__name { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--fs-title); line-height: 1.2; margin-top: 4px; } .mat-card__tag { display: inline-block; margin-top: 10px; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); padding: 3px 10px; } /* 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) { .mat-grid { grid-template-columns: 1fr 1fr; } } /* ---------------------------------------------------------------- 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; } .prod-card__img { position: relative; display: block; aspect-ratio: 4/5; 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: 16px; } .prod-card__name { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--fs-title); line-height: 1.15; } .prod-card__room { display: block; margin-top: 7px; 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: 4/5; } .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: 72px; height: 90px; 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; } } @media (max-width: 600px) { .prod-grid { grid-template-columns: 1fr 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); 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: 400; 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: space-between; } .jrnl-mini { display: grid; grid-template-columns: 124px 1fr; gap: 18px; align-items: center; 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: 9px; } .jrnl-mini__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-title); line-height: 1.2; 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: 9px; padding-top: 16px; } .jrnl-card__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.18; color: var(--ink); } .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; } } .quote-band { background: var(--bg-soft); border-block: 1px solid var(--line); } .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(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); } .reveal.is-in { opacity: 1; transform: none; } .reveal--head { transform: translateY(34px); } /* tiêu đề mục trồi lên rõ hơn */ .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 1s var(--ease), -webkit-clip-path 1s var(--ease); } .reveal-mask.is-in > img { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal--head, .reveal-mask > img { opacity: 1 !important; transform: none !important; -webkit-clip-path: none !important; clip-path: none !important; transition: none !important; } } /* ===== CON TRỎ TÙY BIẾN (vòng tròn) — chỉ bật khi JS thêm .has-cursor (chuột, không reduced-motion) ===== */ html.has-cursor, html.has-cursor * { cursor: none; } /* khôi phục cursor gốc ở vùng cần (specificity > 'html.has-cursor *') */ html.has-cursor input, html.has-cursor textarea, html.has-cursor select, html.has-cursor [contenteditable] { cursor: auto; } 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; } .taka-cursor { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 9999; opacity: 0; mix-blend-mode: difference; transition: opacity 0.25s var(--ease); will-change: transform; } .taka-cursor.is-on { opacity: 1; } .taka-cursor.is-hidden { opacity: 0 !important; } .taka-cursor__ring { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 1px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.32s var(--ease), height 0.32s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); } .taka-cursor__label { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity 0.2s var(--ease); } /* link/nút không phải card → vòng to hơn để phản hồi */ .taka-cursor.is-link .taka-cursor__ring { width: 28px; height: 28px; } .taka-cursor.is-card { mix-blend-mode: normal; } .taka-cursor.is-card .taka-cursor__ring { width: 100px; height: 100px; background: var(--ink); border-color: var(--ink); } .taka-cursor.is-card .taka-cursor__label { opacity: 1; } @media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { html.has-cursor, html.has-cursor * { cursor: auto; } .taka-cursor { display: none !important; } } /* ===== PARALLAX cuộn — CSS scroll-driven (chạy GPU, KHÔNG cần JS lắng nghe scroll). Trình duyệt cũ tự bỏ qua. ===== */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Media phóng cao 136% + lệch để dịch ±14% mà không hở viền — áp cho CẢ video hero. Scope theo cha (0,2,0) để THẮNG rule gốc .hero__video/.page-hero__video dù đứng sau trong file. */ .page-hero .page-hero__bg, .page-hero .page-hero__video, .hero .hero__media, .hero .hero__video, .section-dark .dark-cell__bg { top: -18% !important; bottom: auto !important; height: 136% !important; } .split__media { overflow: hidden; } .split__media img { position: relative; top: -18%; height: 136%; } /* HERO ở đỉnh trang → tie vào scroll gốc, range 1 màn hình đầu (parallax rõ ngay khi bắt đầu cuộn) */ .hero .hero__media, .hero .hero__video { animation: pxYZoom linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; } .page-hero .page-hero__bg, .page-hero .page-hero__video { animation: pxY linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; } .proj-hero img { animation: pxYZoom linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; } /* ảnh trong nội dung → tie vào lúc đi qua viewport */ .split__media img { animation: pxY linear both; animation-timeline: view(); } .section-dark .dark-cell__bg { animation: pxYDim linear both; animation-timeline: view(); } @keyframes pxY { from { transform: translateY(-14%); } to { transform: translateY(14%); } } @keyframes pxYZoom { from { transform: translateY(-12%) scale(1.08); } to { transform: translateY(12%) scale(1.08); } } @keyframes pxYDim { from { transform: translateY(-11%) scale(1.04); } to { transform: translateY(11%) scale(1.04); } } } } /* counting numbers */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); text-align: center; border-block: 1px solid var(--line); } .stat__num { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--fs-stat); line-height: 1; color: var(--ink); } .stat__num .suf { font-size: 0.5em; vertical-align: super; } .stat__label { display: block; margin-top: 12px; font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); } @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 { height: 34px; width: 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 { width: 0; height: 1px; background: var(--ink); animation: preLine 1.25s 0.15s var(--ease) forwards; } @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 preLine { to { width: 170px; } } @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; } /* ---------------------------------------------------------------- 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: 400; 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; } /* Bổ sung trang dự án: 360°, SP dùng trong dự án, CTA cuối */ .proj-360 .tour360 { max-width: 100%; } .proj-360__note { text-align: center; font-size: var(--fs-small); color: var(--mut); margin-top: 14px; } .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: 400; 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: 400; 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: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink); transform: translateX(-5px); transition: background var(--dur) var(--ease); } .htl__item:hover::before { background: var(--ink); } .htl__year { font-family: var(--serif); font-weight: 400; 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: 400; 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: 22px; } .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-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mut); margin-bottom: 16px; } .vm-block p { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.55; color: var(--ink); } @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 { display: block; aspect-ratio: 3 / 4; background: var(--bg-soft); border: 1px solid var(--line); } .team-card__name { display: block; margin-top: 16px; font-family: var(--serif); font-weight: 400; font-size: var(--fs-title); color: var(--mut); } .team-card__role { display: block; margin-top: 4px; 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; } }