/* Phần mở đầu lấy cảm hứng từ thẻ treo của Maison Perl. */
.hero{min-height:calc(100svh - 82px);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(38px,5.4vw,100px);padding:clamp(22px,2.6vw,38px) 5.4% 42px;overflow:visible}
.hero-copy{padding:clamp(26px,5vh,65px) 0 0;min-width:0}
.hero h1{font-size:clamp(54px,6.15vw,94px);margin:26px 0 34px;line-height:1.12}
.hero h1 em{display:inline-block;padding-left:clamp(15px,4vw,68px)}
.hero .intro{max-width:480px;font-size:clamp(14px,1.15vw,16px)}
.hero-actions .btn{border-radius:999px;justify-content:center}
.hero-foot{gap:18px;align-items:center;padding-top:52px;font-size:10px}
.hero-scroll{white-space:nowrap}.hero-scroll span{padding-left:8px;letter-spacing:.05em}
.hero-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:0 16px;min-width:0}
.hero-stage .hero-frame{display:block;min-width:0;min-height:500px;max-height:calc(100svh - 148px);width:100%;padding:0;border:0;cursor:pointer;background:#d8cbcb;border-radius:3px}
.hero-stage .hero-frame:after{inset:60% 0 0;background:linear-gradient(transparent,#29101a40);pointer-events:none}
.hero-stage .hero-slide{object-position:center 28%;filter:none;opacity:0;transition:opacity .75s ease;z-index:0}
.hero-stage .hero-slide.is-active{opacity:1;z-index:1}
.hero-stage .hero-slide.is-previous{opacity:1;z-index:0}
.hero-side{position:absolute;right:17px;top:0;writing-mode:vertical-rl;font-size:9px;letter-spacing:.22em;color:#907c80}
.hero-reel{align-self:end;display:grid;gap:8px;grid-column:2;max-height:75%;overflow:auto}
.hero-reel button{border:0;padding:0;width:54px;aspect-ratio:3/4;opacity:.6;background:#ded2cf;overflow:hidden;transition:opacity .25s,transform .25s;border-radius:3px}
.hero-reel img{width:100%;height:100%;object-fit:cover}.hero-reel button[aria-current=true]{opacity:1;outline:2px solid #813b50;outline-offset:-2px}
.hero-reel button:hover{opacity:1;transform:translateX(-3px)}
.hero-pause{grid-column:2;justify-self:center;border:0;background:transparent;font-size:10px;color:#755e65;padding:6px 0;white-space:nowrap}
.hero-hangtag-wrap{position:absolute;left:clamp(-70px,-4.6vw,-36px);top:9%;z-index:3;padding-top:43px;transform:rotate(-5deg);transform-origin:50% 0;filter:drop-shadow(0 14px 18px #29101a30)}
.hero-hangtag-wrap:before{content:'';position:absolute;top:0;left:50%;width:1px;height:53px;background:#74656a}
.hero-hangtag-wrap:after{content:'';position:absolute;top:-4px;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:#541b2f;box-shadow:0 0 0 3px #f6f1ed}
.hero-hangtag{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:9px;width:142px;min-height:196px;padding:42px 16px 16px;border:0;background:#fbf7f2;color:#2c2528;clip-path:polygon(19px 0,calc(100% - 19px) 0,100% 19px,100% 100%,0 100%,0 19px);transition:background .2s,transform .2s}
.hero-hangtag:before{content:'';position:absolute;top:11px;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:#dfd0c9;box-shadow:inset 0 1px 2px #0004}
.hero-hangtag:hover{background:#fff}.hero-hangtag:active{transform:scale(.97)}
.hero-hangtag .tag-no{font:italic 14px/1.2 var(--serif);color:#8e4259}
.hero-hangtag .tag-name{font:20px/1.17 var(--serif);overflow-wrap:anywhere}
.hero-hangtag .tag-stock{width:100%;margin-top:auto;padding-top:10px;border-top:1px dashed #cdbdb6;font:600 9px/1.45 var(--sans);letter-spacing:.07em;color:#675459;text-transform:uppercase;overflow-wrap:anywhere}
@media(max-width:820px){.hero{display:flex;flex-direction:column;gap:20px;min-height:0;padding:0 6% 35px}.hero-copy{padding:52px 0 4px}.hero h1{font-size:clamp(48px,12vw,70px);margin:22px 0 25px}.hero h1 em{padding-left:clamp(14px,5vw,34px)}.hero-actions{margin-top:26px;gap:14px}.hero-foot{display:none}.hero-stage{grid-template-columns:minmax(0,1fr);gap:10px}.hero-stage .hero-frame{aspect-ratio:4/5;height:auto;max-height:650px;min-height:0}.hero-reel{display:flex;grid-column:1;max-height:none;overflow:auto;gap:8px;padding:2px}.hero-reel button{width:50px;flex:0 0 50px}.hero-side{display:none}.hero-pause{grid-column:1;justify-self:start;min-height:36px;padding:4px 2px}.hero-hangtag-wrap{left:auto;right:12px;top:0;transform:rotate(-5deg) scale(.82);transform-origin:top right}.hero-hangtag{min-height:190px}}
@media(max-width:360px){.hero h1{font-size:46px}.hero-actions .btn{min-height:46px}.hero-hangtag-wrap{right:5px;transform:rotate(-5deg) scale(.73)}}
/* Màn lụa tự kết thúc, chỉ một lần trong phiên và không ngăn tương tác. */
.home-curtain{display:none}.show-curtain .home-curtain{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;animation:curtain-end .01s 2.25s forwards}
.home-curtain-panel{position:absolute;top:0;bottom:0;width:50.2%;background:linear-gradient(180deg,#ffffff12,transparent 20%,#00000030),repeating-linear-gradient(90deg,#591a30 0,#74263f 3.2%,#4a1427 6.6%,#63203a 9.4%,#591a30 12%);will-change:transform}
.home-curtain-panel.left{left:0;transform-origin:left;animation:curtain-left 1.15s .65s cubic-bezier(.7,0,.2,1) forwards}.home-curtain-panel.right{right:0;transform-origin:right;animation:curtain-right 1.15s .65s cubic-bezier(.7,0,.2,1) forwards}
.home-curtain-mark{z-index:1;display:grid;justify-items:center;gap:14px;color:#f8eeec;animation:curtain-mark 1.1s .35s ease both}.home-curtain-mark img{width:50px;height:56px;object-fit:contain}.home-curtain-mark span{font:24px/1 var(--serif,Georgia,serif);letter-spacing:.2em;text-indent:.2em}
@keyframes curtain-left{to{transform:scaleX(0)}}@keyframes curtain-right{to{transform:scaleX(0)}}@keyframes curtain-mark{0%,25%{opacity:1}100%{opacity:0;transform:scale(.95)}}@keyframes curtain-end{to{visibility:hidden}}
/* Hành trình may đo: bốn bước với đường chỉ khâu. */
.journey{padding:clamp(70px,8vw,140px) 7%;background:#1e0a12;color:#f6e8e6}.journey-label{display:flex;align-items:center;gap:14px;color:#cfacb6;font:italic 17px/1.4 var(--serif)}.journey-label:before{content:'────';font:12px var(--sans);letter-spacing:.1em}.journey h2{font-size:clamp(38px,5vw,70px);margin-top:16px}.journey h2 em{color:#d8acb9}.journey-steps{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,52px);padding:0;margin:clamp(42px,5vw,74px) 0 0}.journey-steps:before{content:'';position:absolute;left:0;right:0;top:23px;height:1px;background:repeating-linear-gradient(90deg,#e7c9cf 0 7px,transparent 7px 13px)}.journey-steps li{position:relative;padding-top:72px}.journey-number{position:absolute;top:0;left:0;display:grid;place-items:center;width:47px;height:47px;border:1px solid #d6b7c0;border-radius:50%;background:#1e0a12;color:#e4c5ce;font:italic 17px var(--serif)}.journey h3{font-size:clamp(22px,1.7vw,27px);margin-bottom:12px}.journey li p{max-width:31ch;color:#dcc8cb;font-size:14px;line-height:1.8}.journey li a{display:inline-block;margin-top:14px;padding:4px 0;border-bottom:1px dashed #c9a8b1;color:#f8ecea;font-size:13px;font-weight:600}.journey li a:hover{color:#e5b7c4}
@media(max-width:820px){.journey{padding:72px 6%}.journey-steps{grid-template-columns:1fr;gap:36px}.journey-steps:before{left:23px;right:auto;top:0;bottom:0;width:1px;height:auto;background:repeating-linear-gradient(180deg,#e7c9cf 0 7px,transparent 7px 13px)}.journey-steps li{padding:3px 0 0 70px;min-height:47px}.journey li p{max-width:46ch}}
.text-arrive{animation:text-arrive .8s cubic-bezier(.2,.6,.2,1) both}@keyframes text-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.show-curtain .home-curtain{display:none}.hero-stage .hero-slide,.hero-hangtag,.hero-reel button{transition:none}.text-arrive{animation:none}}
.hero-reel[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.people-grid .person img{transition:filter .55s ease,opacity .55s ease,transform .55s ease}.people-grid:has(.person:hover) .person:not(:hover) img,.people-grid:has(.person:focus-within) .person:not(:focus-within) img{filter:grayscale(.9) brightness(.68);opacity:.82}.people-grid .person:hover img,.people-grid .person:focus-within img{filter:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.people-grid .person img{transition:none}}
/* Lưu các thiết kế yêu thích trên thiết bị. */
.header-favorites{position:relative;flex:none;display:grid;place-items:center;width:42px;height:42px;padding:9px;border:0;border-radius:50%;background:transparent;color:#541b2f}
.header-favorites:hover{background:#eadfda}.header-favorites svg,.look-favorite svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}.header-favorites span{position:absolute;right:0;top:0;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:50%;background:#541b2f;color:#fff;font:9px var(--sans)}.header-favorites span[hidden]{display:none}
.look-card-media{position:relative}.look-card .look-image-link{display:block;width:100%}.look-card .look-favorite{position:absolute;z-index:2;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:#fffaf4eF;color:#541b2f;box-shadow:0 2px 9px #29101a1a;transition:transform .2s,background .2s}.look-card .look-favorite:hover{transform:scale(1.07);background:#fff}.look-card .look-favorite.is-saved svg{fill:#7a2e49;stroke:#7a2e49}.look-card .look-content{display:block}.look-card .look-image-link .product-availability{z-index:1}
#favorites-dialog{width:min(640px,94vw);border-radius:18px}.favorites-content{padding:34px}.favorites-content>h2{font-size:38px;margin:12px 0}.favorites-content>p:not(.eyebrow){color:#74686b}.favorite-item{display:grid;grid-template-columns:85px 1fr;gap:18px;border-bottom:1px solid #e5d8d3;padding:18px 0}.favorite-item img{width:85px;height:105px;object-fit:cover;border-radius:8px}.favorite-item h3{font-size:23px}.favorite-item p{color:#704052;margin:5px 0}.favorite-actions{display:flex;gap:8px;flex-wrap:wrap}.favorite-actions button{min-height:38px;padding:7px 13px;border:1px solid #cfbcb8;border-radius:999px;background:transparent;color:#541b2f;font:12px var(--sans)}
.contact{background:radial-gradient(ellipse at 85% 55%,#4d162b 0,transparent 48%),radial-gradient(ellipse at 10% 5%,#38101f 0,transparent 40%),#1e0a12}.contact h2{font-size:clamp(42px,5.3vw,78px)}.contact-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.contact-actions .btn{min-width:175px;justify-content:center;border-radius:999px;font:600 12px var(--sans)}.contact-actions .contact-secondary{border:1px solid #d1b1ba;color:#fff;background:transparent}.contact-actions .contact-secondary:hover{background:#f4ebe3;color:#351a24}.contact-socials a{margin-top:0}
footer .footer-brand{display:grid;align-content:start;justify-items:start;gap:10px}footer .footer-brand p{font:italic 23px/1.4 var(--serif);color:#4c3439;letter-spacing:0}.footer-measure{display:inline-flex;padding:10px 15px;border:1px solid #c9b9b5;border-radius:999px;color:#541b2f}footer .footer-word{grid-column:1/-1;text-align:center;overflow:hidden;white-space:nowrap;font:clamp(65px,13.5vw,210px)/1 var(--serif);letter-spacing:-.04em;color:#d3c2be;opacity:.6;padding-top:30px}.footer-bottom{position:relative}
@media(max-width:820px){.header{gap:10px}.header-favorites{margin-left:auto}.header-action{margin-left:0}.look-card .look-favorite{right:8px;top:8px}.favorites-content{padding:26px 20px}.favorites-content>h2{font-size:32px}footer{grid-template-columns:1fr 1fr}footer .footer-brand{grid-column:1/-1}.footer-word{padding-top:15px!important}.footer-bottom{grid-column:1/-1}}
@media(max-width:380px){.header{padding-inline:14px;gap:5px}.header-action{font-size:10px}.header-action span{display:none}.header-favorites{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.look-card .look-favorite{transition:none}}
/* Bố cục tạp chí: một bài chính và các bài phụ. */
.article-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 24px}.article-grid>.article{grid-column:span 4;min-width:0}.article-media{aspect-ratio:16/10;overflow:hidden;border-radius:5px;background:#e8deda}.article-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.article:hover .article-media img{transform:scale(1.035)}.article-meta{margin-top:16px;color:#8a5b6a;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.article-sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.journal-all{margin-left:10px}
@media(min-width:821px){.article.featured{grid-column:span 8;grid-row:span 2}.article.featured h3{font-size:clamp(28px,2.8vw,42px)}.article.side .article-sum{display:none}.article.side h3{font-size:clamp(18px,1.5vw,23px)}}
@media(max-width:820px){.article-grid{grid-template-columns:1fr}.article-grid>.article{grid-column:auto}.article:not(.featured) a{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:start}.article:not(.featured) .article-media{aspect-ratio:1/1}.article:not(.featured) .article-meta{margin-top:0}.article:not(.featured) h3{font-size:18px}.article:not(.featured) .article-sum,.article:not(.featured) .text-link{display:none}.journal-all{margin-left:0}}

/* Lộ từng khối chữ khi cuộn, kể cả nội dung tải sau khi mở trang. */
.reveal-pending{opacity:0;transform:translateY(38px);will-change:opacity,transform}
.reveal-pending.reveal-visible{opacity:1;transform:translateY(0);transition:opacity .85s ease var(--reveal-delay,0ms),transform 1.1s cubic-bezier(.2,.65,.2,1) var(--reveal-delay,0ms)}
.hero-copy h1>span,.hero-copy h1>em{display:inline-block;animation:hero-word-reveal 1.15s cubic-bezier(.2,.65,.2,1) .1s both}
.hero-copy h1>em{animation-delay:.25s}.show-curtain .hero-copy h1>span{animation-delay:1s}.show-curtain .hero-copy h1>em{animation-delay:1.15s}
@keyframes hero-word-reveal{from{opacity:0;transform:translateY(28px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}

/* Thẻ xoay nhẹ quanh đúng điểm treo và giữ tỉ lệ trên màn hình nhỏ. */
.hero-hangtag-wrap{--tag-scale:1;transform-origin:50% 0;animation:hero-tag-sway 5.4s ease-in-out infinite}
@keyframes hero-tag-sway{0%,100%{transform:rotate(-5deg) scale(var(--tag-scale))}50%{transform:rotate(3deg) scale(var(--tag-scale))}}
@media(max-width:820px){.hero-hangtag-wrap{--tag-scale:.82;transform-origin:50% 0}}
@media(max-width:360px){.hero-hangtag-wrap{--tag-scale:.73}}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1!important;transform:none!important;clip-path:none!important}.hero-copy h1>span,.hero-copy h1>em{animation:none!important}.hero-hangtag-wrap{animation:none!important;transform:rotate(-5deg) scale(var(--tag-scale))!important}}