/* DOKIMI 3D Showroom */
:root { --brown: #3B2412; --gold: #F6C93C; --cream: #FFF8E8; --ink: #2A1A0C; font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #FFF3DA; color: var(--ink); -webkit-tap-highlight-color: transparent; }
#dks-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; outline: 0; }
button { font: inherit; }
[hidden] { display: none !important; }

/* Màn hình tải */
.dks-load { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 30%, #FFF6D6, #F6C93C 75%); transition: opacity .55s, transform .55s; }
.dks-load.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.dks-load-in { max-width: 560px; text-align: center; }
.dks-load-doki { height: 180px; width: auto; animation: dksBob 2.4s ease-in-out infinite; filter: drop-shadow(0 12px 18px rgba(59,36,18,.3)); }
@keyframes dksBob { 50% { transform: translateY(-10px) rotate(-2deg); } }
.dks-load h1 { margin: 8px 0 6px; font-size: clamp(26px, 5vw, 40px); color: var(--brown); font-weight: 900; letter-spacing: -.01em; }
.dks-load-sub { margin: 0 0 18px; color: #5A3A22; font-size: 16px; line-height: 1.5; }
.dks-bar { height: 10px; border-radius: 99px; background: rgba(59,36,18,.15); overflow: hidden; }
.dks-bar i { display: block; height: 100%; width: 3%; background: var(--brown); border-radius: 99px; transition: width .3s; }
.dks-load-st { margin: 8px 0 16px; font-size: 13.5px; color: #5A3A22; }
.dks-go { padding: 16px 34px; border: 0; border-radius: 18px; background: var(--brown); color: var(--gold); font-size: 19px; font-weight: 900; cursor: pointer; box-shadow: 0 6px 0 #1E1209; transition: transform .15s; }
.dks-go:not(:disabled):hover { transform: translateY(-2px); }
.dks-go:disabled { opacity: .45; cursor: wait; }
.dks-help { list-style: none; margin: 18px 0 0; padding: 0; font-size: 13px; color: #5A3A22; line-height: 1.6; }

/* Thanh trên */
.dks-top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; pointer-events: none; }
.dks-top > * { pointer-events: auto; }
.dks-back, .dks-tools button, .dks-tools a, .dks-zone-now { height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 14px; border: 0; background: rgba(255,248,232,.94); color: var(--brown); font-weight: 800; font-size: 14.5px; text-decoration: none; box-shadow: 0 4px 14px rgba(59,36,18,.18); backdrop-filter: blur(6px); cursor: pointer; white-space: nowrap; }
.dks-zone-now { margin: 0 auto; background: var(--brown); color: #fff; border-bottom: 3px solid var(--c, var(--gold)); cursor: default; }
.dks-tools { display: flex; gap: 6px; }
.dks-tools button { padding: 0 12px; }
#dks-tour.on { background: var(--gold); }
#dks-cart b { min-width: 22px; height: 22px; border-radius: 99px; background: #E8452C; color: #fff; font-size: 12px; display: grid; place-items: center; padding: 0 5px; }
#dks-cart.pop { animation: dksPop .5s; }
@keyframes dksPop { 40% { transform: scale(1.18); } }

/* Bản đồ nhỏ */
#dks-map { position: fixed; z-index: 9; right: 12px; top: calc(64px + env(safe-area-inset-top)); width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 6px 18px rgba(59,36,18,.25); cursor: pointer; }

/* Thanh các khu */
.dks-zones { position: fixed; z-index: 9; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 8px; padding: 6px 12px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.dks-zones::-webkit-scrollbar { display: none; }
.dks-zones button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; border-radius: 99px; background: rgba(255,248,232,.95); color: var(--brown); font-weight: 800; font-size: 14px; box-shadow: 0 4px 12px rgba(59,36,18,.2), inset 0 -3px 0 var(--c, var(--gold)); cursor: pointer; transition: transform .15s, background .15s; }
.dks-zones button:hover { transform: translateY(-2px); }
.dks-zones button.on { background: var(--brown); color: #fff; }

/* Chú thích khi rê chuột */
.dks-tip { position: fixed; z-index: 12; left: 0; top: 0; pointer-events: none; max-width: 260px; padding: 8px 12px; border-radius: 12px; background: rgba(59,36,18,.94); color: #fff; font-size: 13px; line-height: 1.35; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.dks-tip b { display: block; }
.dks-tip span { color: var(--gold); font-weight: 800; }

/* Phụ đề lời thoại (Doki / tư vấn viên) – kính mờ trong suốt, không che cảnh */
.dks-say { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); bottom: calc(68px + env(safe-area-inset-bottom)); width: min(620px, calc(100vw - 24px)); display: flex; align-items: flex-start; gap: 10px; padding: 9px 36px 10px 10px; border-radius: 18px; background: rgba(24,15,8,.46); color: #fff; border: 1px solid rgba(255,255,255,.14); border-left: 3px solid var(--c, var(--gold)); box-shadow: 0 8px 24px rgba(0,0,0,.18); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); animation: dksIn .3s ease; pointer-events: auto; }
.dks-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255,248,232,.92); box-shadow: 0 0 0 2px var(--c, var(--gold)); }
.dks-av img { width: 46px; height: auto; margin-top: 6px; }
.dks-av img.ph { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 50% 12%; }
.dks-av i { font-style: normal; font-weight: 900; font-size: 18px; color: #fff; width: 100%; height: 100%; display: grid; place-items: center; background: var(--c, var(--gold)); }
.dks-say-in { min-width: 0; flex: 1; }
.dks-say-in b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--c, var(--gold)); filter: brightness(1.35); margin-bottom: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.dks-say-in p { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; max-height: 4.4em; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.dks-say-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
@keyframes dksIn { from { opacity: 0; transform: translate(-50%, 8px); } }

/* Cần điều khiển (điện thoại) */
.dks-joy { display: none; position: fixed; z-index: 9; left: 22px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 116px; height: 116px; border-radius: 50%; background: rgba(255,248,232,.45); border: 2px solid rgba(59,36,18,.25); touch-action: none; backdrop-filter: blur(3px); }
.dks-joy i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: var(--brown); box-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 -4px 0 #1E1209; transition: transform .08s; }
.dks-joy.on i { transition: none; background: #5A3A22; }
@media (pointer: coarse) { body.started .dks-joy { display: block; } }

/* Bảng sản phẩm */
.dks-panel { position: fixed; z-index: 20; right: 14px; top: calc(66px + env(safe-area-inset-top)); max-height: calc(100vh - 150px); width: min(380px, calc(100vw - 28px)); display: flex; flex-direction: column; background: rgba(255,248,232,.84); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255,255,255,.6); border-radius: 24px; box-shadow: 0 18px 50px rgba(59,36,18,.35); overflow: hidden; transform: translateX(30px); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.dks-panel.on { transform: none; opacity: 1; }
.dks-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: var(--brown); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.dks-p-img { position: relative; flex: 0 0 auto; background: #fff; display: flex; flex-direction: column; }
.dks-p-img > img { display: block; width: 100%; height: 220px; object-fit: contain; padding: 10px 50px; box-sizing: border-box; }
.dks-p-gal { display: flex; gap: 6px; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; }
.dks-p-gal:empty { display: none; }
.dks-p-gal::-webkit-scrollbar { display: none; }
.dks-p-gal button { flex: 0 0 auto; width: 42px; height: 42px; padding: 2px; border: 2px solid rgba(59,36,18,.15); border-radius: 10px; background: #fff; cursor: pointer; }
.dks-p-gal button.on { border-color: var(--brown); }
.dks-p-gal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dks-p-body { flex: 1; overflow: auto; padding: 16px 18px 18px; }
.dks-p-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dks-p-tags .t { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; }
.t-in { background: #E6F6EB; color: #1E7A3C; } .t-out { background: #FDE8E6; color: #B3261E; } .t-stop { background: #5F5F5F; color: #fff; } .t-soon { background: #E3F1FB; color: #1B6FA8; } .t-pre { background: #F1E9FB; color: #6B3FA0; } .t-vat { background: var(--gold); color: var(--brown); }
.t-z { background: #fff; color: var(--brown); box-shadow: inset 0 0 0 2px var(--c); }
.dks-p-body h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; color: var(--brown); }
.dks-p-price { font-size: 22px; font-weight: 900; color: #C2410C; margin-bottom: 8px; }
.dks-p-short { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #5A3A22; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dks-p-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dks-b { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 10px; border: 0; border-radius: 14px; font-weight: 800; font-size: 14.5px; text-decoration: none; cursor: pointer; text-align: center; }
.dks-b[hidden] { display: none; }
.dks-b-360 { background: #fff; color: var(--brown); box-shadow: inset 0 0 0 2px #E9C98A; }
.dks-b-cart { background: var(--brown); color: var(--gold); }
.dks-b-buy { background: #E8452C; color: #fff; }
.dks-b-view { grid-column: 1 / -1; background: transparent; color: var(--brown); text-decoration: underline; min-height: 38px; }
.dks-b:disabled { opacity: .6; }
.dks-p-msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 13.5px; font-weight: 600; }
.dks-p-msg a { color: #C2410C; }

/* Xem 360° */
.dks-inspect { position: fixed; z-index: 19; left: 50%; top: calc(66px + env(safe-area-inset-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 99px; background: rgba(59,36,18,.92); color: #fff; font-size: 13px; white-space: nowrap; }
.dks-inspect button { height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--gold); color: var(--brown); font-weight: 800; cursor: pointer; }
body.inspecting .dks-zones, body.inspecting #dks-map, body.inspecting .dks-joy { opacity: .25; pointer-events: none; }

@media (max-width: 700px) {
	.dks-back { padding: 0 13px; font-size: 18px; } .dks-back span { display: none; }
	.dks-tools button span { display: none; }
	.dks-zone-now { font-size: 13px; padding: 0 10px; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; }
	.dks-tools { gap: 4px; } .dks-tools button, .dks-tools a { padding: 0 9px; height: 38px; }
	#dks-hq, #dks-fs { display: none !important; }
	#dks-map { width: 108px; height: 108px; top: calc(58px + env(safe-area-inset-top)); }
	.dks-panel { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); top: auto; width: auto; max-height: 60vh; border-radius: 22px; transform: translateY(40px); }
	.dks-p-img > img { height: 150px; }
	.dks-p-body { padding: 12px 14px 14px; }
	.dks-p-body h2 { font-size: 16px; }
	.dks-p-price { font-size: 19px; margin-bottom: 4px; }
	.dks-p-short { font-size: 13px; -webkit-line-clamp: 2; margin-bottom: 10px; }
	.dks-b { min-height: 42px; font-size: 14px; }
	.dks-x { width: 34px; height: 34px; font-size: 22px; }
	/* điện thoại: phụ đề lên trên (cạnh bản đồ) để không đè cần điều khiển / bảng sản phẩm */
	.dks-say { left: 8px; transform: none; top: calc(58px + env(safe-area-inset-top)); bottom: auto; width: calc(100vw - 132px); padding: 7px 30px 8px 8px; border-radius: 14px; }
	@keyframes dksIn { from { opacity: 0; transform: translateY(-6px); } }
	.dks-av { width: 30px; height: 30px; }
	.dks-av img { width: 36px; }
	.dks-av i { font-size: 14px; }
	.dks-say-in b { font-size: 11px; }
	.dks-say-in p { font-size: 13px; line-height: 1.4; max-height: 5.6em; }
	body.panel-on .dks-zones, body.panel-on .dks-joy { opacity: 0; pointer-events: none; }
	body.inspecting .dks-panel { opacity: 0; pointer-events: none; }
	.dks-inspect { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); }
	.dks-inspect span { display: none; }
}


/* Phong cách công nghệ trắng – xanh neon */
body.dks-tech { --brown: #0E1B2A; --gold: #38D6FF; --cream: #F3F7FB; --ink: #0E1B2A; background: #E9EFF5; }
body.dks-tech .dks-load { background: radial-gradient(circle at 50% 30%, #FFFFFF, #CFE6F5 60%, #9CCBEA); }
body.dks-tech .dks-load h1 { color: #0E1B2A; }
body.dks-tech .dks-load-sub, body.dks-tech .dks-load-st, body.dks-tech .dks-help { color: #2E4A63; }
body.dks-tech .dks-go { background: #0E1B2A; color: #6FE6FF; box-shadow: 0 6px 0 #050C14, 0 0 24px rgba(56,214,255,.45); }
body.dks-tech .dks-bar i { background: linear-gradient(90deg, #38D6FF, #0E1B2A); }
body.dks-tech .dks-back, body.dks-tech .dks-tools button, body.dks-tech .dks-tools a { background: rgba(255,255,255,.82); color: #0E1B2A; box-shadow: 0 4px 14px rgba(14,27,42,.14), inset 0 0 0 1px rgba(56,214,255,.35); }
body.dks-tech .dks-zone-now { background: rgba(14,27,42,.88); }
body.dks-tech .dks-zones button { background: rgba(255,255,255,.88); color: #0E1B2A; box-shadow: 0 4px 12px rgba(14,27,42,.14), inset 0 -3px 0 var(--c, #38D6FF); }
body.dks-tech .dks-zones button.on { background: #0E1B2A; color: #fff; }
body.dks-tech #dks-map { box-shadow: 0 6px 18px rgba(14,27,42,.2), 0 0 0 2px rgba(56,214,255,.5); }
body.dks-tech .dks-say { background: rgba(10,24,40,.5); }
body.dks-tech .dks-panel { background: rgba(243,247,251,.86); }
body.dks-tech .dks-p-price { color: #0B6FA4; }
body.dks-tech .dks-b-cart { background: #0E1B2A; color: #6FE6FF; }
body.dks-tech .dks-b-360 { box-shadow: inset 0 0 0 2px #9FDDF5; }
body.dks-tech .dks-joy { background: rgba(255,255,255,.45); border-color: rgba(56,214,255,.5); }
body.dks-tech .dks-joy i { background: #0E1B2A; box-shadow: 0 4px 10px rgba(0,0,0,.3), 0 0 12px rgba(56,214,255,.6); }
body.dks-tech .dks-inspect { background: rgba(14,27,42,.92); }

/* Số khách đang xem */
.dks-online { position: fixed; z-index: 10; left: 50%; transform: translateX(-50%); top: calc(58px + env(safe-area-inset-top)); padding: 4px 12px; border-radius: 99px; background: rgba(31,21,14,.72); color: #FFF6D6; font-size: 12.5px; font-weight: 700; pointer-events: none; }
@media (max-width: 700px) { .dks-online { top: auto; bottom: calc(66px + env(safe-area-inset-bottom)); } }