/* Giỏ hàng Penta (js/penta-cart.js). Dùng biến màu/font của main.css. Khung trung tính, chờ Dex chốt bố cục trang mua. */
.pc-buy { font-family: var(--font-body, system-ui, sans-serif); color: var(--ink, #1A1A1A); max-width: 520px; }
.pc-buy.pc-dang-tai { min-height: 160px; background: linear-gradient(90deg, var(--paper-cool, #F2F0EB), var(--paper, #FAF8F4), var(--paper-cool, #F2F0EB)); background-size: 200% 100%; animation: pc-nhay 1.4s linear infinite; }
@keyframes pc-nhay { to { background-position: -200% 0; } }
.pc-opt { border: 0; margin: 0 0 18px; padding: 0; }
.pc-opt legend { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft, #2C2A26); margin-bottom: 8px; padding: 0; }
.pc-o-ds { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-o-ds button { font: inherit; font-size: 14px; padding: 10px 16px; min-height: 44px; background: transparent; color: inherit; border: 1px solid var(--rule, #E8E4DC); cursor: pointer; }
.pc-o-ds button:hover { border-color: var(--ink, #1A1A1A); }
.pc-o-ds button.on { border-color: var(--ink, #1A1A1A); box-shadow: inset 0 0 0 1px var(--ink, #1A1A1A); }
.pc-o-ds button.het { color: #9a958c; text-decoration: line-through; }
.pc-mua { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.pc-gia { font-family: var(--font-heading, serif); font-size: 26px; min-width: 120px; }
.pc-them, .pc-tt { font: inherit; font-size: 14px; letter-spacing: .04em; padding: 0 28px; height: 48px; background: var(--ink, #1A1A1A); color: var(--paper, #FAF8F4); border: 0; cursor: pointer; flex: 1; }
.pc-them:disabled, .pc-tt:disabled { background: #b9b4aa; cursor: not-allowed; }
.pc-loi { color: #8a2c1c; font-size: 14px; }
.pc-loi a { color: inherit; }

/* ngăn giỏ */
.pc-khoa, .pc-khoa body { overflow: hidden; }
.pc-gio { position: fixed; inset: 0; z-index: 1000; pointer-events: none; font-family: var(--font-body, system-ui, sans-serif); color: var(--ink, #1A1A1A); }
.pc-man { position: absolute; inset: 0; background: rgba(26,26,26,.35); opacity: 0; transition: opacity .3s; }
.pc-ngan { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--paper, #FAF8F4); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s ease; }
.pc-gio.mo { pointer-events: auto; }
.pc-gio.mo .pc-man { opacity: 1; }
.pc-gio.mo .pc-ngan { transform: none; }
.pc-ngan header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--rule, #E8E4DC); }
.pc-ngan h2 { font-family: var(--font-heading, serif); font-weight: 400; font-size: 24px; margin: 0; }
.pc-x { font-size: 28px; line-height: 1; background: none; border: 0; cursor: pointer; color: inherit; width: 44px; height: 44px; }
.pc-ds { list-style: none; margin: 0; padding: 0 24px; overflow-y: auto; flex: 1; }
.pc-ds > li { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule, #E8E4DC); align-items: start; }
.pc-ds > li > img { width: 72px; height: 72px; object-fit: cover; background: var(--paper-cool, #F2F0EB); }
.pc-ds p { margin: 0; }
.pc-ten { font-family: var(--font-heading, serif); font-size: 18px; }
.pc-loai { font-size: 13px; color: var(--ink-soft, #2C2A26); margin-top: 2px !important; }
.pc-sl { display: inline-flex; align-items: center; border: 1px solid var(--rule, #E8E4DC); margin-top: 10px; }
.pc-sl button { width: 36px; height: 36px; background: none; border: 0; cursor: pointer; font-size: 16px; color: inherit; }
.pc-sl span { min-width: 24px; text-align: center; font-size: 14px; }
.pc-gia-dong { font-size: 14px; white-space: nowrap; }
.pc-trong { display: block !important; color: var(--ink-soft, #2C2A26); border: 0 !important; }
.pc-ngan footer { padding: 20px 24px 24px; border-top: 1px solid var(--rule, #E8E4DC); }
.pc-tong { display: flex; justify-content: space-between; font-size: 16px; margin: 0 0 14px; }
.pc-tt { width: 100%; }
.pc-ghi { font-size: 12px; color: var(--ink-soft, #2C2A26); margin: 10px 0 0; text-align: center; }

/* ngăn mua (nút Shop của một mùi) */
.pc-mua-than { padding: 24px; overflow-y: auto; flex: 1; }
.pc-gio--mua .pc-buy { max-width: none; }
@media (max-width: 640px) {
  .pc-gio--mua .pc-ngan { top: auto; left: 0; width: 100%; max-height: 92vh; transform: translateY(100%); }
  .pc-gio--mua.mo .pc-ngan { transform: none; }
}

/* nút trên trang Penta */
.nav-cart { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; letter-spacing: inherit; text-transform: inherit; }

/* nút Quan sát + Shop ngay dưới tên (thẻ Projects + trang Quan sát) — Dex 05/10 */
.perfume-feature__actions--top { justify-content: flex-start; gap: 28px; margin-top: 22px; }
@media (max-width: 768px) { .perfume-feature__actions--top { width: auto; justify-content: flex-start; gap: 24px; } }
.project-detail__buy { display: flex; gap: 28px; margin-top: 28px; }


/* biểu tượng giỏ trên menu (Dex 05/10: thay chữ Cart) */
.cart-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ink); text-decoration: none; }
.site-nav a.cart-icon { padding: 0; }
.cart-icon__svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.cart-icon__n { position: absolute; top: 0; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 9px; line-height: 15px; letter-spacing: 0; text-align: center; }
.cart-icon__n:empty { display: none; }
.menu-cart { display: none; margin-left: auto; }
@media (max-width: 767px) {
  .menu-cart { display: inline-flex; }
  .site-header-inner { gap: 12px; }
  .site-logo { flex-shrink: 0; }
  .site-logo img { height: 44px; }
  .menu-toggle { padding-left: 8px; padding-right: 0; }
}

/* điện thoại: 4 nút encounter · listen · trace · echoes trên 1 hàng (Dex 05/10) */
@media (max-width: 767px) {
  .project-detail__subnav-inner { flex-wrap: nowrap; gap: 6px; }
  .project-detail__subnav-item { flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 2px; font-size: 11px; letter-spacing: .04em; }
}
/* điện thoại: tên to (CARDAMOM, WATER JASMINE…) không tràn khỏi màn hình */
@media (max-width: 767px) { .project-detail__name { font-size: clamp(40px, 13vw, 72px); overflow-wrap: anywhere; } }

/* ngăn Thông tin chi tiết: trượt từ TRÁI (giống web Lê Mai mới), nội dung tab chi tiết Haravan */
.pc-gio--ct .pc-ngan { left: 0; right: auto; width: min(50vw, 760px); transform: translateX(-100%); }
.pc-gio--ct.mo .pc-ngan { transform: none; }
@media (max-width: 767px) { .pc-gio--ct .pc-ngan { width: 100%; } }
.pc-ct-than { padding: 28px 40px 64px; overflow-y: auto; flex: 1; font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--ink); }
.pc-ct-than.pc-dang-tai { min-height: 200px; }
@media (max-width: 767px) { .pc-ct-than { padding: 24px 24px 48px; } }
.pc-ct-than h2 { font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.25; letter-spacing: .01em; margin: 8px 0 16px; }
.pc-ct-than h3 { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-1, #6b5a43); margin: 0 0 12px; }
.pc-ct-than p { margin: 0 0 14px; }
.pc-ct-than ul, .pc-ct-than ol { margin: 0 0 14px; padding-left: 20px; }
.pc-ct-than li { margin-bottom: 6px; }
.pc-ct-than hr { border: 0; border-top: 1px solid var(--rule, #E8E4DC); margin: 26px 0; }
.pc-ct-than a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pc-ct-than strong { font-weight: 700; }
/* nút Thông tin chi tiết là <button> nhưng trông như nút chữ gạch chân của Penta */
button.perfume-feature__btn { background: none; border: 0; border-bottom: 1px solid; border-radius: 0; cursor: pointer; }
.project-detail__buy { flex-wrap: wrap; align-items: center; }

/* ===== trang /shop bản 2 (Dex 05/10): kiểu trang bán hàng, ít cuộn ===== */
body.shop { padding-bottom: 76px; }
body.shop .lang-switch { bottom: 92px; }

/* thanh tìm kiếm dính dưới đầu trang */
.shop-tim { position: sticky; top: var(--header-h, 80px); z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 10px 0; }

/* lưới ô sản phẩm: 2 cột điện thoại, 3 máy tính bảng, 4 máy tính */
.shop-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; padding-top: 28px; padding-bottom: 40px; }
@media (max-width: 1100px) { .shop-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .shop-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; padding-top: 16px; } }
.sp { display: flex; flex-direction: column; scroll-margin-top: calc(var(--header-h, 80px) + 80px); }
.sp[hidden] { display: none; }
.sp__mo { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.sp__anh { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--paper-cool, #F2F0EB); overflow: hidden; margin-bottom: 12px; }
.sp__anh img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sp__mo:hover .sp__anh img { transform: scale(1.03); }
.sp__het { position: absolute; top: 8px; left: 8px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; }
.sp--het .sp__anh img { opacity: .55; }
.sp__no { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--accent-1); margin-bottom: 4px; }
.sp__ten { font-family: var(--font-heading); font-size: 21px; line-height: 1.15; }
.sp__vi { font-family: var(--font-heading); font-style: italic; font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.sp__dong { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; min-height: 34px; }
.sp__gia { font-family: var(--font-body); font-size: 14px; font-weight: 700; }
.sp__gia:empty::before { content: ""; display: inline-block; width: 80px; height: 12px; background: var(--paper-cool, #F2F0EB); }
.sp__gia.het { font-weight: 400; color: var(--ink-soft); }
.sp__cong { flex: none; width: 34px; height: 34px; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; transition: background .2s, color .2s; }
.sp__mo:hover .sp__cong { background: var(--ink); color: var(--paper); }
.sp--het .sp__cong { border-color: var(--rule); color: var(--rule); }
.sp__links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; }
.sp__links a, .sp__links button { font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-1); background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: none; text-align: left; }
.sp__links a:hover, .sp__links button:hover { color: var(--ink); }
@media (max-width: 767px) { .sp__ten { font-size: 18px; } .sp__vi { font-size: 13px; } .sp__gia { font-size: 13px; } .sp__links a, .sp__links button { font-size: 10px; letter-spacing: .06em; } }
@keyframes sp-sang { 0% { box-shadow: 0 0 0 2px var(--ink); } 100% { box-shadow: 0 0 0 2px transparent; } }
.sp--chon .sp__anh { animation: sp-sang 1.6s ease 1; }
.shop-trong { padding-top: 24px; padding-bottom: 80px; color: var(--ink-soft); font-family: var(--font-body); }

/* dải tên mùi trượt ngang, dính đáy màn hình */
.dai { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--rule); box-shadow: 0 -6px 20px rgba(26,26,26,.05); padding-bottom: env(safe-area-inset-bottom); }
.dai__track { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.dai__track::-webkit-scrollbar { display: none; }
.dai__item { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--rule); font-family: var(--font-body); font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.dai__item[hidden] { display: none; }
.dai__so { font-family: var(--font-mono); font-size: 10px; color: var(--accent-1); }
.dai__item.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.dai__item.on .dai__so { color: var(--paper); opacity: .7; }
@media (min-width: 1100px) { .dai__track { justify-content: safe center; } }

/* thanh tìm kiếm bản 2 (Dex 05/10: hợp tone, sang hơn): không khung, một đường kẻ, chữ Garamond nghiêng */
.shop-tim { background: var(--paper); border-bottom: 0; padding: 6px 0 10px; }
.shop-tim__o { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 2px; border-bottom: 1px solid var(--ink); transition: border-color .3s; }
.shop-tim__o svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.1; }
.shop-tim__o input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--font-heading); font-size: 20px; color: var(--ink); letter-spacing: .01em; -webkit-appearance: none; appearance: none; }
.shop-tim__o input::placeholder { font-style: italic; color: var(--accent-1); opacity: .85; }
.shop-tim__o input::-webkit-search-cancel-button { -webkit-appearance: none; height: 14px; width: 14px; cursor: pointer; background: linear-gradient(45deg, transparent 46%, var(--ink) 46%, var(--ink) 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--ink) 46%, var(--ink) 54%, transparent 54%); }
@media (max-width: 767px) { .shop-tim__o input { font-size: 18px; } .shop-tim__o { height: 48px; } }

/* khung ngăn không hiện viền focus khi mở */
.pc-ngan:focus { outline: none; }
.pc-x:focus:not(:focus-visible) { outline: none; }

/* bộ ảnh trong ngăn mua: vuốt ngang */
.pc-anh-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.pc-anh-track::-webkit-scrollbar { display: none; }
.pc-anh-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; display: block; }
.pc-anh-nut { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: rgba(250,248,244,.85); color: var(--ink); font-family: var(--font-heading); font-size: 24px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .25s; }
.pc-anh-nut--l { left: 10px; } .pc-anh-nut--r { right: 10px; }
.pc-mua-anh:hover .pc-anh-nut { opacity: 1; }
@media (hover: none) { .pc-anh-nut { display: none; } }

/* tiếng Nhật trên trang /shop (Dex 05/10) */
.sp__jp { font-family: var(--font-jp); font-style: normal; font-size: 12px; letter-spacing: .04em; margin-left: 4px; }
/* trang /ja/: tiêu đề và tên đã là tiếng Nhật nên ẩn dòng phụ trùng */
html[lang="ja"] .shop-hero__jp, html[lang="ja"] .sp__jp { display: none; }
@media (max-width: 767px) { .sp__jp { display: block; margin: 2px 0 0; font-size: 11px; } }



/* Discovery Set: 5 ô chọn mùi (Dex 05/10) */
.pc-ds-o { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
.pc-ds-so { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-1); }
.pc-ds-ghi { font-family: var(--font-body); font-size: 13px; color: var(--accent-1); min-height: 20px; margin: 10px 0 0; }
.pc-con { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.pc-con li::before { content: "· "; }
.pc-con li { display: list-item; padding: 0; border: 0; }

/* Discovery Set bản 2 (Dex 05/10): ô chọn tự vẽ + bảng mùi trượt từ dưới lên */
.pc-o5 { width: 100%; display: grid; grid-template-columns: 64px 1fr 16px; align-items: center; gap: 12px; height: 50px; padding: 0 14px 0 0; background: none; border: 0; border-bottom: 1px solid var(--rule); cursor: pointer; text-align: left; color: var(--ink-soft); }
.pc-o5-ten { font-family: var(--font-heading); font-style: italic; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-o5.co .pc-o5-ten { font-style: normal; color: var(--ink); }
.pc-o5-ten small { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: .08em; color: var(--accent-1); margin-left: 6px; }
.pc-o5-mui { font-family: var(--font-heading); font-size: 22px; color: var(--ink); justify-self: end; }
.pc-o5:hover { color: var(--ink); }
.pc-ds-o { gap: 0; }
.pc-bang { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72%; display: flex; flex-direction: column; background: var(--paper); border-top: 1px solid var(--ink); box-shadow: 0 -18px 40px rgba(26,26,26,.14); transform: translateY(102%); transition: transform .35s cubic-bezier(.2,.7,.2,1); z-index: 5; }
.pc-bang.mo { transform: none; }
.pc-bang-dau { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-1); }
.pc-bang-ds { list-style: none; margin: 0; padding: 6px 0 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pc-bang-ds button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 24px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); }
.pc-bang-ds button:hover:not(:disabled) { background: var(--paper-cool, #F2F0EB); }
.pc-bang-ds button.on { background: var(--ink); color: var(--paper); }
.pc-bang-ds button.on .pc-bang-so { color: var(--paper); opacity: .7; }
.pc-bang-ds button:disabled { color: #b5b0a6; cursor: default; }
.pc-bang-ten { font-family: var(--font-heading); font-size: 19px; }
.pc-bang-so { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--accent-1); white-space: nowrap; }
.pc-bang-ds button:disabled .pc-bang-so { color: #b5b0a6; }

/* tiêu đề /shop to như trang Projects (Dex 05/10): dùng .projects-hero, chỉ thu khoảng trống dưới để ô tìm kiếm gần hơn */
.projects-hero.shop-hero { padding: 120px 0 56px; }
.projects-hero.shop-hero .shop-hero__jp { font-family: var(--font-jp); font-size: clamp(16px, 1.5vw, 20px); letter-spacing: .1em; color: var(--accent-1); margin: 0; }
@media (max-width: 768px) { .projects-hero.shop-hero { padding: 72px 0 36px; } }
html[lang="ja"] .projects-hero.shop-hero .shop-hero__jp { display: none; }
/* ô chưa có ảnh (mùi mới): chữ Nhật trên nền giấy, giống ô chờ ảnh trang Projects */
.sp__trong { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-jp); font-size: 22px; letter-spacing: .12em; color: var(--accent-1); background: var(--paper-cool, #F2F0EB); }

/* thanh 3 tab trang /shop (Dex 05/10): All · Perfume · Discovery & Gift */
.shop-tab { display: flex; gap: 28px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.shop-tab::-webkit-scrollbar { display: none; }
.shop-tab button { flex: none; background: none; border: 0; border-bottom: 1px solid transparent; padding: 8px 0; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-1); cursor: pointer; white-space: nowrap; }
.shop-tab button span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; margin-left: 4px; opacity: .7; }
.shop-tab button:hover { color: var(--ink); }
.shop-tab button.on { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 767px) { .shop-tab { gap: 20px; } .shop-tab button { font-size: 11px; letter-spacing: .1em; } }

/* ảnh trong ngăn mua bản 2 (Dex 05/10): ảnh lớn + hàng ảnh nhỏ, bấm ảnh lớn để xem toàn màn hình */
.pc-mua-anh { margin-bottom: 24px; }
.pc-anh-chinh { position: relative; aspect-ratio: 1 / 1; background: var(--paper-cool, #F2F0EB); }
.pc-anh-chinh img { cursor: zoom-in; }
@media (max-width: 640px) { .pc-anh-chinh { aspect-ratio: auto; height: min(42vh, 100vw); } }
.pc-anh-phong { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(250,248,244,.85); pointer-events: none; }
.pc-anh-phong svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.pc-anh-nho { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.pc-anh-nho::-webkit-scrollbar { display: none; }
.pc-anh-nho button { flex: 0 0 64px; height: 64px; padding: 0; border: 1px solid transparent; background: var(--paper-cool, #F2F0EB); cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; }
.pc-anh-nho button.on { opacity: 1; border-color: var(--ink); }
.pc-anh-nho button:hover { opacity: 1; }
.pc-anh-nho img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* xem ảnh toàn màn hình */
.pc-xem { position: fixed; inset: 0; z-index: 2000; background: rgba(13,13,13,.94); display: none; }
.pc-xem.mo { display: block; }
.pc-xem-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.pc-xem-track::-webkit-scrollbar { display: none; }
.pc-xem-o { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; padding: 56px 16px; box-sizing: border-box; }
.pc-xem-o img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pc-xem-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; background: none; border: 0; color: #FAF8F4; font-size: 32px; line-height: 1; cursor: pointer; }
.pc-xem-nut { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: none; border: 0; color: #FAF8F4; font-family: var(--font-heading); font-size: 40px; cursor: pointer; }
.pc-xem-nut--l { left: 8px; } .pc-xem-nut--r { right: 8px; }
@media (hover: none) { .pc-xem-nut { display: none; } }
.pc-xem-so { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(250,248,244,.7); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; margin: 0; }

/* nốt hương trong ngăn chọn set (Dex 05/10) */
.pc-not { margin-top: 28px; }
.pc-not h3 { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-1); margin: 0 0 4px; }
.pc-not-ul { list-style: none; margin: 0; padding: 0; }
.pc-not-ul li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.pc-not-ten { font-family: var(--font-heading); font-size: 19px; margin: 0; }
.pc-not-ten span { font-style: italic; font-size: 15px; color: var(--ink-soft); margin-left: 6px; }
.pc-not-ten span[lang="ja"] { font-family: var(--font-jp); font-style: normal; font-size: 12px; }
.pc-not-phu { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-1); margin: 4px 0 0; }
.pc-not-ds { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 6px 0 0; }
.pc-not-nut { margin-top: 22px; background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 6px 0; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.pc-not-tat { margin-top: 8px; }
.pc-bang-ten small { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: .02em; color: var(--accent-1); margin-top: 3px; }
.pc-bang-ds button.on .pc-bang-ten small { color: var(--paper); opacity: .7; }
.pc-bang-ds button:disabled .pc-bang-ten small { color: #b5b0a6; }

/* khu chọn mùi nổi bật hơn (Dex 05/10: khách không biết bấm vào đâu) */
.pc-ds-dau { margin: 0 0 14px; }
.pc-ds-tieu { font-family: var(--font-heading); font-size: 22px; line-height: 1.2; margin: 0; color: var(--ink); }
.pc-ds-phu { font-family: var(--font-body); font-size: 13px; color: var(--accent-1); margin: 4px 0 0; }
.pc-ds-o { gap: 10px; }
.pc-o5 { height: 56px; padding: 0 16px; border: 1.5px dashed var(--accent-1, #8a7a64); border-bottom-width: 1.5px; background: var(--bg-pure, #fff); grid-template-columns: 58px 1fr 28px; }
.pc-o5:hover { border-color: var(--ink); border-style: solid; }
.pc-o5-mui { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 18px; line-height: 1; }
.pc-o5.co { border: 1.5px solid var(--ink); background: var(--paper); }
.pc-o5.co .pc-o5-mui { background: transparent; color: var(--ink); font-family: var(--font-heading); font-size: 22px; }
.pc-o5.tiep { border-style: solid; border-color: var(--ink); animation: pc-moi 1.8s ease-in-out infinite; }
@keyframes pc-moi { 0%, 100% { box-shadow: 0 0 0 0 rgba(26,26,26,.18); } 50% { box-shadow: 0 0 0 5px rgba(26,26,26,0); } }
@media (prefers-reduced-motion: reduce) { .pc-o5.tiep { animation: none; } }
.pc-ds-ghi { display: none; }
.pc-them.pc-them--chon { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.pc-them.pc-them--chon:hover { background: var(--ink); color: var(--paper); }
/* ô chọn mùi: không trắng tinh, chỉ sáng hơn nền ngăn một chút (Dex 05/10) */
.pc-o5 { background: #FDFBF7; }
.pc-o5.co { background: #FDFBF7; }
/* số chai to, đậm (Dex 05/10) */
.pc-ds-so b, .pc-bang-dau b { font-family: var(--font-heading); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: 0; color: var(--ink); margin-left: 4px; vertical-align: -3px; }
.pc-bang-dau b { font-size: 30px; }
.pc-ds-so { white-space: nowrap; }
.pc-o5 { grid-template-columns: 70px 1fr 28px; }

/* ô sản phẩm thẳng hàng (Dex 05/10: Cardamom Chai Tea bị rớt dòng) */
.sp__vi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { .sp__vi .sp__jp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.sp__mo { flex: 1 1 auto; }
.sp__dong { margin-top: auto; padding-top: 10px; }

/* liên kết dưới ô /shop đậm, dễ đọc hơn (Dex 05/10) */
.sp__links a, .sp__links button { color: var(--ink); font-weight: 600; font-size: 12px; letter-spacing: .08em; }
.sp__links a:hover, .sp__links button:hover { color: var(--accent-1); }
@media (max-width: 767px) { .sp__links a, .sp__links button { font-size: 11px; } }
a.sp__anh--qs { display: block; }
a.sp__anh--qs:hover img { transform: scale(1.03); }
/* nút "+ Thông tin chi tiết" ở trang Quan sát: cùng độ đậm với "+ Shop" */
.project-detail__buy .perfume-feature__btn--ghost { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }

/* thanh dính khi cuộn ở trang Quan sát: tên + Shop + Thông tin chi tiết */
.pd-bam { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(250,248,244,.97); border-top: 1px solid var(--rule); box-shadow: 0 -6px 20px rgba(26,26,26,.06); transform: translateY(110%); transition: transform .3s ease; padding-bottom: env(safe-area-inset-bottom); }
.pd-bam.hien { transform: none; }
.pd-bam__in { max-width: var(--maxw-page, 1200px); margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 12px 24px; }
.pd-bam__ten { flex: 1; min-width: 0; font-family: var(--font-heading); font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-bam__ten span { font-style: italic; font-size: 15px; color: var(--ink-soft); margin-left: 8px; }
.pd-bam__nut { display: flex; gap: 10px; }
.pd-bam__nut a, .pd-bam__nut button { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; height: 44px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pd-bam__nut .pd-bam__shop { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.pd-bam__nut .pd-bam__ct { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
@media (max-width: 767px) {
  .pd-bam__in { padding: 10px 16px; gap: 0; }
  .pd-bam__ten { display: none; }
  .pd-bam__nut { flex: 1; gap: 8px; }
  .pd-bam__nut a, .pd-bam__nut button { flex: 1 1 0; padding: 0 8px; font-size: 11px; letter-spacing: .08em; height: 46px; }
}
body.pd-bam-mo .lang-switch { bottom: 88px; transition: bottom .3s; }

/* "+ Quan sát" trả lại kiểu cũ (Dex 05/10); "+ Thông tin chi tiết" giữ đậm */
.sp__links a { color: var(--accent-1); font-weight: 400; font-size: 11px; letter-spacing: .1em; }
.sp__links a:hover { color: var(--ink); }
@media (max-width: 767px) { .sp__links a { font-size: 10px; letter-spacing: .06em; } }

/* thanh dính trang Quan sát chuyển lên TRÊN (Dex 05/10: ở đáy bị che) — top đặt bằng JS = đáy hàng subnav */
.pd-bam { top: var(--pd-bam-top, 120px); bottom: auto; z-index: 39; border-top: 0; border-bottom: 1px solid var(--rule); box-shadow: 0 6px 16px rgba(26,26,26,.06); transform: translateY(-140%); padding-bottom: 0; }
.pd-bam.hien { transform: none; }
body.pd-bam-mo .lang-switch { bottom: 22px; }
@media (max-width: 767px) { body.pd-bam-mo .lang-switch { bottom: 16px; } }

/* sửa 05/10: thanh dính ẩn HẲN khi chưa cần (trước đó còn ló mép dưới hàng encounter…) */
.pd-bam { visibility: hidden; opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .2s ease, visibility 0s linear .3s; }
.pd-bam.hien { visibility: visible; opacity: 1; pointer-events: auto; transition: transform .3s ease, opacity .2s ease, visibility 0s; }

/* ngăn mua trên máy tính to bằng ngăn Thông tin chi tiết (Dex 05/10) */
@media (min-width: 768px) {
  .pc-gio--mua .pc-ngan { width: min(50vw, 760px); }
  .pc-gio--mua .pc-mua-than { padding: 32px 40px 48px; }
  .pc-gio--mua .pc-anh-chinh { width: min(100%, 62vh); aspect-ratio: 1 / 1; }
  .pc-gio--mua .pc-anh-nho button { flex-basis: 76px; height: 76px; }
}

/* 2 nút dưới tên mùi ở trang Quan sát giống thanh dính (Dex 05/10) */
.project-detail__buy { gap: 10px; }
.pd-nut { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; height: 44px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; white-space: nowrap; border: 1px solid var(--ink); border-radius: 0; }
.pd-nut--shop { background: var(--ink); color: var(--paper); }
.pd-nut--ct { background: transparent; color: var(--ink); }
.pd-nut--shop:hover { background: transparent; color: var(--ink); }
.pd-nut--ct:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 767px) {
  .project-detail__buy { display: flex; width: 100%; gap: 8px; }
  .pd-nut { flex: 1 1 0; padding: 0 8px; font-size: 11px; letter-spacing: .08em; height: 46px; }
}

/* nút SHOP trên menu cùng kiểu nút Shop trang Quan sát (Dex 05/10) */
.site-nav a.nav-shop { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); height: 36px; padding: 0 18px; display: inline-flex; align-items: center; font-weight: 600; transition: background .2s, color .2s; }
.site-nav a.nav-shop:hover { background: transparent; color: var(--ink); }

/* bản EN/JA: bước dựng giữ 1 ngôn ngữ nhưng xoá class .en/.vi → mất kiểu chữ chính (Dex 05/10: 'encounter' bản EN mảnh hơn bản VI).
   Tự sinh từ main.css: chữ còn lại [data-i18n] dùng đúng kiểu chữ chính của bản VI ở từng khối. */
.project-detail__accordion-title [data-i18n] {font-family: var(--font-body); font-weight: 700; text-transform: lowercase; letter-spacing: -0.01em; color: var(--ink);}
.project-detail__dark-title [data-i18n] {font-family: var(--font-body); font-style: normal; font-size: 0.22em; font-weight: 500; letter-spacing: 0.2em; text-transform: lowercase; color: rgba(250, 248, 244, 0.55); line-height: 1;}
.project-detail__pyramid-title [data-i18n] {color: var(--paper); font-style: normal;}
.project-detail__pyramid-label [data-i18n] {color: var(--paper); font-style: normal;}
.project-detail__closing-title [data-i18n] {font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; color: var(--ink);}
.series-detail__prose [data-i18n] {font-family: var(--font-heading); font-weight: 400; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; color: var(--ink); margin: 0;}
.capsule-form__label [data-i18n] {font-family: var(--font-heading); font-weight: 500; font-size: 16px; color: var(--ink);}
.capsule-form__hint [data-i18n] {font-family: var(--font-heading); font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink-soft);}
.capsule-form__submit-label [data-i18n] {font-family: var(--font-heading); font-style: italic; font-size: 13px; letter-spacing: 0.04em; text-transform: none; font-weight: 400;}
.capsule-form__status [data-i18n], .capsule-form__error [data-i18n] {font-family: var(--font-heading); font-weight: 500; font-size: 17px; color: var(--ink); margin: 0 0 6px;}
.capsule-form__error [data-i18n] {color: #B85450;}
.capsule-form__radio input[type="radio"]:checked + [data-i18n] {font-weight: 500;}
.capsule-form__radio [data-i18n] {font-family: var(--font-heading); font-weight: 400; font-size: 15px; color: var(--ink); display: block; line-height: 1.35;}
.chapter__intro [data-i18n] {font-family: var(--font-heading); font-style: italic; font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0;}
.series-detail__pullquote p[data-i18n]:not(.vi) {font-family: var(--font-heading); font-weight: 400; font-style: italic; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.4; color: var(--ink); margin-bottom: 8px;}
.lens-trailer p[data-i18n]:not(.vi) {color: var(--ink);}

/* EN/JA giữ kiểu chữ chuẩn của bản VI (Dex 05/10): dòng chính đã dịch mất class .vi */
.series-card__sub[data-i18n]:not(.vi):not(.en),
.visit-card__text[data-i18n]:not(.vi):not(.en),
.zone__how-text[data-i18n]:not(.vi):not(.en) { font-family: var(--font-heading); font-weight: 400; font-style: normal; color: var(--ink); }
html[lang="en"] .series-poster__meta-text.en,
html[lang="ja"] .series-poster__meta-text.en { font-family: var(--font-heading); font-weight: 400; font-style: normal; font-size: 15px; line-height: 1.55; color: var(--ink); }

/* ===== Shop: dạng Danh sách (Dex 05/10) — chỉ desktop; trái thông tin, phải 3 ảnh vuông, hàng xen màu nền ===== */
.sp__ba { display: none; }
.shop-xem { display: none; }
@media (min-width: 900px) {
  .shop-xem { display: flex; gap: 4px; margin-left: auto; align-items: center; }
  .shop-xem button { width: 34px; height: 34px; padding: 7px; border: 1px solid transparent; border-bottom: 1px solid transparent; background: none; cursor: pointer; color: var(--accent-1); }
  .shop-xem button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
  .shop-xem button:hover { color: var(--ink); }
  .shop-xem button.on { color: var(--ink); border-color: var(--ink); }

  .shop-luoi--ds { display: block; padding-top: 20px; }
  .shop-luoi--ds .sp { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.6fr); gap: 0 40px; align-items: start; padding: 32px 28px; margin: 0; background: var(--paper); }
  .shop-luoi--ds .sp.sp--le { background: var(--paper-cool, #F2F0EB); }
  .shop-luoi--ds .sp > .sp__anh, .shop-luoi--ds .sp__mo .sp__anh { display: none; }
  .shop-luoi--ds .sp__mo { grid-column: 1; grid-row: 1; flex: none; }
  .shop-luoi--ds .sp__links { grid-column: 1; grid-row: 2; margin-top: 16px; }
  /* tấm chữ nhật = đúng vùng 3 ô vuông + 2 khe 16px: ô .sp__do vô hình (vuông, cột 1) giữ chiều cao */
  .shop-luoi--ds .sp__ba { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; color: inherit; text-decoration: none; cursor: pointer; }
  .shop-luoi--ds .sp__do { grid-column: 1; grid-row: 1; aspect-ratio: 1 / 1; visibility: hidden; }
  .shop-luoi--ds .sp__bang { grid-column: 1 / -1; grid-row: 1; position: relative; overflow: hidden; background: color-mix(in srgb, var(--paper-cool, #F2F0EB) 60%, var(--rule) 40%); opacity: .55; }
  .shop-luoi--ds .sp__bang:has(img) { opacity: 1; background: none; }
  .shop-luoi--ds .sp__bang img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
  .shop-luoi--ds .sp__ba:hover .sp__bang img { transform: scale(1.02); }
  .shop-luoi--ds .sp__ten { font-size: 28px; }
  .shop-luoi--ds .sp__vi { font-size: 17px; white-space: normal; }
  .shop-luoi--ds .sp__jp { display: block; margin: 4px 0 0; font-size: 14px; }
  .shop-luoi--ds .sp__dong { margin-top: 18px; padding-top: 0; justify-content: flex-start; gap: 20px; }
  .shop-luoi--ds .sp__gia { font-size: 16px; }
  .shop-luoi--ds .sp__cong { width: auto; padding: 0 18px; height: 40px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
  .shop-luoi--ds .sp__cong::before { content: attr(data-chu); }
  .shop-luoi--ds .sp__cong[data-chu] { font-size: 0; }
  .shop-luoi--ds .sp__cong[data-chu]::before { font-size: 11px; }
  .shop-luoi--ds .sp--chon { animation: sp-sang 1.6s ease 1; }
}
/* Dex 06/10: ngăn mua — ảnh lớn VUÔNG, cột ảnh nhỏ dọc BÊN PHẢI (cùng kiểu web Lê Mai mới) */
.pc-mua-anh { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 10px; align-items: stretch; }
.pc-mua-anh .pc-anh-chinh { grid-column: 1; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.pc-mua-anh .pc-anh-nho { grid-column: 2; flex-direction: column; margin: 0; height: 0; min-height: 100%; overflow-y: auto; overflow-x: hidden; }
.pc-mua-anh .pc-anh-nho button, .pc-gio--mua .pc-mua-anh .pc-anh-nho button { flex: 0 0 64px; width: 64px; height: 64px; }
.pc-mua-anh:not(:has(.pc-anh-nho)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .pc-mua-anh { grid-template-columns: minmax(0, 1fr) 56px; gap: 8px; } .pc-mua-anh .pc-anh-nho button, .pc-gio--mua .pc-mua-anh .pc-anh-nho button { flex-basis: 56px; width: 56px; height: 56px; } }
@media (min-width: 768px) { .pc-gio--mua .pc-mua-anh { width: min(100%, calc(62vh + 74px)); margin-left: auto; margin-right: auto; } .pc-gio--mua .pc-anh-chinh { width: 100%; } }