/* Tết shop loading page */
.loading-page { min-height: 100svh; overflow-x: hidden; color: #4d3029; background: #f5ecd9; }
.loading-page::selection { color: #fff7dc; background: #a83e36; }
.loading-stage { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 80% 16%, rgba(232, 177, 70, .2), transparent 24%), linear-gradient(135deg, #f9f1de 0%, #eee0c4 100%); }
.loading-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .34; background-image: linear-gradient(rgba(136, 82, 47, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(136, 82, 47, .08) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 78%); }
.loading-stage::after { content: ""; position: absolute; inset: 12px; z-index: -1; border: 1px solid rgba(127, 76, 42, .2); pointer-events: none; }
.loading-pattern { position: absolute; z-index: -1; width: 340px; height: 340px; border: 1px solid rgba(171, 69, 50, .13); border-radius: 50%; box-shadow: 0 0 0 20px rgba(171, 69, 50, .035), 0 0 0 42px rgba(203, 151, 58, .05), 0 0 0 70px rgba(171, 69, 50, .03); }
.loading-pattern--top { top: -185px; right: -84px; }.loading-pattern--bottom { bottom: -236px; left: -126px; width: 410px; height: 410px; }
.loading-header { width: min(1180px, calc(100% - 64px)); min-height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(113, 68, 42, .18); }
.loading-brand { display: inline-flex; align-items: center; gap: 11px; color: #5c362c; font: 700 13px var(--display); letter-spacing: .01em; text-decoration: none; }
.loading-brand img { width: 33px; height: 33px; object-fit: cover; border: 2px solid #fff6d4; border-radius: 11px; box-shadow: 0 4px 10px rgba(78, 45, 27, .2); }.loading-brand span > span { margin-left: 3px; color: #b84a3e; }
.loading-route { color: #986b4b; font: 9px var(--mono); letter-spacing: .11em; text-transform: uppercase; }.loading-route i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #c99732; box-shadow: 0 0 0 4px rgba(201, 151, 50, .16); }
.loading-layout { width: min(1180px, calc(100% - 64px)); min-height: calc(100svh - 93px); margin: 0 auto; display: grid; grid-template-columns: minmax(280px, .82fr) minmax(440px, 1.18fr); align-items: center; gap: clamp(34px, 7vw, 112px); padding: 62px 0 76px; }
.loading-intro { position: relative; z-index: 2; max-width: 470px; }.loading-intro .eyebrow { margin-bottom: 25px; }.loading-intro h1 { margin: 0; color: #58342c; font: 700 clamp(54px, 6.8vw, 96px)/.88 var(--display); letter-spacing: -.105em; }.loading-intro h1 em { color: #a43b34; font-style: normal; }.loading-lede { max-width: 410px; margin: 28px 0 0; color: #785d4a; font-size: 14px; line-height: 1.92; }
.loading-rituals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }.loading-rituals span { padding: 8px 10px; color: #916c4f; border: 1px solid rgba(153, 98, 48, .24); border-radius: 99px; background: rgba(255, 249, 228, .55); font: 9px var(--mono); letter-spacing: .03em; }
.loading-progress-wrap { max-width: 405px; margin-top: 44px; }.loading-progress-meta, .loading-progress-foot { display: flex; justify-content: space-between; gap: 12px; }.loading-progress-meta { align-items: end; color: #76503d; font: 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }.loading-progress-meta strong { color: #ad3d36; font-size: 16px; letter-spacing: -.04em; }.loading-progress { height: 8px; margin-top: 12px; overflow: hidden; border: 1px solid rgba(137, 74, 45, .23); border-radius: 99px; background: rgba(255, 248, 221, .72); box-shadow: inset 0 1px 2px rgba(102, 56, 33, .12); }.loading-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9e3933, #cb9430 74%, #e1b857); box-shadow: 0 0 16px rgba(185, 66, 50, .34); transition: width .12s linear; }.loading-progress-foot { margin-top: 9px; color: #aa876b; font: 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.loading-skip { min-height: 40px; margin-top: 23px; padding: 0 0 5px; color: #8f302c; border: 0; border-bottom: 1px solid rgba(143, 48, 44, .55); background: transparent; cursor: pointer; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease, border-color .2s ease, transform .2s ease; }.loading-skip:hover, .loading-skip:focus-visible { color: #c18b29; border-color: #c18b29; transform: translateX(4px); }.loading-skip:focus-visible { outline: 2px solid #b8861d; outline-offset: 5px; }.loading-skip:disabled { cursor: wait; opacity: .7; }
.loading-art { min-height: 530px; position: relative; display: grid; place-items: center; }.loading-art-halo { position: absolute; width: min(72%, 440px); aspect-ratio: 1; border: 1px solid rgba(164, 60, 49, .2); border-radius: 50%; box-shadow: 0 0 0 20px rgba(164, 60, 49, .035), 0 0 0 49px rgba(205, 154, 62, .07), 0 0 0 83px rgba(164, 60, 49, .025); }.loading-scene { width: min(100%, 690px); position: relative; z-index: 1; filter: drop-shadow(0 20px 28px rgba(93, 50, 29, .13)); }.loading-couplet { position: absolute; top: 50%; z-index: 2; display: grid; gap: 4px; width: 46px; padding: 12px 8px; color: #f7d887; border: 1px solid #d59c38; background: linear-gradient(#a73b34, #762721); box-shadow: 5px 7px 0 rgba(110, 47, 34, .15); font: 700 10px/1.55 var(--display); letter-spacing: .04em; text-align: center; transform: translateY(-42%); }.loading-couplet::before { content: ""; position: absolute; top: -18px; left: 50%; width: 1px; height: 21px; background: #70442f; }.loading-couplet--left { left: 3%; transform: translateY(-42%) rotate(-2deg); }.loading-couplet--right { right: 3%; transform: translateY(-42%) rotate(2deg); }
.loading-art-caption { position: absolute; right: 8%; bottom: 0; z-index: 2; display: grid; gap: 6px; text-align: right; }.loading-art-caption span { color: #a67d59; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.loading-art-caption strong { color: #743c31; font: 600 20px var(--display); letter-spacing: -.05em; }
.loading-page.is-leaving .loading-intro, .loading-page.is-leaving .loading-art { animation: loadingExit .46s ease both; }.loading-page.is-leaving .loading-art { animation-delay: .04s; }
@keyframes loadingExit { to { opacity: 0; transform: translateY(-12px) scale(.98); } }
@media (max-width: 900px) { .loading-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 42px; }.loading-intro { max-width: 610px; }.loading-art { min-height: 470px; max-width: 700px; width: 100%; margin: 0 auto; }.loading-intro h1 { font-size: clamp(54px, 12vw, 84px); }.loading-progress-wrap { max-width: 500px; } }
@media (max-width: 560px) { .loading-header, .loading-layout { width: min(100% - 34px, 1180px); }.loading-header { min-height: 72px; }.loading-route { font-size: 8px; }.loading-layout { padding: 40px 0 54px; }.loading-intro h1 { font-size: clamp(52px, 17vw, 78px); }.loading-lede { font-size: 13px; }.loading-rituals { gap: 6px; }.loading-rituals span { font-size: 8px; }.loading-progress-wrap { margin-top: 35px; }.loading-art { min-height: 310px; margin-top: 0; }.loading-couplet { top: 45%; width: 34px; padding: 9px 5px; font-size: 7px; }.loading-couplet--left { left: -2px; }.loading-couplet--right { right: -2px; }.loading-art-caption { right: 1%; bottom: -1px; }.loading-art-caption strong { font-size: 16px; }.loading-art-caption span { font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { .loading-skip, .loading-progress > span { transition: none; }.loading-page.is-leaving .loading-intro, .loading-page.is-leaving .loading-art { animation: none; opacity: .2; } }

/* Loading page skeleton: mirrors the real loading composition before it appears. */
.loading-skeleton-layer { position: fixed; inset: 0; z-index: 80; overflow: hidden; color: #777; background: #f2f2f2; opacity: 1; transition: opacity .42s ease, visibility .42s ease; pointer-events: none; }
.loading-skeleton-layer.is-done { visibility: hidden; opacity: 0; }
.loading-skeleton-shell { width: min(1180px, calc(100% - 64px)); min-height: 100%; margin: 0 auto; padding-top: 30px; }
.loading-skeleton-head { height: 62px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(120, 120, 120, .14); }.loading-skeleton-head i, .loading-skeleton-head span, .loading-skeleton-copy i, .loading-skeleton-copy b, .loading-skeleton-copy span, .loading-skeleton-copy em, .loading-skeleton-copy strong, .loading-skeleton-art i, .loading-skeleton-art b, .loading-skeleton-art span { display: block; border-radius: 6px; background: linear-gradient(100deg, rgba(140, 140, 140, .16) 22%, rgba(194, 194, 194, .36) 38%, rgba(140, 140, 140, .16) 54%); background-size: 240% 100%; animation: loadingSkeletonShimmer 1.2s ease-in-out infinite; }.loading-skeleton-head i { width: 126px; height: 12px; }.loading-skeleton-head span { width: 88px; height: 9px; }
.loading-skeleton-layout { min-height: calc(100svh - 93px); display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(34px, 7vw, 112px); padding: 62px 0 76px; }.loading-skeleton-copy { max-width: 470px; }.loading-skeleton-copy i { width: 150px; height: 9px; margin-bottom: 26px; }.loading-skeleton-copy b { width: min(390px, 88%); height: 58px; margin-bottom: 10px; border-radius: 5px; }.loading-skeleton-copy b:nth-of-type(2) { width: 62%; }.loading-skeleton-copy span { width: 90%; height: 11px; margin-top: 16px; }.loading-skeleton-copy span:nth-of-type(2) { width: 78%; margin-top: 9px; }.loading-skeleton-copy span:nth-of-type(3) { width: 58%; margin-top: 9px; }.loading-skeleton-copy div { display: flex; gap: 8px; margin-top: 28px; }.loading-skeleton-copy em { width: 74px; height: 27px; border-radius: 99px; }.loading-skeleton-copy em:nth-child(2) { width: 132px; }.loading-skeleton-copy em:nth-child(3) { width: 99px; }.loading-skeleton-copy strong { width: 90%; height: 8px; margin-top: 42px; }
.loading-skeleton-art { min-height: 520px; position: relative; display: grid; place-items: center; border: 1px solid rgba(128, 128, 128, .16); background: rgba(228, 228, 228, .46); }.loading-skeleton-art i { width: min(60%, 360px); aspect-ratio: 1; border-radius: 50%; }.loading-skeleton-art b { position: absolute; width: 72px; height: 114px; left: 8%; top: 33%; border-radius: 7px; }.loading-skeleton-art span { position: absolute; width: 62px; height: 12px; right: 9%; bottom: 24%; }.loading-skeleton-art span:nth-of-type(2) { width: 116px; right: 9%; bottom: 19%; }.loading-skeleton-art span:nth-of-type(3) { width: 43px; right: 9%; bottom: 15%; }
@keyframes loadingSkeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (max-width: 900px) { .loading-skeleton-shell { width: min(100% - 64px, 1180px); }.loading-skeleton-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 42px; }.loading-skeleton-copy { max-width: 610px; }.loading-skeleton-art { min-height: 360px; max-width: 700px; width: 100%; margin: 0 auto; } }
@media (max-width: 560px) { .loading-skeleton-shell { width: calc(100% - 34px); padding-top: 20px; }.loading-skeleton-head { height: 52px; }.loading-skeleton-head i { width: 98px; }.loading-skeleton-layout { min-height: calc(100svh - 72px); padding: 40px 0 54px; }.loading-skeleton-copy b { height: 43px; }.loading-skeleton-art { min-height: 280px; }.loading-skeleton-art i { width: 58%; }.loading-skeleton-art b { left: 0; width: 46px; height: 78px; } }
@media (prefers-reduced-motion: reduce) { .loading-skeleton-head i, .loading-skeleton-head span, .loading-skeleton-copy i, .loading-skeleton-copy b, .loading-skeleton-copy span, .loading-skeleton-copy em, .loading-skeleton-copy strong, .loading-skeleton-art i, .loading-skeleton-art b, .loading-skeleton-art span { animation: none; } }