/* Trang khắc tên — dùng token của style-v3.css. --son chỉ ở nút Thêm vào giỏ. Cỡ chữ theo rem. */
@font-face{font-family:'Tilt Warp';src:url(phong/TiltWarp-cnhd.woff) format('woff');font-display:block}

.kt{max-width:1240px;margin:0 auto;padding:0 var(--lech) 40px;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:0 clamp(28px,4vw,64px);align-items:start}
.kt-dau{grid-column:1/-1;padding:28px 0 22px}
.kt-dau h1{font-family:var(--dis);font-size:clamp(1.75rem,3.4vw,2.75rem);font-stretch:112%;font-weight:700;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1.08;margin:0}
.kt-dau p{margin:8px 0 0;color:var(--mo2);font-size:1rem}

.kt-xem{position:sticky;top:12px}
.kt-khung{position:relative;background:var(--phien);aspect-ratio:1/1;overflow:hidden;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.kt-khung canvas{display:block;width:100%;height:100%;cursor:grab;outline:0}
.kt-khung canvas:active{cursor:grabbing}
.kt-khung canvas:focus-visible{outline:2px solid var(--coban);outline-offset:-2px}
.kt-goi{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(250,250,248,.92);
  padding:7px 14px;font-size:.875rem;color:var(--muc);pointer-events:none;white-space:nowrap;transition:opacity .4s}
.kt-goi.an{opacity:0}
.kt-tai{position:absolute;inset:auto 0 50% 0;text-align:center;color:var(--mo2);font-size:.9375rem;pointer-events:none}
.kt-truoc{position:absolute;right:10px;top:10px;height:44px;padding:0 14px;border:1px solid var(--net);background:rgba(250,250,248,.92);
  font:500 .875rem var(--body);color:var(--muc);cursor:pointer}
.kt-truoc:hover{border-color:var(--muc)}
.kt-ghi{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0 0;font-size:.875rem;color:var(--mo2)}
.kt-ghi b{font-weight:600;color:var(--muc);font-size:1rem}

.kt-chon{display:grid;gap:30px;min-width:0}
.kt-muc>h2{font:600 1.125rem/1.3 var(--dis);text-transform:none;letter-spacing:0;font-stretch:100%;margin:0 0 12px}
.kt-muc>h2 span{font-family:var(--tech);font-size:.8125rem;font-weight:500;color:var(--mo);margin-right:8px}

.kt-nhap{position:relative}
#ktTen{width:100%;height:68px;padding:0 64px 0 18px;border:2px solid var(--muc);border-radius:0;background:#fff;color:var(--muc);
  font:400 1.625rem 'Tilt Warp',var(--body);text-transform:uppercase;outline:0}
