.lat-hinh{--lat-hinh-face:#fbf4e4;--lat-hinh-face-ink:#2a1c19;--lat-hinh-face-muted:#2a1c199e;--lat-hinh-match:#2f7a55;border:1px solid var(--tro-choi-line);background:var(--tro-choi-paper-soft);border-radius:20px;gap:.9rem;max-width:900px;margin:2rem auto 0;padding:clamp(.9rem,3.5vw,1.8rem);display:grid}html[data-theme=light] .lat-hinh{--lat-hinh-face:#fffdf7;--lat-hinh-match:#1f6a45}.lat-hinh__preview{border:1px dashed var(--tro-choi-gold);color:var(--tro-choi-gold);border-radius:12px;margin:0;padding:.6rem .9rem;font-size:.92rem;font-weight:700}.lat-hinh__sizes{border:0;flex-wrap:wrap;justify-content:center;gap:.5rem;min-width:0;margin:0;padding:0;display:flex}.lat-hinh__sizes legend{width:100%;color:var(--tro-choi-muted);text-align:center;margin-bottom:.5rem;padding:0;font-size:.9rem;font-weight:700}.lat-hinh__sizes label{border:1px solid var(--tro-choi-line);min-height:44px;color:var(--tro-choi-ink);background:var(--tro-choi-paper);cursor:pointer;border-radius:999px;align-items:center;padding:.5rem 1.1rem;font-weight:800;display:inline-flex;position:relative}.lat-hinh__sizes label.is-on{border-color:var(--tro-choi-gold);color:var(--tro-choi-gold);box-shadow:inset 0 0 0 1px var(--tro-choi-gold)}.lat-hinh__sizes input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.lat-hinh__sizes label:has(input:focus-visible){outline:3px solid var(--tro-choi-son);outline-offset:2px}.lat-hinh__title{font:600 clamp(1.2rem, 4.2vw, 1.55rem) / 1.3 var(--font-serif,Lora, "Lora fallback", Georgia, serif);text-align:center;margin:.4rem 0 0}.lat-hinh__status{color:var(--tro-choi-copy);font-variant-numeric:tabular-nums;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;margin:0;font-size:.95rem;font-weight:700;display:flex}.lat-hinh__grid{grid-template-columns:repeat(var(--lat-hinh-cols,4), minmax(0, 1fr));gap:clamp(.4rem,1.6vw,.8rem);width:100%;max-width:640px;margin:0 auto;display:grid}.lat-hinh__grid--12{--lat-hinh-cols:6;max-width:860px}@media (width<=520px){.lat-hinh__grid--12{--lat-hinh-cols:4}}.lat-hinh__card{aspect-ratio:3/4;width:100%;color:inherit;font:inherit;cursor:pointer;perspective:900px;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:14px;padding:0;display:block;position:relative}.lat-hinh__card[aria-disabled=true]{cursor:default}.lat-hinh__card:focus-visible{outline:3px solid var(--tro-choi-son);outline-offset:3px}.lat-hinh__inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--lat-hinh-flip,.36s) cubic-bezier(.3, .7, .3, 1);display:block;position:relative}.lat-hinh__card.is-up .lat-hinh__inner{transform:rotateY(180deg)}.lat-hinh__back,.lat-hinh__face{backface-visibility:hidden;transition:visibility 0s linear calc(var(--lat-hinh-flip,.36s) / 2);border-radius:14px;position:absolute;inset:0}.lat-hinh__face,.lat-hinh__card.is-up .lat-hinh__back{visibility:hidden}.lat-hinh__card.is-up .lat-hinh__face{visibility:visible}.lat-hinh__back{background:radial-gradient(circle,#f3d58a 0 9%,#0000 9.5%),radial-gradient(circle,#0000 0 17%,#f3d58ad9 17.5% 19.5%,#0000 20%),repeating-linear-gradient(45deg,#ffe6aa17 0 6px,#0000 6px 12px),linear-gradient(160deg,#c62f3f,#8f1d2b);border:2px solid #e8c56a;box-shadow:inset 0 0 0 4px #a8202f,inset 0 0 0 5px #f3d58a8c,0 4px 12px #00000047}.lat-hinh__card:not([aria-disabled=true]):hover .lat-hinh__back{border-color:#f6dc95}.lat-hinh__face{color:var(--lat-hinh-face-ink);background:var(--lat-hinh-face);border:2px solid #2a1c192e;grid-template-rows:minmax(0,1fr) auto auto;place-items:center;padding:6% 4% 7%;display:grid;transform:rotateY(180deg);box-shadow:0 4px 12px #00000038}.lat-hinh__card.is-matched .lat-hinh__face{border-color:var(--lat-hinh-match);box-shadow:inset 0 0 0 2px var(--lat-hinh-match), 0 4px 12px #00000038}.lat-hinh__art{width:100%;max-width:120px;height:100%;min-height:0}.lat-hinh__name{font-size:clamp(.82rem,2.8vw,1.1rem);font-weight:800;line-height:1.15}.lat-hinh__chi{color:var(--lat-hinh-face-muted);font-size:clamp(.68rem,2.2vw,.85rem);font-weight:700;line-height:1.2}.lat-hinh__message{min-height:1.6em;color:var(--tro-choi-copy);text-align:center;margin:0;line-height:1.6}.lat-hinh__message--quiet{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;min-height:0;position:absolute;overflow:hidden}.lat-hinh__done{border-top:1px solid var(--tro-choi-line);text-align:center;justify-items:center;gap:.6rem;padding-top:1rem;display:grid}.lat-hinh__done h3{color:var(--tro-choi-gold);font:600 clamp(1.5rem, 5.5vw, 2rem) / 1.2 var(--font-serif,Lora, "Lora fallback", Georgia, serif);margin:0}.lat-hinh__done h3:focus{outline:none}.lat-hinh__done p{margin:0;line-height:1.6}.lat-hinh__record{color:var(--lat-hinh-match);font-weight:800}html:not([data-theme=light]) .lat-hinh__record{color:#7fd3a6}.lat-hinh__note{color:var(--tro-choi-muted);text-align:center;margin:0;font-size:.92rem;line-height:1.55}.lat-hinh__actions{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.lat-hinh__primary,.lat-hinh__secondary{min-height:48px;font:inherit;cursor:pointer;border-radius:999px;padding:.7rem 1.4rem;font-weight:800}.lat-hinh__primary{color:#fff8e6;background:linear-gradient(#c62f3f,#8f1d2b);border:0}.lat-hinh__secondary{border:1px solid var(--tro-choi-line);color:var(--tro-choi-ink);background:var(--tro-choi-paper)}.lat-hinh__primary:focus-visible,.lat-hinh__secondary:focus-visible{outline:3px solid var(--tro-choi-son);outline-offset:2px}@media (prefers-reduced-motion:reduce){.lat-hinh__inner,.lat-hinh__back,.lat-hinh__face{transition:none}}