/* =====================================================================
   PK UI - Shared design system
   Gộp tất cả CSS .pk-* (post/menu/recharge/withdraw/account/random/views)
   và .tablinks (banner) để gọn file PHP, cache 1 lần trên browser.
   ===================================================================== */

:root{
  --pk-red:#ef4444;
  --pk-red-dark:#dc2626;
  --pk-red-soft:#fff5f5;
  --pk-text:#1f2937;
  --pk-text-soft:#4b5563;
  --pk-border:#f1f5f9;
  --pk-shadow:0 10px 30px -10px rgba(239,68,68,.18);
}

/* ===== Layout / Wrapper ===== */
.pk-wrap{max-width:72rem;margin:0 auto;padding:1.25rem .75rem;min-height:80vh}
.pk-wrap-wide{max-width:80rem;margin:0 auto;padding:1.5rem .75rem;min-height:80vh}
@media(min-width:768px){
  .pk-wrap{padding:1.5rem 1rem}
  .pk-wrap-wide{padding:1.5rem 1rem}
}

.pk-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:#6b7280;margin-bottom:1.25rem;flex-wrap:wrap}
.pk-breadcrumb a{display:inline-flex;align-items:center;gap:.4rem;color:#6b7280;transition:color .2s}
.pk-breadcrumb a:hover{color:var(--pk-red)}
.pk-breadcrumb .sep{color:#cbd5e1;font-size:.625rem}
.pk-breadcrumb .current{color:#1f2937;font-weight:600}

/* ===== Card & Header ===== */
.pk-card{background:#fff;border-radius:14px;box-shadow:var(--pk-shadow);overflow:hidden;border:1px solid var(--pk-border);margin-bottom:1rem}
.pk-head{position:relative;background:linear-gradient(135deg,#ef4444 0%,#dc2626 60%,#b91c1c 100%);color:#fff;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;overflow:hidden}
.pk-head::before{content:"";position:absolute;top:-40%;right:-10%;width:240px;height:240px;background:radial-gradient(circle,rgba(255,255,255,.15),transparent 70%);border-radius:50%;pointer-events:none}
.pk-head::after{content:"";position:absolute;bottom:-50%;left:30%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);border-radius:50%;pointer-events:none}
.pk-head-icon{position:relative;width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.4rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.pk-head-text h2{margin:0;font-size:1.15rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;position:relative}
.pk-head-text p{margin:.2rem 0 0;font-size:.8rem;color:rgba(255,255,255,.85);position:relative}

.pk-body{padding:1.25rem 1.5rem 1.5rem}

/* ===== Grid & Sidebar ===== */
.pk-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:1024px){.pk-grid{grid-template-columns:220px 1fr}}
.pk-grid--detail{grid-template-columns:1fr;margin-bottom:1rem;gap:1rem}
@media(min-width:1024px){.pk-grid--detail{grid-template-columns:1fr 1fr}}

.pk-sidebar .pk-card{margin-bottom:.75rem;overflow:visible}
.pk-avatar{position:relative;text-align:center;padding:1.25rem 1rem .75rem}
.pk-avatar-img{width:72px;height:72px;border-radius:50%;border:3px solid var(--pk-red);padding:3px;background:#fff;display:inline-block;margin-bottom:.5rem}
.pk-avatar-img img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.pk-avatar-name{font-weight:700;color:var(--pk-text);font-size:.92rem;margin-bottom:.1rem}
.pk-avatar-id{font-size:.72rem;color:#9ca3af;font-weight:500}
.pk-avatar-id span{cursor:pointer;color:var(--pk-red);margin-left:.25rem}
.pk-avatar-id span:hover{text-decoration:underline}
.pk-balance{background:linear-gradient(135deg,#fef2f2 0%,#fff 100%);border-top:1px solid var(--pk-border);padding:.85rem 1rem;display:flex;justify-content:space-between;align-items:center}
.pk-balance-label{font-size:.7rem;color:#6b7280;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pk-balance-value{font-size:1.25rem;font-weight:800;color:var(--pk-red)}
.pk-balance-value small{font-size:.65em;font-weight:600}

/* ===== Nav menu (sidebar) ===== */
.pk-nav-group{margin-bottom:.5rem}
.pk-nav-group-title{font-size:.65rem;font-weight:800;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;padding:.5rem .85rem .25rem}
.pk-nav-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:10px;margin:.15rem .5rem;color:var(--pk-text-soft);font-size:.875rem;font-weight:500;transition:all .2s;text-decoration:none}
.pk-nav-item:hover{background:var(--pk-red-soft);color:var(--pk-red)}
.pk-nav-item.active{background:var(--pk-red-soft);color:var(--pk-red);font-weight:600}
.pk-nav-item i{width:22px;height:22px;border-radius:6px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;transition:all .2s}
.pk-nav-item:hover i,.pk-nav-item.active i{background:var(--pk-red);color:#fff}

/* ===== Info rows (profile) ===== */
.pk-info-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px dashed var(--pk-border)}
.pk-info-row:last-child{border-bottom:none}
.pk-info-label{color:#9ca3af;font-size:.82rem;font-weight:500}
.pk-info-value{color:var(--pk-text);font-size:.9rem;font-weight:600}
.pk-info-value.red{color:var(--pk-red)}

/* ===== Buttons ===== */
.pk-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.25rem;border:none;border-radius:10px;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none}
.pk-btn-red{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff;box-shadow:0 4px 14px rgba(239,68,68,.35)}
.pk-btn-red:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(239,68,68,.45);color:#fff}
.pk-btn-gray{background:#f3f4f6;color:#374151}
.pk-btn-gray:hover{background:#e5e7eb;color:#111827}
.pk-btn-dark{background:#374151;border-color:#374151;color:#fff}
.pk-btn-dark:hover{background:#1f2937;border-color:#1f2937;box-shadow:0 4px 12px -2px rgba(0,0,0,.25);transform:translateY(-1px)}
.pk-btn-block{width:100%}
.pk-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.25rem}
@media(max-width:480px){.pk-btn-row{grid-template-columns:1fr}}

/* ===== Form / Field / Input ===== */
.pk-form{max-width:540px}
.pk-form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:900px){.pk-form-grid{grid-template-columns:1.1fr .9fr}}
.pk-field{margin-bottom:1rem}
.pk-label{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;color:var(--pk-text-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.45rem}
.pk-label i{color:var(--pk-red);font-size:.8rem}
.pk-input{width:100%;height:46px;padding:0 1rem;border:1.5px solid var(--pk-border);border-radius:10px;font-size:.92rem;color:var(--pk-text);background:#fafafa;transition:all .2s;outline:none}
.pk-input:focus{border-color:var(--pk-red);background:#fff;box-shadow:0 0 0 4px rgba(239,68,68,.08)}
.pk-input::placeholder{color:#cbd5e1}
.pk-input option{color:var(--pk-text)}
.pk-input option.tw-text-red{color:var(--pk-red);font-weight:600}
.pk-textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--pk-border);border-radius:10px;font-size:.9rem;color:var(--pk-text);background:#fafafa;transition:all .2s;outline:none;resize:vertical;min-height:100px;font-family:inherit}
.pk-textarea:focus{border-color:var(--pk-red);background:#fff;box-shadow:0 0 0 4px rgba(239,68,68,.08)}

/* Element UI-style inputs (account filter) */
.el-input,.el-select{display:block;width:100%;position:relative}
.el-input__inner{display:block;width:100%;height:40px;line-height:1;padding:0 12px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fff;font-size:.875rem;color:#111827;transition:all .2s;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.el-input__inner:hover{border-color:#cbd5e1}
.el-input__inner:focus{outline:none;border-color:var(--pk-red);box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.el-input__inner::placeholder{color:#9ca3af;font-size:.875rem}
.el-input--suffix .el-input__inner{padding-right:36px}
.el-input__suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);height:100%;display:flex;align-items:center;pointer-events:none;color:#9ca3af;font-size:.75rem}
.el-select__caret{display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #6b7280;transition:transform .2s}
.el-select:hover .el-select__caret{border-top-color:var(--pk-red)}
.pk-input-wrap{position:relative;width:100%}

/* Tips / Alert / Rule / Callout ===== */
.pk-tip{background:linear-gradient(135deg,#fffbeb 0%,#fff 100%);border:1px solid #fde68a;border-radius:12px;padding:1rem 1.15rem;margin-top:1.25rem}
.pk-tip-title{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:800;color:#b45309;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem}
.pk-tip-title i{color:#f59e0b;font-size:.9rem}
.pk-tip ul{margin:.25rem 0 0;padding-left:1.1rem;font-size:.82rem;color:#92400e;line-height:1.7}
.pk-tip ul li{margin-bottom:.25rem}
.pk-tip ul li::marker{color:#f59e0b}
.pk-tip ul li b{color:#b45309}

.pk-alert{display:flex;align-items:flex-start;gap:.6rem;padding:.85rem 1rem;border-radius:10px;font-size:.82rem;font-weight:500;margin-bottom:1.25rem;background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.pk-alert i{color:#f59e0b;margin-top:.15rem}

.pk-rule{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:#9ca3af;margin:.35rem 0}
.pk-rule i{font-size:.7rem;color:#cbd5e1}
.pk-rule.ok{color:#10b981}
.pk-rule.ok i{color:#10b981}

/* ===== Section / List / Callout ===== */
.pk-section{margin-bottom:1.75rem;scroll-margin-top:80px}
.pk-section:last-child{margin-bottom:0}
.pk-section h3{display:flex;align-items:center;gap:.65rem;font-size:1.0625rem;font-weight:700;color:#111827;margin:0 0 1rem;padding-bottom:.65rem;border-bottom:2px solid var(--pk-border);position:relative}
.pk-section h3::after{content:"";position:absolute;left:0;bottom:-2px;width:60px;height:2px;background:var(--pk-red);border-radius:2px}
.pk-section h3 .num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.875rem;box-shadow:0 4px 10px -2px rgba(239,68,68,.4)}
.pk-list{list-style:none;margin:.75rem 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.pk-list li{display:flex;align-items:flex-start;gap:.6rem;padding:.65rem .85rem;background:#fafafa;border-radius:8px;border:1px solid #f3f4f6;transition:all .2s}
.pk-list li:hover{background:var(--pk-red-soft);border-color:#fecaca;transform:translateX(4px)}
.pk-list li i{color:var(--pk-red);margin-top:.2rem;flex-shrink:0;font-size:.875rem;width:14px;text-align:center}
.pk-callout{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;border-radius:0 10px 10px 0;border-left:4px solid;margin:.85rem 0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.pk-callout i{margin-top:.15rem;flex-shrink:0}
.pk-callout--warn{background:#fffbeb;border-color:#f59e0b;color:#92400e}
.pk-callout--warn i{color:#f59e0b}
.pk-callout--ok{background:#f0fdf4;border-color:#22c55e;color:#166534}
.pk-callout--ok i{color:#22c55e}
.pk-callout--info{background:#eff6ff;border-color:#3b82f6;color:#1e40af}
.pk-callout--info i{color:#3b82f6}
.pk-divider{height:1px;background:linear-gradient(90deg,transparent,var(--pk-border),transparent);margin:1.5rem 0}

/* ===== Tabs (recharge card|atm, withdraw VP1|VP2) ===== */
.pk-pane{display:block}
.pk-pane.pk-hide,.pk-hide{display:none !important}
.pk-tabs{display:flex;gap:.65rem;padding:0;margin-bottom:1rem;border:1px solid var(--pk-border);border-radius:14px;padding:.5rem;box-shadow:var(--pk-shadow)}
.pk-tabs--scroll{display:flex;gap:.65rem;padding:0 1rem;margin-bottom:1rem;overflow-x:auto;scrollbar-width:none}
.pk-tabs--scroll::-webkit-scrollbar{display:none}
.pk-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1rem;background:transparent;border:none;border-radius:10px;color:var(--pk-text-soft);font-weight:700;font-size:.88rem;cursor:pointer;transition:all .2s}
.pk-tabs--scroll .pk-tab{min-width:0;text-align:left;justify-content:flex-start;background:#fff;border:2px solid var(--pk-border);box-shadow:none}
.pk-tab:hover{background:var(--pk-red-soft);color:var(--pk-red)}
.pk-tabs--scroll .pk-tab:hover{border-color:#fecaca;background:var(--pk-red-soft);color:var(--pk-red);transform:translateY(-1px)}
.pk-tab.active{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,.3)}
.pk-tabs--scroll .pk-tab.active{background:linear-gradient(135deg,#fff5f5,#fff);border-color:var(--pk-red);color:var(--pk-red);box-shadow:0 4px 12px rgba(239,68,68,.15)}
.pk-tab i{font-size:1rem}
.pk-tab-img{width:42px;height:42px;border-radius:10px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.pk-tab-img img{width:100%;height:100%;object-fit:cover}
.pk-tab.active .pk-tab-img{background:#fff;border:1px solid #fecaca}
.pk-tab-info{flex:1;min-width:0}
.pk-tab-title{font-weight:800;font-size:.9rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-tab-game{font-size:.7rem;color:#9ca3af;font-weight:600;margin-top:.15rem}
.pk-tab.active .pk-tab-game{color:#f87171}

/* ===== Notify / Bell (random) ===== */
.pk-notify{position:relative;display:flex;align-items:center;gap:.85rem;background:linear-gradient(135deg,#fff5f5 0%,#fff 60%);border:1px solid #fecaca;border-left:4px solid var(--pk-red);border-radius:12px;padding:.85rem 1.1rem;margin-bottom:1rem;box-shadow:0 6px 20px -10px rgba(239,68,68,.25);overflow:hidden}
.pk-notify::before{content:"";position:absolute;top:-50%;right:-5%;width:180px;height:180px;background:radial-gradient(circle,rgba(239,68,68,.08),transparent 70%);border-radius:50%;pointer-events:none}
.pk-notify-icon{position:relative;flex-shrink:0;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:0 4px 12px -2px rgba(239,68,68,.4);animation:pk-bell 1.6s ease-in-out infinite}
@keyframes pk-bell{0%,100%{transform:rotate(0deg)}15%{transform:rotate(15deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(0deg)}}
.pk-notify-content{position:relative;flex:1;min-width:0;color:#991b1b;font-size:.875rem;font-weight:500;line-height:1.5}
.pk-notify-content marquee{width:100%}
.pk-notify-label{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;color:var(--pk-red);margin-right:.5rem;font-size:.85rem}

/* ===== Stats (withdraw) ===== */
.pk-stat{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem}
.pk-stat-card{background:linear-gradient(135deg,#fff5f5 0%,#fff 100%);border:1px solid #fecaca;border-radius:12px;padding:.9rem 1rem;display:flex;align-items:center;gap:.75rem}
.pk-stat-icon{width:40px;height:40px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--pk-red);font-size:1rem;border:1px solid #fecaca;flex-shrink:0}
.pk-stat-label{font-size:.7rem;color:#9ca3af;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pk-stat-value{font-size:1rem;font-weight:800;color:var(--pk-red-dark);margin-top:.15rem}

/* ===== Withdraw specific ===== */
.pk-thele{position:relative;background:linear-gradient(180deg,#fff 0%,#fafafa 100%);border:1px solid var(--pk-border);border-radius:10px;padding:.85rem 1rem;color:var(--pk-text-soft);line-height:1.7;font-size:.9rem}
.pk-step{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:.7rem;font-weight:800;padding:.1rem .45rem;border-radius:6px;margin-right:.3rem}
.pk-thele--scrollable{background:linear-gradient(135deg,#fffbeb 0%,#fff 100%);border:1px solid #fde68a;border-radius:12px;padding:1rem 1.15rem;height:100%;min-height:320px;overflow:auto}
.pk-thele--scrollable::-webkit-scrollbar{width:6px}
.pk-thele--scrollable::-webkit-scrollbar-thumb{background:#fcd34d;border-radius:3px}
.pk-info-list{display:flex;flex-direction:column;gap:.3rem;padding:0}
.pk-info-list p{margin:0;font-size:.82rem;color:var(--pk-text-soft)}
.pk-info-list p b{color:var(--pk-text)}

/* ===== Account views (detail page) ===== */
.pk-price-bar{background:linear-gradient(135deg,#fef2f2 0%,#fff 100%);border-bottom:1px solid var(--pk-border);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.pk-price-label{font-size:.72rem;color:#6b7280;font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:.4rem}
.pk-price-value{font-size:1.7rem;font-weight:800;color:var(--pk-red);line-height:1}
.pk-price-value small{font-size:.7em;font-weight:600}
.pk-info-list--padded{padding:1rem 1.5rem}
.pk-info-item{display:flex;align-items:flex-start;gap:.75rem;padding:.7rem 0;border-bottom:1px dashed var(--pk-border)}
.pk-info-item:last-child{border-bottom:none}
.pk-info-icon{width:30px;height:30px;border-radius:8px;background:var(--pk-red-soft);color:var(--pk-red);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem}
.pk-info-text{flex:1;min-width:0}
.pk-info-text .pk-info-label{font-size:.7rem;color:#9ca3af;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem}
.pk-info-text .pk-info-value{font-size:.92rem;color:var(--pk-text);font-weight:500;word-break:break-word}
.pk-btn-buy{width:100%;padding:.95rem 1rem;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:none;border-radius:10px;cursor:pointer;transition:all .25s;box-shadow:0 6px 18px -6px rgba(239,68,68,.5);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.pk-btn-buy:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(239,68,68,.6)}
.pk-btn-buy:active{transform:translateY(0)}
.pk-btn-ghost{background:#f3f4f6;color:#374151;box-shadow:none}
.pk-btn-ghost:hover{background:#e5e7eb;transform:none;box-shadow:none;color:#111827}

/* ===== Bank section (recharge ATM) ===== */
.pk-bank-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:768px){.pk-bank-grid{grid-template-columns:1fr 1fr}}
.pk-bank-info{background:linear-gradient(135deg,#fff5f5 0%,#fff 100%);border:1px solid #fecaca;border-radius:14px;padding:1.1rem 1.25rem}
.pk-bank-title{display:flex;align-items:center;gap:.55rem;font-size:.95rem;font-weight:800;color:var(--pk-red-dark);margin-bottom:.85rem;padding-bottom:.7rem;border-bottom:1px dashed #fecaca}
.pk-bank-title i{font-size:1.1rem}
.pk-bank-row{margin-bottom:.7rem;font-size:.85rem}
.pk-bank-row strong{color:var(--pk-text-soft);font-weight:600;margin-right:.35rem}
.pk-bank-value{font-weight:700;color:var(--pk-text)}
.pk-bank-value.highlight{color:var(--pk-red)}
.pk-bank-copy{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;background:#fff;border:1px solid var(--pk-border);color:var(--pk-text-soft);padding:.25rem .55rem;border-radius:6px;cursor:pointer;margin-left:.5rem;font-weight:600;transition:all .2s}
.pk-bank-copy:hover{background:var(--pk-red-soft);border-color:#fecaca;color:var(--pk-red)}
.pk-bank-content{background:linear-gradient(135deg,#fef3c7 0%,#fff 100%);border:1px dashed #f59e0b;border-radius:10px;padding:.5rem .85rem;font-weight:800;color:var(--pk-red);font-family:'Courier New',monospace;letter-spacing:.05em;display:inline-block}
.pk-qr-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:1px solid var(--pk-border);border-radius:14px;padding:1.25rem}
.pk-qr-label{font-size:.75rem;color:var(--pk-text-soft);font-weight:600;margin-bottom:.85rem;text-align:center}
.pk-qr-img{width:200px;height:200px;border-radius:12px;border:2px solid var(--pk-border);padding:.5rem;background:#fff}
.pk-qr-img img{width:100%;height:100%;display:block;border-radius:8px}
.pk-qr-note{font-size:.72rem;color:#9ca3af;margin-top:.85rem;text-align:center}

/* ===== History tables ===== */
.pk-history{background:#fff;border-radius:14px;box-shadow:var(--pk-shadow);overflow:hidden;border:1px solid var(--pk-border)}
.pk-history-head{display:flex;align-items:flex-start;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--pk-border);background:linear-gradient(135deg,#fafafa,#fff);gap:1rem;flex-wrap:wrap}
.pk-history-head--center{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--pk-border);background:linear-gradient(135deg,#fafafa,#fff)}
.pk-history-title-wrap{flex:1;min-width:0}
.pk-history-title{font-size:1rem;font-weight:800;color:var(--pk-text);display:flex;align-items:center;gap:.5rem}
.pk-history-title i{color:var(--pk-red)}
.pk-history-desc{font-size:.78rem;color:#9ca3af;margin-top:.15rem}
.pk-history-sub{display:flex;gap:.4rem;margin-top:.6rem;font-size:.82rem}
.pk-history-sub a{color:#9ca3af;font-weight:600;text-decoration:none;padding-bottom:.15rem;border-bottom:2px solid transparent;transition:all .2s}
.pk-history-sub a:hover{color:var(--pk-text)}
.pk-history-sub a.active{color:var(--pk-red);border-bottom-color:var(--pk-red)}
.pk-history-sub .sep{color:#e5e7eb}
.pk-history-reload{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;padding:.5rem .9rem;border-radius:10px;text-decoration:none;box-shadow:0 4px 12px rgba(239,68,68,.3);transition:all .2s;white-space:nowrap}
.pk-history-reload:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(239,68,68,.4);color:#fff}

.pk-table{width:100%;border-collapse:collapse;font-size:.85rem}
.pk-table thead th{padding:.75rem 1rem;text-align:left;font-size:.7rem;font-weight:800;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;background:#f9fafb;border-bottom:1px solid var(--pk-border);white-space:nowrap}
.pk-table tbody td{padding:.85rem 1rem;border-bottom:1px solid var(--pk-border);vertical-align:top}
.pk-table tbody tr:last-child td{border-bottom:none}
.pk-table tbody tr:hover{background:#fafbfc}
.pk-type{font-weight:800;color:var(--pk-text);font-size:.9rem}
.pk-time{font-size:.72rem;color:#9ca3af;margin-top:.15rem;display:flex;align-items:center;gap:.3rem}
.pk-status{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:6px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:.35rem}
.pk-amount{font-weight:800;color:var(--pk-text);font-size:.9rem;display:flex;align-items:center;gap:.3rem}
.pk-amount.down{color:#dc2626}
.pk-amount.up{color:#10b981}
.pk-amount small{font-size:.7rem;color:#9ca3af;font-weight:600}
.pk-code{font-weight:700;color:var(--pk-text);font-size:.82rem}
.pk-code small{display:block;color:#9ca3af;font-weight:500;margin-top:.15rem}
.pk-item-name{font-weight:800;color:var(--pk-text)}
.pk-item-qty{font-size:1rem;font-weight:800;color:var(--pk-red)}
.pk-item-time{font-size:.72rem;color:#9ca3af;margin-top:.15rem}
.pk-empty{padding:2.5rem 1rem;text-align:center;color:#9ca3af;font-size:.9rem}
.pk-empty i{display:block;font-size:2.5rem;margin-bottom:.5rem;color:#d1d5db}

/* ===== Pager ===== */
.pk-pager{display:flex;justify-content:center;align-items:center;gap:.35rem;padding:1rem}
.pk-pager a,.pk-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 .55rem;border-radius:8px;background:#f3f4f6;color:#374151;font-weight:600;font-size:.82rem;text-decoration:none;transition:all .2s;cursor:pointer}
.pk-pager a:hover{background:#fef2f2;color:var(--pk-red)}
.pk-pager .pk-pager-active{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,.35)}
.pk-pager .pk-pager-dots{background:transparent;color:#9ca3af}
.pk-pager i{font-size:.85rem}

/* ===== Section title (account) ===== */
.pk-section-title{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:700;color:#111827;margin:0 0 .85rem;padding-bottom:.5rem;border-bottom:2px solid var(--pk-border);position:relative}
.pk-section-title::after{content:"";position:absolute;left:0;bottom:-2px;width:50px;height:2px;background:var(--pk-red);border-radius:2px}
.pk-section-title i{color:var(--pk-red)}
.pk-filter-label{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:#374151;margin-bottom:.5rem}
.pk-filter-label i{color:var(--pk-red);font-size:.9rem}

/* ===== Modal (views) ===== */
.pk-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px)}
.pk-modal.pkx-show{display:flex;animation:pk-fade .25s ease}
@keyframes pk-fade{from{opacity:0}to{opacity:1}}
.pk-modal-card{background:#fff;border-radius:16px;max-width:900px;width:100%;max-height:92vh;overflow:hidden;position:relative;display:flex;flex-direction:column}
.pk-modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(239,68,68,.95);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:50;border:2px solid #fff;font-size:1rem;box-shadow:0 4px 14px rgba(239,68,68,.45);transition:all .2s}
.pk-modal-close:hover{background:var(--pk-red-dark);transform:rotate(90deg) scale(1.08)}
.pk-modal-body{display:grid;grid-template-columns:1fr;overflow:hidden}
@media(min-width:768px){.pk-modal-body{grid-template-columns:1.6fr 1fr}}
.pk-modal-img{background:#000;display:flex;align-items:center;justify-content:center;min-height:320px;min-width:0}
.pk-modal-img img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain}
.pk-modal-side{padding:1.5rem;overflow-y:auto;max-height:78vh}

/* ===== Image zoom / thumbs (views detail) ===== */
.pk-img-main{position:relative;width:100%;aspect-ratio:4/3;background:#000;overflow:hidden;cursor:zoom-in;border-radius:14px 14px 0 0}
.pk-img-main img{width:100%;height:100%;object-fit:contain;display:block}
.pk-img-zoom{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;padding:.3rem .65rem;border-radius:8px;font-size:.72rem;font-weight:500;backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:.3rem}
.pk-img-thumb{display:flex;gap:.5rem;padding:.85rem 1rem;overflow-x:auto;background:#fafafa;border-top:1px solid var(--pk-border)}
.pk-img-thumb::-webkit-scrollbar{height:4px}
.pk-img-thumb::-webkit-scrollbar-thumb{background:var(--pk-red);border-radius:4px}
.pk-img-thumb img{width:60px;height:60px;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s;border:2px solid transparent;flex-shrink:0}
.pk-img-thumb img:hover,.pk-img-thumb img.active{opacity:1;border-color:var(--pk-red)}

/* ===== Related items (views detail) ===== */
.pk-related-title{position:relative;background:linear-gradient(135deg,#ef4444 0%,#dc2626 60%,#b91c1c 100%);color:#fff;padding:1rem 1.5rem;font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:.5rem;overflow:hidden}
.pk-related-title::before{content:"";position:absolute;top:-50%;right:-10%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);border-radius:50%;pointer-events:none}
.pk-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;padding:1rem}
@media(min-width:640px){.pk-related-grid{grid-template-columns:repeat(4,1fr)}}
.pk-related-item{background:linear-gradient(180deg,#fff 0%,#fafafa 100%);border:1px solid var(--pk-border);border-radius:12px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.pk-related-item:hover{transform:translateY(-3px);box-shadow:0 10px 30px -10px rgba(0,0,0,.15);border-color:var(--pk-red)}
.pk-related-item img{width:100%;height:110px;object-fit:cover;display:block}
@media(max-width:767.98px){
.pk-related-item img{width:100%;height:auto;min-height:160px;object-fit:contain;object-position:center;background:#f8fafc}
}
.pk-related-item-body{padding:.65rem .75rem;flex:1}
.pk-related-item-title{font-size:.82rem;font-weight:600;color:var(--pk-text);margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-related-item-meta{font-size:.7rem;color:#9ca3af;font-weight:500}
.pk-related-item-price{font-size:1rem;font-weight:800;color:var(--pk-red);margin-top:.2rem}
.pk-related-item-btn{display:block;text-align:center;padding:.55rem;background:var(--pk-red);color:#fff;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;transition:background .2s}
.pk-related-item-btn:hover{background:var(--pk-red-dark)}

/* ===== Buy modal (views) ===== */
.pk-buy-info{background:#f9fafb;border:1px solid var(--pk-border);border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem}
.pk-buy-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.3rem 0}
.pk-buy-row+.pk-buy-row{border-top:1px dashed var(--pk-border);margin-top:.25rem;padding-top:.55rem}
.pk-buy-label{color:#6b7280;font-weight:500;font-size:.85rem}
.pk-buy-value{font-weight:700;color:var(--pk-text);font-size:.9rem}
.pk-buy-value.pk-buy-price{color:var(--pk-red);font-size:1.15rem}
.pk-buy-msg{padding:.7rem .85rem;border-radius:8px;margin-bottom:1rem;font-size:.85rem;font-weight:500;display:none}
.pk-buy-msg.show{display:block}
.pk-buy-msg.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.pk-buy-msg.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.pk-buy-input{width:100%;padding:.7rem .85rem;border:1px solid var(--pk-border);border-radius:8px;font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;background:#fff}
.pk-buy-input:focus{border-color:var(--pk-red);box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.pk-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}

/* ===== Banner (tablinks) ===== */
.tablinks.active{background-color:#ffffff!important;color:#dc2626!important;border-bottom:2px solid #dc2626;}

/* ===== Misc helpers ===== */
#list_account{min-height:120px;padding:.5rem 0}

/* ===== Body font (header global) ===== */
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}

/* ===== Header: sticky + menu + dropdown ===== */
.tw-sticky{border-bottom:1px solid #f1f5f9!important;box-shadow:0 2px 10px rgba(0,0,0,.02)!important}
.tw-menu-left a{border-radius:6px!important;transition:all .2s ease}
.tw-menu-left a:hover{background-color:#fef2f2!important}
.dropdown-profile button{border-radius:8px!important}
.dropdown-content{border-radius:10px!important;border:1px solid #e2e8f0!important;box-shadow:0 4px 20px rgba(0,0,0,.08)!important;padding:6px!important}
.dropdown-content a{border-radius:6px!important}

/* ===== Utility: fade / open ===== */
.fade{display:none}
.fade.show{display:flex!important}
.open{display:block!important}

/* ===== Utility: animate fade-in ===== */
.animate-fade-in{animation:pk-fade-in .3s ease-in}
@keyframes pk-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== Slick slider (legacy carousel) ===== */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}
.slick-list.dragging{cursor:pointer;cursor:hand}

/* ===== Header dropdown on hover (footer compat) ===== */
.dropdown-profile:hover .dropdown-content{display:block!important}

/* ===== Ticker (homepage marquee) ===== */
.ticker-wrap{
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)
}
.ticker-move,.ticker-move2{display:inline-block;white-space:nowrap;animation:ticker-scroll 28s linear infinite}
.ticker-move2{animation-name:ticker-scroll2}
.ticker-wrap:hover .ticker-move,.ticker-wrap:hover .ticker-move2{animation-play-state:paused}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes ticker-scroll2{0%{transform:translateX(100%)}100%{transform:translateX(0)}}

/* ===== Marquee (footer) ===== */
@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.animate-marquee{display:inline-block;animation:marquee 30s linear infinite}

/* ===== Sale section (homepage uudai) ===== */
body{padding:0;position:relative}
*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.uudai-time{padding-left:.5rem;padding-right:.5rem;padding-bottom:.01rem}
.uudai-time-bg{padding:20px;background:url(https://i.imgur.com/CCh426m.png) no-repeat;background-size:cover;width:100%}
.uudai-time .uudai--title{display:inline-flex;align-items:center}
.uudai-time img{width:32px;transform:translateY(0)}
.uudai-time h3{font-size:1.5rem;line-height:2rem;font-weight:900;font-style:italic;color:#fff}
.uudai--detail ul{padding:0}
.uudai--detail ul li{display:inline-block;width:24%;text-align:center;padding-bottom:.25rem;padding-top:.25rem;padding-left:1.25rem;padding-right:1.25rem;border-radius:.25rem;margin-top:.75em;cursor:pointer}
.uudai--detail ul li.active{background-color:#fff}
.uudai--detail ul li.active p{color:#dc2626}
.uudai--detail ul li.active sub{color:#000}
.uudai--detail ul li.dadienra p{text-decoration:line-through}
.uudai--detail ul li p{margin:0;color:#fff;font-size:1.5rem;line-height:2rem;font-weight:700}
.uudai--detail ul li sub{color:#fff;font-size:.75rem;line-height:1rem;font-weight:500}
.uudai-info{background-color:#fff}
.uudai-info .content-tab{padding-bottom:20px}
.uudai-info ul{padding:0}
.uudai-info ul li{position:relative;background:url(https://i.imgur.com/CCh426m.png) no-repeat center center;background-size:cover;display:inline-block;width:19.5%;text-align:center;padding:.25rem;border-radius:.25rem;margin-top:.75em;transform:scale(.97)}
.uudai-info ul li .uudai--text{min-height:80px;text-align:left;padding:.05rem .25rem}
.uudai-info ul li .uudai--text div{width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;font-size:14px}
.uudai-info ul li .uudai--text p{width:100%;overflow:hidden;text-overflow:ellipsis;color:#ef4444;font-weight:700}
.uudai-info ul li .uudai--img{height:8.4rem;overflow:hidden;margin:auto}
.uudai-info ul li .uudai--img img{width:100%}
.uudai-info ul li .uudai--button{font-weight:800;padding-top:.375rem;padding-bottom:.375rem}
.uudai-info ul li .uudai--button a{text-transform:uppercase;color:#fff;font-size:.875rem}
.uudai-info ul li div.active::after{content:"Sắp Diễn Ra";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);z-index:8;border:3px dashed #ef4444;width:70%;color:#ef4444;font-weight:700;padding:.25em}
.uudai-info ul li div.active::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:7;background-color:#fff;width:100%;height:100%;opacity:.8}
.uudai .content-tab .tab{display:none}
.uudai .tab.active{display:block;height:max-content}
.uudai-info ul li .uudai-gia{display:inline-flex!important;align-items:center;justify-content:space-between;width:100%;margin:6px 0}
.uudai-info ul li .uudai-gia .sale{color:#ef4444;font-weight:600;font-size:16px}
.uudai-info ul li .uudai-gia .gia{text-decoration:line-through;font-size:13px}
.uudai-info ul li .uudai-gia>div{width:auto!important}

/* ===== Responsive ===== */
@media(max-width:640px){
  .pk-head{padding:1rem 1rem}
  .pk-head-icon{width:46px;height:46px;font-size:1.2rem;border-radius:10px}
  .pk-head-text h2{font-size:1rem}
  .pk-body{padding:1rem .85rem 1.25rem}
  .pk-tab{padding:.7rem .6rem;font-size:.78rem}
  .pk-tabs--scroll .pk-tab{padding:.7rem .85rem}
  .pk-tabs--scroll .pk-tab-img{width:36px;height:36px}
  .pk-stat{grid-template-columns:1fr}
  .pk-notify{padding:.7rem .85rem;gap:.65rem}
  .pk-notify-icon{width:36px;height:36px;font-size:1rem}
}