#ktTen::placeholder{color:rgba(18,20,28,.34);text-transform:none;font:400 1.125rem var(--body)}
#ktTen:focus{border-color:var(--coban);box-shadow:0 0 0 2px var(--coban)}
#ktTen.rung{animation:kt-rung .28s}
@keyframes kt-rung{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.kt-dem{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:500 .8125rem var(--tech);color:var(--mo)}
.kt-bao{min-height:1.5em;margin:8px 0 0;font-size:.9375rem;color:var(--mo2)}
.kt-bao.canh{color:var(--muc);font-weight:500}
.kt-dong{display:flex;gap:8px;margin-top:6px}
.kt-dong[hidden]{display:none}

.kt-mauchu{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:.9375rem}
.kt-mauchu[hidden]{display:none}
.kt-mauchu>div{display:flex;flex-wrap:wrap;gap:6px}
.kt-o{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.kt-o::after{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--o);box-shadow:inset 0 0 0 1px rgba(18,20,28,.2)}
.kt-o[aria-pressed=true]::before{content:'';position:absolute;inset:2px;border-radius:50%;border:2px solid var(--coban)}
.kt-lk{display:block;margin-top:12px;padding:6px 0;border:0;background:none;color:var(--coban);font:500 .9375rem var(--body);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kt-lk[hidden]{display:none}
.kt-chinh{display:flex;gap:18px;align-items:center;margin-top:10px;flex-wrap:wrap}
.kt-chinh[hidden]{display:none}
.kt-chinh-bao{flex:0 0 100%;margin:0;min-height:1.5em;font-size:.9375rem;color:var(--mo2)}
.kt-chinh-bao.canh{color:var(--muc);font-weight:500}
.kt-mui{display:grid;grid-template:"a u b" 48px "l c r" 48px "e d f" 48px/48px 48px 48px;gap:4px}
.kt-mui button{border:1px solid var(--net);background:#fff;font:500 1.25rem var(--body);color:var(--muc);cursor:pointer}
.kt-co{display:grid;gap:6px;flex:1;min-width:150px}
.kt-co button{min-height:44px;border:1px solid var(--net);background:#fff;font:500 .9375rem var(--body);color:var(--muc);cursor:pointer}
.kt-mui button:hover,.kt-co button:hover{border-color:var(--muc)}
.kt-chip{min-height:44px;padding:0 18px;border:1px solid var(--net);background:transparent;font:500 .9375rem var(--body);color:var(--muc);cursor:pointer}
.kt-chip:hover{border-color:var(--muc)}
.kt-chip[aria-pressed=true]{background:var(--muc);border-color:var(--muc);color:var(--giay)}

.kt-mau-nut{display:flex;align-items:center;gap:14px;width:100%;padding:8px 14px 8px 8px;border:1px solid var(--net);background:#fff;color:var(--muc);text-align:left;cursor:pointer}
.kt-mau-nut:hover{border-color:var(--muc)}
.kt-mau-nut img{flex:none;width:76px;height:76px;display:block}
.kt-mau-chu{flex:1;min-width:0}
.kt-mau-chu b{display:block;font:600 1.0625rem/1.3 var(--body)}
.kt-mau-chu small{display:block;margin-top:2px;font-size:.875rem;color:var(--mo2)}
.kt-mau-doi{flex:none;color:var(--coban);font:500 .9375rem var(--body);text-decoration:underline;text-underline-offset:3px}

.kt-hop.kt-kho{width:min(820px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px 24px 24px}
.kt-kho .kt-da-tieu{margin-bottom:16px}
.kt-kho-ds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;gap:10px}
.kt-the{display:flex;flex-direction:column;padding:0;border:1px solid var(--net);background:#fff;cursor:pointer;color:var(--muc);text-align:center}
.kt-the:hover{border-color:var(--muc)}
.kt-the[aria-pressed=true]{border-color:var(--coban);box-shadow:inset 0 0 0 2px var(--coban)}
.kt-the-anh{display:block;aspect-ratio:1/1;padding:6px}
.kt-the-anh img{display:block;width:100%;height:100%;object-fit:contain}
.kt-the-ten{display:block;min-height:2.6em;padding:0 6px 10px;font:500 .9375rem/1.3 var(--body)}
.kt-the-ten small{display:block;font-size:.875rem;font-weight:400;color:var(--mo2)}

.kt-loai{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kt-loai button{min-height:84px;padding:12px 14px;border:1px solid var(--net);background:transparent;text-align:left;cursor:pointer;color:var(--muc);
  display:flex;flex-direction:column;gap:4px;justify-content:center}
.kt-loai button:hover{border-color:var(--muc)}
.kt-loai button[aria-pressed=true]{border-color:var(--coban);box-shadow:inset 0 0 0 2px var(--coban)}
.kt-loai span{font:600 1.0625rem var(--body)}
.kt-loai b{font:500 .9375rem var(--body);color:var(--mo2)}

.kt-cta{display:grid;gap:10px}
.kt-cta-hang{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.kt-gia{font:700 1.5rem var(--dis);white-space:nowrap}
#ktThem{flex:1;min-height:60px;border:0;background:var(--son);color:#fff;font:600 1.0625rem var(--body);cursor:pointer}
#ktThem:hover{background:#ad2e22}
#ktThem[aria-disabled=true]{background:rgba(18,20,28,.2);color:var(--mo2)}
#ktThem.da-them{background:var(--muc)}
.kt-sac{font-size:.8125rem;color:var(--mo);margin:0}

.kt-dalam-khoi{display:grid;gap:10px}
.kt-dalam-khoi[hidden]{display:none}
.kt-dalam-khoi b{font:600 1rem var(--body)}
.kt-dalam-khoi>div{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.kt-dalam{flex:none;width:112px;padding:0;border:1px solid var(--net);background:#fff;cursor:pointer;color:var(--muc)}
.kt-dalam:hover{border-color:var(--muc)}
.kt-dalam img{display:block;width:100%;aspect-ratio:1/1}
.kt-dalam span{display:block;padding:6px;font:400 .8125rem/1.25 'Tilt Warp',var(--body);overflow-wrap:anywhere}

.kt-hop{width:min(440px,calc(100vw - 32px));padding:26px 24px 22px;border:0;background:var(--giay);color:var(--muc)}
.kt-hop::backdrop{background:rgba(18,20,28,.55)}
.kt-dong-x{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:none;font-size:1.125rem;color:var(--muc);cursor:pointer}
.kt-hoi-chu{margin:0;font-size:1rem;text-align:center}
.kt-hoi-chu b{font-weight:600}
.kt-hoi-ten{display:flex;flex-direction:column;align-items:center;margin:12px 0;padding:14px 10px;background:var(--phien);font:400 1.75rem/1.2 'Tilt Warp',var(--body);text-align:center;overflow-wrap:anywhere}
.kt-hoi-canh{margin:10px 0 0;font-size:.875rem;color:var(--mo2);text-align:center}
.kt-hop-nut{display:grid;gap:8px;margin-top:18px}
.kt-nut{min-height:52px;padding:0 14px;border:1px solid var(--muc);background:transparent;color:var(--muc);font:600 1rem var(--body);cursor:pointer}
.kt-nut{text-wrap:balance}
@media (max-width:26.25em){.kt-hop{padding:22px 18px 18px}.kt-nut{padding:0 6px;font-size:.9375rem}}
.kt-nut.chinh{background:var(--son);border-color:var(--son);color:#fff}
.kt-hop-nut .kt-lk{margin:6px auto 0}
.kt-da-tieu{margin:0 0 14px;font:600 1.125rem var(--dis)}
.kt-da-mon{display:flex;gap:14px;align-items:center}
.kt-da-mon img{flex:none;background:var(--phien)}
.kt-da-mon b{display:block;font:400 1.375rem/1.2 'Tilt Warp',var(--body);overflow-wrap:anywhere}
.kt-da-mon span{display:block;margin-top:4px;font-size:.875rem;color:var(--mo2)}

@media (max-width:53.75em){
  .kt{grid-template-columns:minmax(0,1fr);padding-bottom:120px}
  .kt-dau{padding:16px 0 12px}
  .kt-dau p{display:none}
  .kt-xem{top:0;z-index:5;background:var(--giay);margin:0 calc(var(--lech) * -1);padding:0}
  .kt-khung{aspect-ratio:auto;height:min(46vh,100vw);height:min(46dvh,100vw)}
  .kt-khung canvas{width:auto;height:100%;margin:0 auto;aspect-ratio:1/1}
  .kt-ghi{padding:8px var(--lech) 10px}
  .kt-ghi span:last-child{display:none}
  .kt-chon{margin-top:18px}
  .kt-muc,#ktTen{scroll-margin-top:calc(min(46dvh,100vw) + 56px)}   /* khung xem dính trên cùng: đừng để ô tên trôi xuống dưới nó */
  .kt-cta{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--giay);border-top:1px solid var(--net);
    padding:10px var(--lech) calc(10px + env(safe-area-inset-bottom))}
  .kt-gia{font-size:1.25rem}
  #ktThem{min-height:54px}
  .kt-sac{display:none}
  body:has(#cnhdGioBar) .kt-cta{bottom:58px}
}
@media (max-width:38.75em){.kt-kho-ds{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.kt-hop.kt-kho{padding:18px 12px 14px}.kt-the-ten{font-size:.8125rem;padding:0 2px 8px}.kt-the-ten small{font-size:.8125rem}}
@media (prefers-reduced-motion:reduce){#ktTen.rung{animation:none}.kt-goi{transition:none}}