/* TrioX: an image-led collection, shared by both server-rendered languages. */
:root { --nen: #faf9f6; --nen-2: #efeee9; --be-mat: #fff; --muc: #222520; --chu-phu: #62665f; --vien: #dedfd7; --nhan: #d3ef80; --nhan-chu: #222520; --nhan-nhat: #eff6df; --le: clamp(20px, 5vw, 72px); --cao-dau-trang: 90px; --rong-toi-da: 1216px; }
body { overflow-x: clip; }
:focus-visible { outline-color: var(--muc); }
.van-ban a, .khu-lien-he__email { color: var(--muc); text-decoration-color: #819b4d; }
.dau-trang { border-bottom: 0; background: color-mix(in srgb, var(--nen) 94%, transparent); }
.dau-trang__trong { gap: 24px; }
.studio-mark { font: 800 2.35rem/.9 var(--chu-hien-thi); letter-spacing: -.085em; display: inline-flex; align-items: center; }
.studio-mark > span { color: var(--muc); background: var(--nhan); border-radius: 9px; margin-left: 3px; padding: 0 5px 4px; line-height: .85; }
.studio-mark i { font: 500 .62rem/1 var(--chu-than); align-self: flex-start; margin: 2px 0 0 5px; letter-spacing: 0; }
.dieu-huong { margin-left: auto; gap: 12px; }
.nav-short { display: none; }
.dieu-huong a { font-size: .85rem; padding: 10px 12px; color: var(--muc); }
.language-switch { display: flex; align-items: center; gap: 7px; padding-left: 20px; border-left: 1px solid var(--vien); font-size: .75rem; font-weight: 600; }
.language-switch a { text-decoration: none; padding: 7px 4px; color: var(--chu-phu); }
.language-switch a[aria-current] { color: var(--muc); text-decoration: underline; text-decoration-color: var(--nhan); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.language-switch > span { color: var(--vien); }
.nut--chinh { box-shadow: none; }
.nut--chinh:hover { background: #bedc67; box-shadow: none; }
.nut--lon { min-height: 56px; font-size: .88rem; padding-inline: 25px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: .69rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.studio-dot { width: 7px; height: 7px; border-radius: 50%; background: #7b9848; }
.studio-hero { display: grid; grid-template-columns: 1.08fr 1fr; gap: 36px; align-items: center; padding-top: 48px; padding-bottom: 80px; min-height: 660px; }
.studio-hero__copy { position: relative; z-index: 2; padding-top: 12px; }
.studio-hero h1 { font-size: clamp(3.5rem, 5.6vw, 5.4rem); font-weight: 800; letter-spacing: -.065em; line-height: 1.04; margin: 30px 0 24px; }
.studio-hero h1 > span { display: block; width: fit-content; }
.hero-highlight { position: relative; isolation: isolate; }
.hero-highlight::after { content: ''; position: absolute; z-index: -1; left: -2px; right: -7px; height: .24em; bottom: .07em; background: var(--nhan); transform: rotate(-1.3deg); border-radius: 2px; }
.studio-hero__description { max-width: 37ch; color: var(--chu-phu); font-size: .99rem; line-height: 1.8; }
.studio-hero__cta { margin-top: 30px; gap: 22px; background: var(--muc); color: var(--nen); }
.studio-hero__cta:hover { background: #3d4531; }
.studio-hero__footnote { margin-top: 36px; font-size: .68rem; color: var(--chu-phu); display: flex; align-items: center; gap: 9px; }
.studio-hero__footnote span { font-size: 1.3rem; color: var(--muc); }
.studio-collage { position: relative; height: 520px; }
.collage-backdrop { max-width: 80%; }
.collage-backdrop { position: absolute; width: 90%; height: 85%; top: 5%; right: -2%; background: #e8eddf; border-radius: 49% 49% 42% 45%; transform: rotate(-12deg); }
.collage-star { position: absolute; top: -12px; left: 30%; font: 400 6rem/1 sans-serif; color: #a0b966; transform: rotate(16deg); }
.collage-phone { display: block; position: absolute; width: 190px; text-decoration: none; transition: transform .3s; }
.collage-phone .khung-dt { border: 7px solid #272924; border-radius: 32px; box-shadow: 0 24px 42px -16px #28331c45; }
.collage-phone .khung-dt img { border-radius: 23px; }
.collage-phone > span { display: flex; align-items: center; justify-content: space-between; font-size: .67rem; font-weight: 600; padding: 10px 6px; }
.collage-phone--1 { top: 48px; left: 8%; transform: rotate(-9deg); z-index: 2; }
.collage-phone--2 { top: 9px; right: 2%; transform: rotate(9deg); z-index: 1; }
.collage-game { position: absolute; bottom: -10px; right: -2%; width: 290px; border: 7px solid var(--be-mat); border-radius: 15px; box-shadow: 0 20px 35px -12px #28331c30; overflow: hidden; z-index: 3; transform: rotate(-4deg); text-decoration: none; }
.collage-game img { width: 100%; }
.collage-game > span { padding: 10px 6px 4px; display: flex; justify-content: space-between; font-size: .7rem; font-weight: 600; }
.collage-sticker { position: absolute; left: -14px; bottom: 30px; width: 108px; height: 108px; display: grid; align-content: center; justify-content: center; background: var(--nhan); border: 1px solid #2225201a; border-radius: 50%; font: 800 1.1rem/1.1 var(--chu-hien-thi); letter-spacing: -.05em; transform: rotate(-16deg); z-index: 4; text-align: center; }
.collage-sticker > span { font-size: .7em; }
.studio-divider { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--chu-phu); font-size: .64rem; text-transform: uppercase; letter-spacing: .13em; position: relative; padding-bottom: 18px; }
.studio-divider::after { content: ''; position: absolute; left: var(--le); right: var(--le); bottom: 0; height: 1px; background: var(--vien); }
.studio-divider > span:nth-child(2) { font-size: 1.15rem; }
.collection { padding-top: 86px; padding-bottom: 110px; }
.collection-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; margin-bottom: 32px; }
.collection-heading h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.05em; margin-top: 15px; }
.collection-heading > p { max-width: 30ch; font-size: .81rem; color: var(--chu-phu); line-height: 1.8; }
.collection-count { font-size: .62rem; border: 1px solid var(--vien); padding: 2px 5px; border-radius: 5px; letter-spacing: 0; }
.project-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 34px; }
.project-filters[hidden] { display: none; }
.project-filters button { cursor: pointer; min-height: 40px; padding: 8px 18px; border: 1px solid var(--vien); border-radius: 999px; color: var(--chu-phu); background: transparent; font: 500 .74rem/1.4 var(--chu-than); transition: background .15s, color .15s; }
.project-filters button[aria-pressed="true"] { background: var(--muc); color: var(--nen); border-color: var(--muc); }
.project-filters button:hover { border-color: var(--muc); }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
.project-card { min-width: 0; }
.project-card[hidden] { display: none; }
.project-card__image-link { display: block; border-radius: 18px; overflow: hidden; }
.project-visual { position: relative; height: 390px; background: var(--sp-nhat); overflow: hidden; isolation: isolate; }
.project-visual__orb { position: absolute; z-index: -1; width: 320px; height: 320px; border: 1px solid color-mix(in srgb, var(--sp) 16%, transparent); border-radius: 50%; left: calc(50% - 160px); top: 40px; }
.project-visual__orb::after { content: ''; position: absolute; inset: 25px; border: inherit; border-radius: inherit; }
.project-phones { position: absolute; inset: 28px 0 -55px; display: flex; gap: 20px; align-items: flex-start; justify-content: center; transition: transform .4s var(--em-diu); }
.project-phones .khung-dt { width: 36%; max-width: 186px; flex: none; border-width: 6px; border-radius: 28px; box-shadow: 0 22px 35px -13px #232b2633; }
.project-phones .khung-dt img { border-radius: 20px; }
.project-phones .khung-dt:first-child { transform: translateY(23px) rotate(-6deg); }
.project-phones .khung-dt:last-child { transform: rotate(6deg); }
.project-visual__label { position: absolute; bottom: 16px; left: 18px; background: var(--be-mat); color: var(--muc); border-radius: 7px; padding: 6px 10px; font-size: .6rem; font-weight: 600; z-index: 2; }
.project-game-image { position: absolute; width: 88%; height: auto; max-height: 87%; object-fit: contain; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-2deg); border: 5px solid #fff; border-radius: 10px; box-shadow: 0 14px 30px -10px #232b2638; transition: transform .4s var(--em-diu); }
.project-card__meta { margin-top: 19px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--chu-phu); font-size: .6rem; }
.project-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.project-status i { width: 5px; height: 5px; border-radius: 50%; background: #618048; }
.project-status--soon i { background: #97753c; }
.project-card__title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 11px; }
.project-card__title h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.05em; }
.project-card__title h3 a { text-decoration: none; }
.project-arrow { width: 39px; height: 39px; border: 1px solid var(--vien); display: grid; place-items: center; border-radius: 50%; transition: background .2s, transform .2s; }
.project-arrow:hover { background: var(--nhan); transform: rotate(6deg); }
.project-card__description { margin-top: 8px; font-size: .8rem; color: var(--chu-phu); max-width: 49ch; }
.studio-about { padding-block: 86px 90px; background: #eef0e7; }
.studio-about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 86px; }
.studio-about h2 { margin-top: 25px; font-size: clamp(2.25rem, 3.8vw, 3.4rem); font-weight: 800; letter-spacing: -.06em; line-height: 1.1; }
.studio-about h2 > span { display: block; }
.about-asterisk { display: block; margin-top: 38px; font: 400 8rem/1 sans-serif; color: #b3c482; }
.studio-about__copy { font-size: .92rem; color: var(--chu-phu); line-height: 1.85; }
.studio-principles { margin-top: 34px; }
.studio-principles > div { display: flex; align-items: flex-start; gap: 20px; padding: 19px 0; border-top: 1px solid #cdd3c1; }
.studio-principles > div > span { font-size: .65rem; color: var(--chu-phu); padding-top: 4px; }
.studio-principles h3 { font-family: var(--chu-than); letter-spacing: -.01em; font-size: .86rem; font-weight: 600; }
.studio-principles p { color: var(--chu-phu); font-size: .75rem; line-height: 1.8; margin-top: 7px; }
.chan-trang { border-top: 0; padding-top: 58px; background: var(--nen); }
.chan-trang__trong { grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; }
.chan-trang__thuong-hieu p { font-size: .76rem; max-width: 29ch; margin-top: 18px; }
.chan-trang__cot h2 { font-family: var(--chu-than); font-size: .7rem; font-weight: 600; }
.chan-trang__cot a { font-size: .73rem; }
.chan-trang__cuoi { display: flex; justify-content: space-between; font-size: .63rem; padding-top: 22px; padding-bottom: 25px; }
.sp-hero { padding-top: 40px; }
.sp-hero__trong { gap: 64px; }
.sp-hero h1 { letter-spacing: -.055em; }
.sp-hero__khau-hieu { font-size: 1.05rem; }
.trang-sp--app .sp-hero__hinh { display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 520px; background: var(--sp-nhat); border-radius: 28px; }
.trang-sp--app .sp-hero__hinh .khung-dt--chong { position: static; width: 218px; max-width: 70%; transform: rotate(4deg); }
.trang-sp--app .khung-dt { border-width: 7px; }
.dau-muc-trang h1 { letter-spacing: -.055em; }
.the-sp { border-radius: 18px; }
.the-sp__hinh { min-height: 210px; }
.the-sp__hinh img { object-fit: contain; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-card__image-link:hover .project-phones { transform: translateY(-8px); }
  .project-card__image-link:hover .project-game-image { transform: translate(-50%, -50%) rotate(0deg) scale(1.025); }
}
@media (prefers-color-scheme: dark) {
  :root { --nen: #1d201c; --nen-2: #292d26; --be-mat: #292d26; --muc: #f3f3e9; --chu-phu: #adb4a6; --vien: #3e4538; --nhan: #d3ef80; --nhan-chu: #222520; }
  .studio-mark > span { color: #222520; }
  .collage-backdrop { background: #313c25; }
  .collage-sticker { color: #222520; }
  .studio-hero__cta:hover { background: #d3ef80; color: #222520; }
  .project-visual, .trang-sp--app .sp-hero__hinh { background: var(--sp-toi); }
  .studio-about { background: #282e23; }
  .studio-principles > div { border-color: #444d39; }
  .project-arrow:hover { color: #222520; }
  .project-game-image { border-color: #dddcd3; }
}
@media (max-width: 1100px) {
  .studio-hero { gap: 25px; min-height: 610px; }
  .studio-collage { height: 470px; }
  .collage-phone { width: 165px; }
  .collage-phone--1 { left: 0; }
  .collage-phone--2 { right: 0; }
  .collage-game { width: 255px; }
  .studio-about__inner { gap: 50px; }
  .project-visual { height: 350px; }
}
@media (max-width: 760px) {
  :root { --cao-dau-trang: 74px; }
  .dau-trang__trong { gap: 10px; }
  .studio-mark { font-size: 2rem; }
  .dieu-huong { gap: 0; }
  .dieu-huong a { padding: 9px; font-size: .7rem; }
  .language-switch { padding-left: 10px; gap: 4px; font-size: .66rem; }
  .studio-hero { grid-template-columns: 1fr; padding-top: 34px; padding-bottom: 48px; gap: 40px; min-height: 0; }
  .studio-hero h1 { font-size: clamp(3.3rem, 9.5vw, 5rem); margin-top: 24px; }
  .studio-hero__description { max-width: 41ch; font-size: .9rem; }
  .studio-hero__footnote { margin-top: 22px; }
  .studio-collage { height: 465px; max-width: 510px; width: 100%; margin-inline: auto; }
  .collage-phone { width: 176px; }
  .collage-phone--1 { left: 9%; }
  .collage-phone--2 { right: 5%; }
  .collage-game { right: 0; width: 275px; }
  .collage-sticker { left: 0; bottom: 18px; width: 96px; height: 96px; }
  .collection { padding-block: 55px 66px; }
  .collection-heading { align-items: flex-start; flex-direction: column; gap: 17px; margin-bottom: 25px; }
  .collection-heading > p { max-width: 45ch; }
  .project-grid { gap: 38px 22px; }
  .project-visual { height: 275px; }
  .project-phones { gap: 10px; }
  .project-phones .khung-dt { width: 40%; border-width: 4px; border-radius: 19px; }
  .project-phones .khung-dt img { border-radius: 14px; }
  .project-card__meta { align-items: flex-start; font-size: .58rem; }
  .project-card__title h3 { font-size: 1.4rem; }
  .project-card__description { font-size: .73rem; }
  .studio-about { padding-block: 58px; }
  .studio-about__inner { grid-template-columns: 1fr; gap: 30px; }
  .about-asterisk { display: none; }
  .studio-about__copy { font-size: .88rem; }
  .chan-trang__trong { grid-template-columns: 1fr 1fr; }
  .chan-trang__thuong-hieu { grid-column: 1 / -1; }
  .sp-hero__trong { gap: 32px; }
  .trang-sp--app .sp-hero__hinh { min-height: 500px; }
}
@media (max-width: 480px) {
  .studio-mark i { display: none; }
  .dieu-huong a { padding-inline: 7px; font-size: .66rem; }
  .language-switch { padding-left: 7px; }
  .studio-collage { height: 405px; }
  .collage-phone { width: 151px; }
  .collage-phone--1 { top: 38px; left: 5%; }
  .collage-phone--2 { top: 4px; right: 0; }
  .collage-game { width: 231px; right: -5px; }
  .collage-sticker { width: 82px; height: 82px; font-size: .9rem; bottom: 5px; }
  .collage-star { font-size: 4.5rem; }
  .eyebrow { font-size: .6rem; letter-spacing: .1em; }
  .project-grid { grid-template-columns: 1fr; gap: 35px; }
  .project-visual { height: 332px; }
  .project-phones .khung-dt { width: 38%; max-width: 154px; border-width: 5px; border-radius: 23px; }
  .project-phones .khung-dt img { border-radius: 17px; }
  .project-card__meta { font-size: .6rem; }
  .project-card__title h3 { font-size: 1.65rem; }
  .project-card__description { font-size: .77rem; }
  .studio-divider { font-size: .58rem; }
  .chan-trang__cuoi { gap: 10px; font-size: .56rem; }
}
@media (prefers-reduced-motion: reduce) { .project-phones, .project-game-image, .collage-phone, .project-arrow { transition: none; } }
/* Policy text stays fully visible, including with JavaScript disabled. */
.legal-page, .policy-index { padding-block: 72px 100px; }
.legal-header { max-width: 860px; margin-bottom: 52px; }
.legal-header h1, .policy-index h1 { font: 700 clamp(2.5rem, 6vw, 5rem)/1.06 var(--chu-hien-thi); letter-spacing: -.045em; margin: 18px 0 24px; }
.legal-back { display: inline-block; font-size: .85rem; margin-bottom: 32px; text-decoration: none; }
.legal-summary { font-size: 1.1rem; line-height: 1.8; color: var(--chu-phu); max-width: 680px; }
.legal-date { font-size: .82rem; color: var(--chu-phu); margin-top: 20px; }
.legal-links { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-block: 18px; font-size: .8rem; }
.legal-links a { color: inherit; text-underline-offset: 5px; }
.legal-links [aria-current] { font-weight: 700; }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 740px); gap: 70px; align-items: start; }
.legal-toc { position: sticky; top: 104px; font-size: .8rem; }
.legal-toc p { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; }
.legal-toc ol { padding-left: 20px; }
.legal-toc li { margin-block: 12px; padding-left: 4px; }
.legal-toc a { text-decoration: none; color: var(--chu-phu); line-height: 1.5; }
.legal-toc a:hover { color: var(--muc); text-decoration: underline; }
.legal-content { max-width: 740px; }
.legal-content section { scroll-margin-top: 100px; margin-bottom: 42px; }
.legal-content h2 { display: flex; gap: 18px; align-items: baseline; font-size: 1.3rem; line-height: 1.45; }
.legal-content h2 span { font-size: .72rem; font-weight: 500; color: var(--chu-phu); }
.legal-content p { overflow-wrap: anywhere; }
.legal-contact { border-top: 1px solid var(--vien); padding-top: 24px; }
.legal-contact a { overflow-wrap: anywhere; }
.legal-website-note { font-size: .8rem; }
.policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.policy-grid article { padding: 30px; border: 1px solid var(--vien); border-radius: 16px; }
.policy-grid h2 { font-family: var(--chu-hien-thi); font-size: 1.65rem; }
.policy-grid h2 a { text-decoration: none; }
.policy-grid p { color: var(--chu-phu); line-height: 1.7; }

@media (prefers-reduced-motion: no-preference) {
  .studio-hero__copy { animation: studio-enter .7s cubic-bezier(.2,.7,.3,1) both; }
  .collage-phone--1 { animation: phone-arrive 1s cubic-bezier(.2,.7,.3,1) both; }
  .collage-phone--2 { animation: phone-arrive 1.2s cubic-bezier(.2,.7,.3,1) both; }
  .collage-game { animation: card-arrive 1.3s cubic-bezier(.2,.7,.3,1) both; }
  .collage-star { animation: star-arrive 1.2s cubic-bezier(.2,.7,.3,1) both; }
  .project-card__image-link:hover .project-visual__orb { transform: translate(20px, -15px) scale(1.08); }
  .project-visual__orb { transition: transform .6s ease; }
  .project-arrow:hover { transform: rotate(45deg); }
  .about-asterisk { transition: transform .6s ease; }
  .studio-about:hover .about-asterisk { transform: rotate(90deg); }
}
@keyframes studio-enter { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes phone-arrive { from { opacity: 0; translate: 0 45px; } to { opacity: 1; translate: 0 0; } }
@keyframes card-arrive { from { opacity: 0; translate: -20px 25px; } to { opacity: 1; translate: 0 0; } }
@keyframes star-arrive { from { opacity: 0; rotate: -45deg; scale: .7; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
  .legal-page, .policy-index { padding-block: 40px 64px; }
  .legal-layout, .policy-grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; border-block: 1px solid var(--vien); padding-block: 12px; }
  .legal-header { margin-bottom: 28px; }
  .legal-content h2 { font-size: 1.15rem; gap: 12px; }
  .policy-grid article { padding: 24px; }
}
@media (max-width: 560px) {
  .thuong-hieu span.studio-mark { display: inline-flex; }
  .thuong-hieu .studio-mark > span { display: inline-block; }
}
@media (max-width: 760px) {
  .collage-phone--2 { right: 10%; }
  .collage-backdrop { right: 8%; }
}

@media (min-width: 761px) and (max-width: 1100px) { .collage-backdrop { right: 8%; } }
@media (max-width: 760px) {
  .nav-full { display: none; }
  .nav-short { display: inline; }
  .dieu-huong a { font-size: .75rem; white-space: nowrap; padding-inline: 7px; }
  .khu-lien-he__email { font-size: clamp(.9rem, 4vw, 1.2rem); gap: 8px; max-width: 100%; word-break: normal; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .dau-trang__trong { gap: 6px; }
  .dieu-huong a { font-size: .68rem; padding-inline: 5px; }
  .language-switch { font-size: .6rem; gap: 2px; padding-left: 5px; }
  .studio-mark { font-size: 1.8rem; }
}