/* =========================================================================
   MỚI (06/10/2026): "KÍNH ĐEN" cho insolar.vn — theo video mẫu của chủ doanh nghiệp.
   (1) Đăng nhập / Đăng ký / Quên mật khẩu: thẻ kính đen trên nền khối có vân sáng, ô nhập kiểu gạch chân sáng dần,
       thanh chọn Đăng nhập | Đăng ký có TẤM KÍNH TRƯỢT, chuyển tab có hiệu ứng.
   (2) Ô tìm kiếm trang chủ: thu thành NÚT KÍNH LÚP, chạm vào bung ra (và thu lại khi bỏ trống) — chỉ CSS (:focus-within), không đổi logic tìm.
   Chỉ tác động bên trong html[data-theme="kinh-den"] #ckPanelBody .ckh-auth và #ckHomeSearchWrap — các phần khác giữ nguyên.
   ========================================================================= */

/* nút ✕ của ô tìm: mặc định ẩn ở mọi giao diện */
.ckh-search-x { display: none; }

/* ---------- 1. ĐĂNG NHẬP / ĐĂNG KÝ ---------- */
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth { position: relative; isolation: isolate; border-radius: 26px; padding: 22px 14px 26px; color: #fff; overflow: hidden;
  background: radial-gradient(520px 320px at 12% 0%, #2c2c34 0%, transparent 62%), radial-gradient(480px 340px at 100% 100%, #202027 0%, transparent 62%), #0c0c10; box-shadow: 0 24px 60px -24px rgba(0,0,0,.8); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth::before, html[data-theme="kinh-den"] #ckPanelBody .ckh-auth::after { content: ''; position: absolute; z-index: -1; pointer-events: none; background: linear-gradient(135deg, #2b2b33, #14141a 60%, #0d0d11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); animation: gbDrift 18s ease-in-out infinite alternate; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth::before { width: 62%; height: 38%; left: -14%; top: 8%; clip-path: polygon(0 20%, 66% 0, 100% 44%, 40% 100%, 0 76%); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth::after { width: 56%; height: 36%; right: -12%; bottom: 4%; clip-path: polygon(22% 0, 100% 14%, 80% 100%, 0 68%); animation-duration: 22s; animation-direction: alternate-reverse; }
@keyframes gbDrift { from { transform: translate3d(0,0,0) rotate(0); } to { transform: translate3d(10px,-8px,0) rotate(1.2deg); } }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-auth-head h2 { color: #fff; font-weight: 800; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-auth-head p { color: rgba(255,255,255,.66); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-logo { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }

/* thanh Đăng nhập | Đăng ký với tấm kính trượt */
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-seg { position: relative; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px; gap: 0; margin-top: 4px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-seg::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: linear-gradient(120deg, rgba(255,255,255,.28), rgba(255,255,255,.1)); border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 18px -8px rgba(255,255,255,.4); transition: transform .5s cubic-bezier(.7,0,.2,1); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-seg:has(button:nth-child(2).on)::before { transform: translateX(100%); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-seg button { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; color: rgba(255,255,255,.7); border-radius: 999px; transition: color .3s; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-seg button.on { color: #fff; }

/* thẻ kính chứa form */
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-panel { margin-top: 14px; padding: 18px 16px 16px; border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); animation: gbAuthIn .55s cubic-bezier(.2,.8,.2,1); }
@keyframes gbAuthIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-form { gap: 16px; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-field { color: rgba(255,255,255,.72); font-weight: 600; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-field b { color: #fda4af; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-field small { color: rgba(255,255,255,.5); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-field input, html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-field textarea { background: transparent !important; color: #fff !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.3) !important; border-radius: 0 !important; padding: 9px 2px !important; box-shadow: none !important; outline: 0;
  background-image: linear-gradient(#fff, #fff) !important; background-repeat: no-repeat !important; background-position: left bottom !important; background-size: 0 2px !important; transition: background-size .4s cubic-bezier(.7,0,.2,1); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-field input:focus, html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-field textarea:focus { background-size: 100% 2px !important; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-field input::placeholder { color: rgba(255,255,255,.38); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-btn-primary { background: rgba(255,255,255,.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; transition: background .25s, transform .2s, box-shadow .25s; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-btn-primary:hover:not(:disabled) { background: rgba(255,255,255,.24) !important; transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(255,255,255,.4); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-link { color: #fff; text-decoration: underline; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-note, html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-consent { color: rgba(255,255,255,.7); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-typepick button { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18); color: #fff; border-radius: 16px; transition: background .25s, border-color .25s, transform .2s; }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-typepick button svg { color: rgba(255,255,255,.8); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-typepick button small { color: rgba(255,255,255,.55); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-typepick button.on { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); box-shadow: 0 8px 22px -12px rgba(255,255,255,.5); transform: translateY(-1px); }
html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-consent input { accent-color: #fff; }

/* ---------- 2. Ô TÌM KIẾM KÍNH LÚP (trang chủ) ---------- */
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box { flex: 0 0 40px; width: 40px; height: 40px; transition: flex-basis .5s cubic-bezier(.7,0,.2,1), width .5s cubic-bezier(.7,0,.2,1); cursor: pointer; }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box input { height: 40px; padding-left: 38px; padding-right: 36px; border-radius: 999px; opacity: 0; cursor: pointer; transition: opacity .25s ease, box-shadow .3s, border-color .3s, background .3s; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box > svg, html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box > i { transition: transform .4s cubic-bezier(.7,0,.2,1); }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box::before { content: ''; position: absolute; inset: 0; border-radius: 999px; border: 1px solid currentColor; opacity: .28; pointer-events: none; transition: opacity .3s; }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box:not(:focus-within):not(:has(input:not(:placeholder-shown))):hover > svg { transform: translateY(-50%) scale(1.15) rotate(-8deg); }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box:focus-within, html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box:has(input:not(:placeholder-shown)) { flex: 1 1 auto; width: auto; cursor: text; }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box:focus-within input, html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box:has(input:not(:placeholder-shown)) input { opacity: 1; cursor: text; transition-delay: .15s; }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box:focus-within::before, html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box:has(input:not(:placeholder-shown))::before { opacity: 0; }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) scale(.6); width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(128,128,128,.25); color: inherit; display: none; align-items: center; justify-content: center; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .25s, transform .3s; }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box:focus-within .ckh-search-x, html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box:has(input:not(:placeholder-shown)) .ckh-search-x { display: flex; opacity: 1; transform: translateY(-50%) scale(1); }
@media (prefers-reduced-motion: reduce) { html[data-theme="kinh-den"] #ckPanelBody .ckh-auth::before, html[data-theme="kinh-den"] #ckPanelBody .ckh-auth::after, html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-panel { animation: none; } html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box, html[data-theme="kinh-den"] #ckPanelBody .ckh-auth .ckh-seg::before { transition: none; } }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box > svg, html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box > i { color: #ececf1; }
html[data-theme="kinh-den"] #ckHomeSearchWrap .ckh-search-box input { color: #fff; }
html[data-theme="kinh-den"] .ins-duo { width: 1.2em; height: 1.2em; }