{"id":8039,"date":"2026-07-21T01:13:43","date_gmt":"2026-07-21T01:13:43","guid":{"rendered":"https:\/\/skibidididdy.io.vn\/?page_id=8039"},"modified":"2026-07-23T03:56:07","modified_gmt":"2026-07-23T03:56:07","slug":"app","status":"publish","type":"page","link":"https:\/\/skibidididdy.io.vn\/index.php\/app\/","title":{"rendered":"App"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nPolyShop<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\/* =============================================================================\n POLY SHOP \u2014 h\u1ec7 th\u1ed1ng thi\u1ebft k\u1ebf \u0111\u1ed3ng b\u1ed9 v\u1edbi PolyChicken (tr\u1ee3 l\u00fd chat c\u1ee7a shop)\n Token: n\u1ec1n gi\u1ea5y \u1ea5m (corn field), m\u1ef1c g\u1ea7n \u0111en \u1ea5m, \u0111\u1ecf m\u00e0o g\u00e0 l\u00e0 \u0111i\u1ec3m nh\u1ea5n\n ch\u00ednh, v\u00e0ng b\u1eafp l\u00e0 \u0111i\u1ec3m nh\u1ea5n ph\u1ee5 (badge\/gi\u00e1), xanh ng\u1ecdc cho tr\u1ea1ng th\u00e1i\n th\u00e0nh c\u00f4ng. Ch\u1eef hi\u1ec3n th\u1ecb Sora, ch\u1eef n\u1ed9i dung Inter, s\u1ed1 li\u1ec7u\/gi\u00e1 JetBrains Mono.\n Ch\u1eef k\u00fd h\u00ecnh \u1ea3nh: \"m\u00e0o g\u00e0\" \u2014 m\u1ed9t d\u1ea3i r\u0103ng c\u01b0a l\u01b0\u1ee3n s\u00f3ng d\u00f9ng l\u00e0m divider\n d\u01b0\u1edbi hero, d\u00f9ng \u0111\u00fang M\u1ed8T L\u1ea6N \u0111\u1ec3 kh\u00f4ng l\u1ea1m d\u1ee5ng.\n ============================================================================= *\/\n:root{\n --bg: #F7F3E9;\n --surface: #FFFFFF;\n --surface-alt: #F0EADA;\n --ink: #201A12;\n --ink-dim: #8C8371;\n --ink-faint: #B7AF9C;\n --line: #E7DFCB;\n --comb: #F2472B;\n --comb-dim: #C23A22;\n --corn: #FFB627;\n --corn-dim: #E29E12;\n --teal: #0E9C82;\n --black: #1B1712;\n --on-dark: #FAF7F0;\n --on-dark-dim: #C9C0AC;\n --shadow-sm: 0 2px 10px rgba(32,26,18,.06);\n --shadow-md: 0 10px 30px rgba(32,26,18,.12);\n --shadow-lg: 0 24px 60px rgba(32,26,18,.22);\n}\n*{box-sizing:border-box; margin:0; padding:0;}\nbody{\n background: var(--bg);\n color: var(--ink);\n font-family: 'Inter', sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n@media (prefers-reduced-motion: reduce){\n *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}\n}\n.mono{ font-family:'JetBrains Mono', monospace; }\n.display{ font-family:'Sora', sans-serif; }\n\n.app{\n max-width: 430px;\n margin: 0 auto;\n min-height: 100vh;\n background: var(--bg);\n position: relative;\n padding-bottom: 92px;\n overflow-x: hidden;\n}\nbutton, a, input{ font-family: inherit; }\nimg{ display:block; max-width:100%; }\n\n\/* ---- Top bar ---- *\/\n.topbar{\n display:flex; align-items:center; justify-content:space-between;\n padding: 16px 18px 10px;\n background: var(--bg);\n position: sticky; top:0; z-index: 30;\n}\n.brand{ display:flex; align-items:center; gap:9px; cursor:pointer; background:none; border:none; }\n.brand img{ width:32px; height:32px; border-radius:9px; object-fit:cover; box-shadow: var(--shadow-sm); }\n.brand-name{ font-family:'Sora',sans-serif; font-weight:800; font-size: 17px; letter-spacing:-.01em; color: var(--ink); }\n.icon-btn{\n width:38px; height:38px; border-radius:12px;\n background: var(--surface);\n border: 1px solid var(--line);\n display:flex; align-items:center; justify-content:center;\n color: var(--ink); cursor:pointer; position:relative;\n transition: transform .12s ease, border-color .15s ease;\n}\n.icon-btn:active{ transform: scale(.92); }\n.icon-btn .dot{\n position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%;\n background: var(--comb); border:2px solid var(--bg); display:none;\n}\n.icon-btn .dot.show{ display:block; }\n\n\/* ---- Screens ---- *\/\n.screen{ display:none; }\n.screen.active{ display:block; animation: fadein .22s ease; }\n@keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }\n\n\/* ---- Hero ---- *\/\n.hero{\n margin: 6px 16px 0;\n border-radius: 26px;\n background: linear-gradient(155deg, #2A241A 0%, var(--black) 60%);\n padding: 28px 24px 0;\n overflow: hidden;\n position: relative;\n text-align:center;\n box-shadow: var(--shadow-md);\n}\n.hero::before{\n content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;\n background:\n radial-gradient(120px 90px at 8% -10%, rgba(255,182,39,.20), transparent 70%),\n radial-gradient(160px 120px at 105% 15%, rgba(242,71,43,.22), transparent 70%);\n}\n.hero-eyebrow{\n font-family:'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;\n color: var(--corn); font-weight:600; margin-bottom:12px; position:relative;\n}\n.hero h1{\n font-family:'Sora',sans-serif; font-size: 24px; font-weight: 800; line-height: 1.22; color: var(--on-dark);\n margin: 0 auto 10px; max-width: 300px; position:relative; letter-spacing:-.01em;\n}\n.hero p{\n font-size: 13px; color: var(--on-dark-dim); line-height:1.6; max-width: 290px;\n margin: 0 auto 18px; position:relative;\n}\n.btn-pill{\n display:inline-flex; align-items:center; gap:7px;\n background: var(--comb);\n color: var(--on-dark);\n font-weight: 700;\n font-size: 13.5px;\n padding: 12px 24px;\n border-radius: 999px;\n border:none;\n cursor:pointer;\n transition: transform .12s ease, background .15s ease;\n position:relative;\n}\n.btn-pill:active{ transform: scale(.96); }\n.btn-pill:hover{ background: var(--comb-dim); }\n.hero-cta{ margin-bottom: 22px; }\n.hero-art{ margin: 0 -24px; position:relative; }\n.hero-art img{ width:100%; display:block; }\n\n\/* Ch\u1eef k\u00fd: divider d\u1ea1ng \"m\u00e0o g\u00e0\" \u2014 ch\u1ec9 d\u00f9ng m\u1ed9t l\u1ea7n d\u01b0\u1edbi hero *\/\n.comb-wave{\n height: 14px; margin: 0 16px; position:relative; top:-1px;\n}\n.comb-wave svg{ width:100%; height:100%; display:block; }\n\n\/* ---- Section header ---- *\/\n.section{ padding: 22px 18px 4px; }\n.section-head{\n display:flex; align-items:baseline; justify-content:space-between;\n margin-bottom: 13px;\n}\n.section-head h2{ font-family:'Sora',sans-serif; font-size: 16.5px; font-weight: 700; letter-spacing:-.01em; }\n.section-head button{\n font-size: 12px; color: var(--comb); font-weight:700;\n background:none; border:none; cursor:pointer;\n}\n\n\/* ---- Search ---- *\/\n.search-wrap{ padding: 4px 18px 6px; }\n.search-box{\n display:flex; align-items:center; gap:9px;\n background: var(--surface); border:1px solid var(--line); border-radius:14px;\n padding: 11px 14px; box-shadow: var(--shadow-sm);\n}\n.search-box svg{ width:16px; height:16px; color: var(--ink-dim); flex:0 0 auto; }\n.search-box input{\n flex:1; border:none; background:none; outline:none; font-size:13.5px; color:var(--ink);\n}\n.search-box input::placeholder{ color: var(--ink-faint); }\n.search-clear{ background:none; border:none; color:var(--ink-dim); cursor:pointer; display:none; font-size:14px; }\n.search-clear.show{ display:block; }\n\n\/* ---- Categories ---- *\/\n.cats{\n display:flex; gap:9px; overflow-x:auto; padding: 0 18px 4px;\n scrollbar-width:none;\n}\n.cats::-webkit-scrollbar{ display:none; }\n.cat-chip{\n flex: 0 0 auto;\n padding: 9px 16px;\n border-radius: 999px;\n background: var(--surface);\n border: 1px solid var(--line);\n font-size: 12.5px; font-weight:600; color: var(--ink-dim);\n white-space:nowrap; cursor:pointer;\n transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;\n}\n.cat-chip:active{ transform: scale(.95); }\n.cat-chip.active{\n background: var(--ink); color:var(--on-dark); border-color: var(--ink);\n}\n\n\/* ---- Product grid ---- *\/\n.grid{\n display:grid; grid-template-columns: 1fr 1fr; gap: 13px;\n padding: 0 18px;\n}\n.pcard{\n background: var(--surface);\n border: 1px solid var(--line);\n border-radius: 20px;\n padding: 12px;\n display:flex; flex-direction:column;\n cursor:pointer;\n text-align:left;\n position:relative;\n transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;\n}\n.pcard:active{ transform: scale(.98); }\n.pcard:hover{ box-shadow: var(--shadow-sm); border-color: #DCD2B8; }\n.pcard .thumb{\n height: 100px; border-radius: 14px;\n background: var(--surface-alt);\n display:flex; align-items:center; justify-content:center;\n margin-bottom: 12px;\n color: var(--ink-faint);\n overflow:hidden; position:relative;\n}\n.pcard .thumb img{ width:100%; height:100%; object-fit:cover; }\n.pcard .thumb svg{ width: 42px; height:42px; }\n.pcard .thumb.loading{ background: linear-gradient(90deg, var(--surface-alt) 25%, #E4DCC4 37%, var(--surface-alt) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }\n@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }\n.wish-btn{\n position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:9px;\n background: rgba(250,247,240,.9); border:none; display:flex; align-items:center; justify-content:center;\n cursor:pointer; color: var(--ink-dim); z-index:2; backdrop-filter: blur(2px);\n transition: transform .12s ease, color .15s ease;\n}\n.wish-btn:active{ transform: scale(.85); }\n.wish-btn.active{ color: var(--comb); }\n.wish-btn svg{ width:15px; height:15px; }\n.pcard .cat-tag{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color: var(--ink-dim); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }\n.pcard .name{ font-size: 13.5px; font-weight:700; margin-bottom:8px; line-height:1.32; }\n.pcard .row{\n display:flex; align-items:center; justify-content:space-between; margin-top:auto;\n}\n.pcard .price{ font-family:'JetBrains Mono',monospace; font-size: 12px; font-weight:700; color: var(--ink); }\n.addbtn{\n width: 30px; height:30px; border-radius:10px; flex:0 0 auto;\n background: var(--ink); border:none;\n color: var(--on-dark); font-size:16px; line-height:1;\n display:flex; align-items:center; justify-content:center;\n cursor:pointer; transition: transform .12s ease, background .15s ease;\n}\n.addbtn:active{ transform: scale(0.88); background: var(--comb); }\n\n\/* ---- Recently viewed ---- *\/\n.rv-row{ display:flex; gap:11px; overflow-x:auto; padding: 0 18px 4px; scrollbar-width:none; }\n.rv-row::-webkit-scrollbar{ display:none; }\n.rv-card{\n flex:0 0 auto; width:84px; text-align:center; cursor:pointer;\n}\n.rv-thumb{\n width:72px; height:72px; border-radius:16px; background:var(--surface-alt);\n border:1px solid var(--line); display:flex; align-items:center; justify-content:center;\n overflow:hidden; margin:0 auto 6px;\n}\n.rv-thumb img{ width:100%; height:100%; object-fit:cover; }\n.rv-name{ font-size:10.5px; color:var(--ink-dim); font-weight:600; line-height:1.3; }\n\n\/* ---- Promo banner ---- *\/\n.promo{\n margin: 22px 18px 0;\n border-radius: 22px;\n padding: 20px;\n background: linear-gradient(120deg, var(--black), #2A241A);\n display:flex; align-items:center; justify-content:space-between;\n cursor:pointer; border:none; width:calc(100% - 36px);\n box-shadow: var(--shadow-md); position:relative; overflow:hidden;\n transition: transform .12s ease;\n}\n.promo:active{ transform: scale(.98); }\n.promo::after{\n content:''; position:absolute; inset:0; opacity:.4; pointer-events:none;\n background: radial-gradient(120px 90px at 100% 0%, rgba(255,182,39,.25), transparent 70%);\n}\n.promo .txt{ text-align:left; position:relative; }\n.promo .tag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:1.6px; color:var(--corn); font-weight:700; }\n.promo .txt h3{ font-family:'Sora',sans-serif; font-size: 18px; font-weight:800; margin-top:6px; color:var(--on-dark); }\n.promo .pct{ font-family:'JetBrains Mono',monospace; font-size: 26px; font-weight:800; color: var(--comb); position:relative; }\n\n\/* ---- Testimonials ---- *\/\n.tcard{\n background: var(--surface); border:1px solid var(--line); border-radius:16px;\n padding: 14px; display:flex; gap:11px; align-items:flex-start; margin-bottom:10px;\n}\n.tcard img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1.5px solid var(--line); }\n.tcard .quote{ font-size:12.5px; font-weight:600; line-height:1.42; margin-bottom:3px; }\n.tcard .who{ font-size:11px; color:var(--ink-dim); }\n\n\/* ---- Cart screen ---- *\/\n.cart-row{\n display:flex; gap:12px; align-items:center;\n padding: 14px 0; border-bottom:1px solid var(--line);\n}\n.cart-row .thumb{\n width:60px; height:60px; border-radius:14px; background:var(--surface-alt);\n display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto;\n border:1px solid var(--line);\n}\n.cart-row .thumb img{ width:100%; height:100%; object-fit:cover; }\n.cart-row .thumb svg{ width:26px; height:26px; }\n.cart-row .info{ flex:1; min-width:0; }\n.cart-row .name{ font-size:13px; font-weight:700; margin-bottom:2px; }\n.cart-row .unit{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-dim); }\n.qty-stepper{ display:flex; align-items:center; gap:9px; margin-top:8px; }\n.qty-stepper button{\n width:23px; height:23px; border-radius:7px; border:1px solid var(--line); background:var(--surface);\n display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; font-weight:700;\n transition: background .12s ease;\n}\n.qty-stepper button:active{ background: var(--surface-alt); }\n.qty-stepper span{ font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; min-width:14px; text-align:center; }\n.cart-row .right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }\n.cart-row .linetotal{ font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:800; }\n.removebtn{ background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:2px; transition: color .15s ease; }\n.removebtn:hover{ color: var(--comb); }\n\n.cart-summary{\n margin: 16px 18px 0; padding: 18px; border-radius:18px; background: var(--surface);\n border:1px solid var(--line); box-shadow: var(--shadow-sm);\n}\n.sum-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-dim); margin-bottom:9px; }\n.sum-row .mono{ font-family:'JetBrains Mono',monospace; }\n.sum-row.total{ color:var(--ink); font-weight:800; font-size:15.5px; margin-bottom:16px; padding-top:8px; border-top:1px dashed var(--line); }\n.checkout-btn{\n width:100%; padding:14px; border-radius:999px; border:none; background:var(--comb);\n color:var(--on-dark); font-weight:700; font-size:14px; cursor:pointer;\n transition: transform .12s ease, background .15s ease;\n}\n.checkout-btn:active{ transform: scale(.98); }\n.checkout-btn:disabled{ opacity:0.4; cursor:not-allowed; }\n\n.empty-state{\n text-align:center; padding: 60px 30px 20px; color: var(--ink-dim);\n}\n.empty-state svg{ width:52px; height:52px; margin-bottom:14px; opacity:0.4; }\n.empty-state p{ font-size:13.5px; margin-bottom:18px; }\n\n\/* ---- Account screen ---- *\/\n.acc-card{\n margin: 8px 18px 0; padding:24px; border-radius:22px; background: linear-gradient(155deg, var(--black), #2A241A);\n text-align:center; box-shadow: var(--shadow-md);\n}\n.acc-avatar{\n width:60px; height:60px; border-radius:50%; background: var(--comb);\n display:flex; align-items:center; justify-content:center; margin: 0 auto 12px;\n color: var(--on-dark); font-family:'Sora',sans-serif;\n}\n.acc-card h3{ font-family:'Sora',sans-serif; font-size:15.5px; margin-bottom:5px; color:var(--on-dark); }\n.acc-card p{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--on-dark-dim); margin-bottom:16px; }\n.acc-actions{ display:flex; gap:10px; }\n.acc-actions button{ flex:1; padding:11px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer; transition: transform .12s ease; }\n.acc-actions button:active{ transform: scale(.96); }\n.btn-solid{ background:var(--comb); color:var(--on-dark); border:none; }\n.btn-outline{ background:none; color:var(--on-dark); border:1px solid rgba(250,247,240,.3); }\n\n.auth-tabs{ display:flex; gap:8px; margin: 16px 18px 14px; }\n.auth-tab{\n flex:1; padding:10px; border-radius:999px; border:1px solid var(--line); background:var(--surface);\n font-size:12.5px; font-weight:700; color:var(--ink-dim); cursor:pointer; transition: background .15s ease, color .15s ease;\n}\n.auth-tab.active{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }\n.auth-form{ margin: 0 18px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow: var(--shadow-sm); }\n.field{ margin-bottom:12px; }\n.field label{ display:block; font-size:11.5px; font-weight:700; color:var(--ink-dim); margin-bottom:6px; }\n.field input{\n width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--line); background:var(--bg);\n font-size:13px; color:var(--ink); font-family:inherit;\n}\n.field input:focus{ outline:none; border-color:var(--comb); }\n.auth-error{ color:var(--comb); font-size:12px; font-weight:600; margin: -2px 0 12px; min-height:14px; }\n.field.invalid input{ border-color: var(--comb); }\n.field-pass{ position:relative; }\n.field-pass input{ padding-right:40px; }\n.pass-toggle{\n position:absolute; right:11px; top:33px; background:none; border:none; cursor:pointer;\n color: var(--ink-dim); padding:3px; display:flex; transition: color .15s ease;\n}\n.pass-toggle:hover{ color: var(--ink); }\n.pass-toggle svg{ width:17px; height:17px; }\n.pass-strength{ display:flex; gap:4px; margin-top:8px; }\n.pass-strength i{ flex:1; height:3px; border-radius:99px; background: var(--line); transition: background .2s ease; }\n.pass-strength-label{ font-size:10.5px; color: var(--ink-dim); margin-top:5px; font-weight:600; }\n.auth-row-between{ display:flex; align-items:center; justify-content:space-between; margin: -2px 0 14px; }\n.remember-check{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-dim); font-weight:600; cursor:pointer; user-select:none; }\n.remember-check input{ width:15px; height:15px; accent-color: var(--comb); cursor:pointer; }\n.forgot-link{ font-size:12px; color:var(--comb); font-weight:700; background:none; border:none; cursor:pointer; }\n.auth-submit{ position:relative; }\n.auth-submit .spinner{\n width:15px; height:15px; border-radius:50%; border:2px solid rgba(250,247,240,.4); border-top-color:#fff;\n animation: spin .7s linear infinite; display:none; margin-right:7px;\n}\n.auth-submit.loading .spinner{ display:inline-block; }\n.auth-submit.loading .btn-label{ opacity:.85; }\n@keyframes spin{ to{ transform: rotate(360deg); } }\n.forgot-sheet{ text-align:left; }\n.forgot-sheet .lead{ font-size:12.5px; color:var(--ink-dim); line-height:1.55; margin-bottom:16px; }\n.forgot-success{\n background: rgba(14,156,130,.08); border:1px solid rgba(14,156,130,.3); border-radius:12px;\n padding:12px 13px; font-size:12.5px; color: var(--teal); font-weight:600; margin-top:2px; line-height:1.5; display:none;\n}\n.forgot-success.show{ display:block; }\n.edit-profile-btn{ position:relative; }\n\n.menu-list{ margin: 18px 18px 0; }\n.menu-row{\n display:flex; align-items:center; justify-content:space-between;\n padding: 15px 4px; border-bottom:1px solid var(--line);\n font-size:13.5px; font-weight:600; cursor:pointer;\n}\n.menu-row .left{ display:flex; align-items:center; gap:11px; }\n.menu-row .count{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-dim); }\n\n\/* Danh s\u00e1ch y\u00eau th\u00edch inline *\/\n.wishlist-panel{ margin: 10px 18px 0; }\n.wishlist-panel .empty-state{ padding: 30px 10px; }\n\n\/* ---- Bottom nav ---- *\/\n.bottomnav{\n position: fixed; bottom:0; left:50%; transform: translateX(-50%);\n width: 100%; max-width: 430px;\n background: var(--black);\n display:flex; justify-content:space-around; align-items:center;\n padding: 11px 8px 20px;\n z-index: 40;\n box-shadow: 0 -6px 24px rgba(0,0,0,.25);\n}\n.navitem{\n display:flex; flex-direction:column; align-items:center; gap:5px;\n color: #8A8271; font-size: 10.5px; font-weight:600;\n background:none; border:none; cursor:pointer; position:relative; padding: 4px 10px;\n transition: color .15s ease;\n}\n.navitem.active{ color: var(--on-dark); }\n.navitem.active svg{ color: var(--comb); }\n.navitem svg{ width:20px; height:20px; transition: color .15s ease; }\n.navitem .nav-dot{\n position:absolute; top:0; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%;\n background: var(--comb); opacity:0;\n}\n.navitem.active .nav-dot{ opacity:1; }\n.cart-badge{\n position:absolute; top:-2px; right:2px;\n background: var(--comb); color:#fff; font-size:9.5px; font-weight:800;\n width:16px; height:16px; border-radius:50%;\n display:flex; align-items:center; justify-content:center;\n}\n\n\/* ---- Modal (product detail) ---- *\/\n.modal-backdrop{\n position: fixed; inset:0; background: rgba(20,17,12,0.55);\n z-index: 60; display:none; align-items:flex-end; justify-content:center;\n backdrop-filter: blur(2px);\n}\n.modal-backdrop.show{ display:flex; }\n.sheet{\n background: var(--surface); width:100%; max-width:430px; border-radius: 26px 26px 0 0;\n padding: 10px 20px 26px; animation: slideup .25s cubic-bezier(.22,.9,.35,1);\n}\n@keyframes slideup{ from{ transform:translateY(40px); opacity:0;} to{transform:none; opacity:1;} }\n.sheet-handle{ width:38px; height:4px; background:var(--line); border-radius:99px; margin: 6px auto 16px; }\n.sheet .thumb{\n width:100%; height:180px; border-radius:18px; background:var(--surface-alt);\n display:flex; align-items:center; justify-content:center; margin-bottom:16px; overflow:hidden;\n position:relative;\n}\n.sheet .thumb img{ width:100%; height:100%; object-fit:cover; }\n.sheet .thumb svg{ width:70px; height:70px; color: var(--ink-faint); }\n.sheet .wish-btn{ top:12px; right:12px; }\n.sheet h3{ font-family:'Sora',sans-serif; font-size:18.5px; font-weight:800; margin-bottom:4px; letter-spacing:-.01em; }\n.sheet .cat-tag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink-dim); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }\n.sheet .desc{ font-size:13px; color:var(--ink-dim); line-height:1.6; margin-bottom:16px; }\n.sheet .price-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }\n.sheet .price{ font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:800; }\n.sheet-actions{ display:flex; gap:10px; }\n.sheet-actions button{ flex:1; padding:13px; border-radius:999px; font-weight:700; font-size:13.5px; cursor:pointer; transition: transform .12s ease; }\n.sheet-actions button:active{ transform: scale(.97); }\n\n.toast{\n position: fixed; left:50%; transform: translateX(-50%) translateY(20px);\n bottom: 104px; background: var(--ink); color:var(--on-dark); font-size:13px; font-weight:600;\n padding: 11px 20px; border-radius: 999px; opacity:0; pointer-events:none;\n transition: opacity .25s ease, transform .25s ease; z-index: 80; white-space:nowrap;\n display:flex; align-items:center; gap:8px; box-shadow: var(--shadow-lg);\n}\n.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }\n.toast .tick{ color: var(--corn); }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"app\">\n\n <div class=\"topbar\">\n <button class=\"brand\" onclick=\"goHome()\">\n <img decoding=\"async\" src=\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/LogoPC-2-150x150.png\" alt=\"PolyShop\" onerror=\"this.style.display='none'\">\n <div class=\"brand-name\">PolyShop<\/div>\n <\/button>\n <button class=\"icon-btn\" aria-label=\"T\u00e0i kho\u1ea3n\" onclick=\"showScreen('account')\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 20c0-4 4-6 8-6s8 2 8 6\"\/><\/svg>\n <span class=\"dot\" id=\"acc-dot\"><\/span>\n <\/button>\n <\/div>\n\n <!-- ===================== HOME ===================== -->\n <section class=\"screen active\" data-screen=\"home\">\n\n <div class=\"hero\">\n <div class=\"hero-eyebrow\">Ch\u00e0o m\u1eebng tr\u1edf l\u1ea1i<\/div>\n <h1>Mua s\u1eafm nhanh h\u01a1n c\u00f9ng PolyShop<\/h1>\n <p>\u01afu \u0111\u00e3i \u0111\u1ed9c quy\u1ec1n, theo d\u00f5i \u0111\u01a1n h\u00e0ng th\u1eddi gian th\u1ef1c v\u00e0 \u0111\u1ec1 xu\u1ea5t d\u00e0nh ri\u00eang cho b\u1ea1n.<\/p>\n <button class=\"btn-pill hero-cta\" onclick=\"showScreen('products')\">Kh\u00e1m ph\u00e1 s\u1ea3n ph\u1ea9m<\/button>\n <div class=\"hero-art\">\n <img decoding=\"async\" src=\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/TaycamPC2-1024x342.png\" alt=\"Tay c\u1ea7m Xbox360\" onerror=\"this.parentElement.style.display='none'\">\n <\/div>\n <\/div>\n\n <div class=\"comb-wave\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 400 14\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path d=\"M0 0 L14 12 L28 0 L42 12 L56 0 L70 12 L84 0 L98 12 L112 0 L126 12 L140 0 L154 12 L168 0 L182 12 L196 0 L210 12 L224 0 L238 12 L252 0 L266 12 L280 0 L294 12 L308 0 L322 12 L336 0 L350 12 L364 0 L378 12 L392 0 L400 6 L400 14 L0 14 Z\" fill=\"#FFB627\" opacity=\"0.55\"\/>\n <\/svg>\n <\/div>\n\n <div class=\"section\" style=\"padding-top:20px;\">\n <div class=\"cats\" id=\"cats-home\"><\/div>\n <\/div>\n\n <div class=\"section\" id=\"rv-section\" style=\"display:none;\">\n <div class=\"section-head\"><h2>\u0110\u00e3 xem g\u1ea7n \u0111\u00e2y<\/h2><\/div>\n <div class=\"rv-row\" id=\"rv-row\"><\/div>\n <\/div>\n\n <div class=\"section\">\n <div class=\"section-head\">\n <h2>N\u1ed5i b\u1eadt h\u00f4m nay<\/h2>\n <button onclick=\"showScreen('products')\">Xem t\u1ea5t c\u1ea3<\/button>\n <\/div>\n <div class=\"grid\" id=\"grid-featured\"><\/div>\n <\/div>\n\n <button class=\"promo\" onclick=\"showScreen('products')\">\n <div class=\"txt\">\n <div class=\"tag\">\ud83d\udd25 FLASH SALE<\/div>\n <h3>Gi\u1ea3m \u0111\u1ebfn 70%<\/h3>\n <\/div>\n <div class=\"pct\">-70%<\/div>\n <\/button>\n\n <div class=\"section\">\n <div class=\"section-head\"><h2>Kh\u00e1ch h\u00e0ng n\u00f3i g\u00ec<\/h2><\/div>\n <div class=\"tcard\">\n <img decoding=\"async\" src=\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/Tuan.png\" alt=\"Tu\u1ea5n\" onerror=\"this.style.display='none'\">\n <div>\n <div class=\"quote\">\"D\u1ecbch v\u1ee5 nhanh ch\u00f3ng v\u00e0 s\u1ea3n ph\u1ea9m ch\u00ednh h\u00e3ng!\"<\/div>\n <div class=\"who\">Tu\u1ea5n Anime<\/div>\n <\/div>\n <\/div>\n <div class=\"tcard\">\n <img decoding=\"async\" src=\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/LongNguyen.png\" alt=\"Long\" onerror=\"this.style.display='none'\">\n <div>\n <div class=\"quote\">\"20 n\u0103m cu\u1ed9c \u0111\u1eddi t\u00f4i ch\u01b0a t\u1eebng tr\u1ea3i nghi\u1ec7m t\u1ed1t nh\u01b0 th\u1ebf!\"<\/div>\n <div class=\"who\">Longphiphai<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===================== PRODUCTS ===================== -->\n <section class=\"screen\" data-screen=\"products\">\n <div class=\"search-wrap\" style=\"padding-top:16px;\">\n <div class=\"search-box\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.6\" y2=\"16.6\"\/><\/svg>\n <input id=\"product-search\" type=\"text\" placeholder=\"T\u00ecm s\u1ea3n ph\u1ea9m...\" oninput=\"onSearchInput()\">\n <button class=\"search-clear\" id=\"search-clear-btn\" onclick=\"clearSearch()\">\u2715<\/button>\n <\/div>\n <\/div>\n <div class=\"section\" style=\"padding-top:8px;\">\n <div class=\"cats\" id=\"cats-products\"><\/div>\n <\/div>\n <div class=\"section\">\n <div class=\"grid\" id=\"grid-all\"><\/div>\n <\/div>\n <\/section>\n\n <!-- ===================== CART ===================== -->\n <section class=\"screen\" data-screen=\"cart\">\n <div class=\"section\" style=\"padding-top:16px;\">\n <div class=\"section-head\"><h2>Gi\u1ecf h\u00e0ng c\u1ee7a b\u1ea1n<\/h2><\/div>\n <\/div>\n <div id=\"cart-content\" style=\"padding: 0 18px;\"><\/div>\n <div id=\"cart-summary-wrap\"><\/div>\n <\/section>\n\n <!-- ===================== ACCOUNT ===================== -->\n <section class=\"screen\" data-screen=\"account\">\n\n <!-- Guest state -->\n <div id=\"acc-guest\">\n <div class=\"auth-tabs\">\n <button class=\"auth-tab active\" data-tab=\"login\" onclick=\"switchAuthTab('login')\">\u0110\u0103ng nh\u1eadp<\/button>\n <button class=\"auth-tab\" data-tab=\"register\" onclick=\"switchAuthTab('register')\">\u0110\u0103ng k\u00fd<\/button>\n <\/div>\n\n <div class=\"auth-form\" id=\"form-login\">\n <div class=\"field\">\n <label>T\u00ean \u0111\u0103ng nh\u1eadp<\/label>\n <input id=\"login-username\" type=\"text\" placeholder=\"vd: minhnguyen\" autocomplete=\"username\">\n <\/div>\n <div class=\"field field-pass\">\n <label>M\u1eadt kh\u1ea9u<\/label>\n <input id=\"login-password\" type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" autocomplete=\"current-password\" onkeydown=\"if(event.key==='Enter')handleLogin()\">\n <button type=\"button\" class=\"pass-toggle\" onclick=\"togglePassVisibility('login-password', this)\" aria-label=\"Hi\u1ec7n m\u1eadt kh\u1ea9u\"><\/button>\n <\/div>\n <div class=\"auth-row-between\">\n <label class=\"remember-check\">\n <input type=\"checkbox\" id=\"login-remember\" checked>\n Ghi nh\u1edb \u0111\u0103ng nh\u1eadp\n <\/label>\n <button type=\"button\" class=\"forgot-link\" onclick=\"openForgotSheet()\">Qu\u00ean m\u1eadt kh\u1ea9u?<\/button>\n <\/div>\n <div class=\"auth-error\" id=\"login-error\"><\/div>\n <button class=\"btn-solid auth-submit\" id=\"login-submit-btn\" style=\"width:100%; padding:13px; border-radius:999px; border:none;\" onclick=\"handleLogin()\">\n <span class=\"spinner\"><\/span><span class=\"btn-label\">\u0110\u0103ng nh\u1eadp<\/span>\n <\/button>\n <\/div>\n\n <div class=\"auth-form\" id=\"form-register\" style=\"display:none; margin-top:12px;\">\n <div class=\"field\">\n <label>H\u1ecd t\u00ean<\/label>\n <input id=\"reg-name\" type=\"text\" placeholder=\"Nguy\u1ec5n V\u0103n A\">\n <\/div>\n <div class=\"field\">\n <label>T\u00ean \u0111\u0103ng nh\u1eadp<\/label>\n <input id=\"reg-username\" type=\"text\" placeholder=\"vd: minhnguyen\" autocomplete=\"username\">\n <\/div>\n <div class=\"field\">\n <label>S\u1ed1 \u0111i\u1ec7n tho\u1ea1i (tu\u1ef3 ch\u1ecdn)<\/label>\n <input id=\"reg-phone\" type=\"tel\" placeholder=\"09xxxxxxxx\">\n <\/div>\n <div class=\"field field-pass\">\n <label>M\u1eadt kh\u1ea9u<\/label>\n <input id=\"reg-password\" type=\"password\" placeholder=\"T\u1ed1i thi\u1ec3u 6 k\u00fd t\u1ef1\" autocomplete=\"new-password\" oninput=\"updatePassStrength()\">\n <button type=\"button\" class=\"pass-toggle\" onclick=\"togglePassVisibility('reg-password', this)\" aria-label=\"Hi\u1ec7n m\u1eadt kh\u1ea9u\"><\/button>\n <div class=\"pass-strength\" id=\"pass-strength-bars\">\n <i><\/i><i><\/i><i><\/i>\n <\/div>\n <div class=\"pass-strength-label\" id=\"pass-strength-label\"> <\/div>\n <\/div>\n <div class=\"field field-pass\">\n <label>Nh\u1eadp l\u1ea1i m\u1eadt kh\u1ea9u<\/label>\n <input id=\"reg-password2\" type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" autocomplete=\"new-password\" onkeydown=\"if(event.key==='Enter')handleRegister()\">\n <button type=\"button\" class=\"pass-toggle\" onclick=\"togglePassVisibility('reg-password2', this)\" aria-label=\"Hi\u1ec7n m\u1eadt kh\u1ea9u\"><\/button>\n <\/div>\n <div class=\"auth-error\" id=\"register-error\"><\/div>\n <button class=\"btn-solid auth-submit\" id=\"register-submit-btn\" style=\"width:100%; padding:13px; border-radius:999px; border:none;\" onclick=\"handleRegister()\">\n <span class=\"spinner\"><\/span><span class=\"btn-label\">T\u1ea1o t\u00e0i kho\u1ea3n<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- Logged-in state -->\n <div class=\"acc-card\" id=\"acc-user\" style=\"display:none; margin-top:16px;\">\n <div class=\"acc-avatar\" id=\"acc-avatar-initial\" style=\"font-weight:800; font-size:22px;\"><\/div>\n <h3 id=\"acc-user-name\"><\/h3>\n <p id=\"acc-user-sub\"><\/p>\n <div class=\"acc-actions\">\n <button class=\"btn-outline\" onclick=\"toggleEditProfile()\" id=\"edit-profile-toggle\">Ch\u1ec9nh s\u1eeda<\/button>\n <button class=\"btn-outline\" onclick=\"handleLogout()\">\u0110\u0103ng xu\u1ea5t<\/button>\n <\/div>\n <\/div>\n\n <div class=\"auth-form\" id=\"edit-profile-form\" style=\"display:none; margin: 12px 18px 0;\">\n <div class=\"field\">\n <label>H\u1ecd t\u00ean<\/label>\n <input id=\"edit-name\" type=\"text\">\n <\/div>\n <div class=\"field\">\n <label>S\u1ed1 \u0111i\u1ec7n tho\u1ea1i<\/label>\n <input id=\"edit-phone\" type=\"tel\" placeholder=\"09xxxxxxxx\">\n <\/div>\n <div class=\"auth-error\" id=\"edit-error\"><\/div>\n <button class=\"btn-solid\" style=\"width:100%; padding:13px; border-radius:999px; border:none;\" onclick=\"saveProfileEdit()\">L\u01b0u thay \u0111\u1ed5i<\/button>\n <\/div>\n\n <div class=\"menu-list\">\n <div class=\"menu-row\" onclick=\"showToast('Ch\u01b0a c\u00f3 \u0111\u01a1n h\u00e0ng n\u00e0o')\">\n <div class=\"left\">\ud83d\udce6 \u0110\u01a1n h\u00e0ng c\u1ee7a t\u00f4i<\/div> \u203a\n <\/div>\n <div class=\"menu-row\" onclick=\"toggleWishlistPanel()\">\n <div class=\"left\">\u2661 S\u1ea3n ph\u1ea9m y\u00eau th\u00edch<\/div>\n <span class=\"count\" id=\"wish-count\">0<\/span>\n <\/div>\n <div class=\"menu-row\" onclick=\"showToast('B\u1ea3o h\u00e0nh ch\u00ednh h\u00e3ng to\u00e0n qu\u1ed1c')\">\n <div class=\"left\">\ud83d\udee1 Ch\u00ednh s\u00e1ch b\u1ea3o h\u00e0nh<\/div> \u203a\n <\/div>\n <div class=\"menu-row\" onclick=\"showToast('Hotline: 0949 141 120')\">\n <div class=\"left\">\u260e H\u1ed7 tr\u1ee3 \/ Li\u00ean h\u1ec7<\/div> \u203a\n <\/div>\n <\/div>\n\n <div class=\"wishlist-panel\" id=\"wishlist-panel\" style=\"display:none;\">\n <div class=\"section-head\" style=\"margin: 14px 0 10px;\"><h2>S\u1ea3n ph\u1ea9m y\u00eau th\u00edch<\/h2><\/div>\n <div class=\"grid\" id=\"grid-wishlist\"><\/div>\n <\/div>\n <\/section>\n\n<\/div>\n\n<!-- Bottom nav -->\n<div class=\"bottomnav\">\n <button class=\"navitem active\" data-nav=\"home\" onclick=\"showScreen('home')\">\n <span class=\"nav-dot\"><\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 11l9-7 9 7\"\/><path d=\"M5 10v9a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1v-9\"\/><\/svg>\n Trang ch\u1ee7\n <\/button>\n <button class=\"navitem\" data-nav=\"products\" onclick=\"showScreen('products')\">\n <span class=\"nav-dot\"><\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1.5\"\/><\/svg>\n S\u1ea3n ph\u1ea9m\n <\/button>\n <button class=\"navitem\" data-nav=\"cart\" onclick=\"showScreen('cart')\" style=\"position:relative;\">\n <span class=\"nav-dot\"><\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"20\" r=\"1.3\"\/><circle cx=\"18\" cy=\"20\" r=\"1.3\"\/><path d=\"M2 3h2l2.6 12.4a2 2 0 002 1.6h8.4a2 2 0 002-1.6L21 7H6\"\/><\/svg>\n Gi\u1ecf h\u00e0ng\n <span class=\"cart-badge\" id=\"cart-count\" style=\"display:none;\">0<\/span>\n <\/button>\n <button class=\"navitem\" data-nav=\"account\" onclick=\"showScreen('account')\">\n <span class=\"nav-dot\"><\/span>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 20c0-4 4-6 8-6s8 2 8 6\"\/><\/svg>\n T\u00e0i kho\u1ea3n\n <\/button>\n<\/div>\n\n<!-- Product detail modal -->\n<div class=\"modal-backdrop\" id=\"modal-backdrop\" onclick=\"closeModalBg(event)\">\n <div class=\"sheet\" onclick=\"event.stopPropagation()\">\n <div class=\"sheet-handle\"><\/div>\n <div class=\"thumb\" id=\"modal-thumb\">\n <button class=\"wish-btn\" id=\"modal-wish-btn\" onclick=\"toggleWishModal()\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\"><path d=\"M12 21s-7.5-4.6-10-9.2C.4 8.4 2 4.5 5.6 4c2.1-.3 4 .7 6.4 3 2.4-2.3 4.3-3.3 6.4-3 3.6.5 5.2 4.4 3.6 7.8C19.5 16.4 12 21 12 21z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"cat-tag\" id=\"modal-cat\"><\/div>\n <h3 id=\"modal-name\"><\/h3>\n <div class=\"desc\" id=\"modal-desc\"><\/div>\n <div class=\"price-row\">\n <div class=\"price\" id=\"modal-price\"><\/div>\n <div class=\"qty-stepper\">\n <button onclick=\"modalQty(-1)\">\u2212<\/button>\n <span id=\"modal-qty\">1<\/span>\n <button onclick=\"modalQty(1)\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"sheet-actions\">\n <button class=\"btn-outline\" style=\"border:1px solid var(--line); background:var(--surface); color:var(--ink);\" onclick=\"closeModal()\">\u0110\u00f3ng<\/button>\n <button class=\"btn-solid\" onclick=\"addFromModal()\">Th\u00eam v\u00e0o gi\u1ecf h\u00e0ng<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- Forgot password sheet -->\n<div class=\"modal-backdrop\" id=\"forgot-backdrop\" onclick=\"closeForgotBg(event)\">\n <div class=\"sheet forgot-sheet\" onclick=\"event.stopPropagation()\">\n <div class=\"sheet-handle\"><\/div>\n <h3 style=\"margin-bottom:8px;\">Kh\u00f4i ph\u1ee5c m\u1eadt kh\u1ea9u<\/h3>\n <div class=\"lead\">Nh\u1eadp t\u00ean \u0111\u0103ng nh\u1eadp c\u1ee7a b\u1ea1n. Ch\u00fang t\u00f4i s\u1ebd t\u1ea1o m\u1ed9t m\u1eadt kh\u1ea9u t\u1ea1m th\u1eddi \u0111\u1ec3 b\u1ea1n \u0111\u0103ng nh\u1eadp l\u1ea1i.<\/div>\n <div class=\"field\">\n <label>T\u00ean \u0111\u0103ng nh\u1eadp<\/label>\n <input id=\"forgot-username\" type=\"text\" placeholder=\"vd: minhnguyen\" onkeydown=\"if(event.key==='Enter')handleForgotPassword()\">\n <\/div>\n <div class=\"auth-error\" id=\"forgot-error\"><\/div>\n <div class=\"forgot-success\" id=\"forgot-success\"><\/div>\n <div class=\"sheet-actions\" style=\"margin-top:14px;\">\n <button class=\"btn-outline\" style=\"border:1px solid var(--line); background:var(--surface); color:var(--ink);\" onclick=\"closeForgotSheet()\">\u0110\u00f3ng<\/button>\n <button class=\"btn-solid\" onclick=\"handleForgotPassword()\">G\u1eedi y\u00eau c\u1ea7u<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"toast\" id=\"toast\"><span class=\"tick\">\u2713<\/span><span id=\"toast-text\">\u0110\u00e3 th\u00eam v\u00e0o gi\u1ecf h\u00e0ng<\/span><\/div>\n\n<script>\n\/* ---------------- Icons ---------------- *\/\nconst iconSet = {\n phone: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"7\" y=\"2\" width=\"10\" height=\"20\" rx=\"2.2\"\/><line x1=\"10.5\" y1=\"18.5\" x2=\"13.5\" y2=\"18.5\"\/><\/svg>',\n laptop: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"11\" rx=\"1.4\"\/><path d=\"M2 19h20l-2-4H4l-2 4z\"\/><\/svg>',\n audio: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M4 14v-2a8 8 0 0116 0v2\"\/><rect x=\"2.5\" y=\"14\" width=\"4\" height=\"6\" rx=\"1.5\"\/><rect x=\"17.5\" y=\"14\" width=\"4\" height=\"6\" rx=\"1.5\"\/><\/svg>',\n tablet: '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"5\" y=\"2.5\" width=\"14\" height=\"19\" rx=\"2\"\/><line x1=\"12\" y1=\"18.5\" x2=\"12\" y2=\"18.6\"\/><\/svg>',\n};\n\n\/* ---------------- Product data ---------------- *\/\nconst products = [\n {id:\"iphone17pro\", name:\"iPhone 17 Pro\", cat:\"\u0110i\u1ec7n tho\u1ea1i\", desc:\"Pro \u0111\u1ec9nh cao \u2014 chip A19 Pro, camera 48MP v\u00e0 Apple Intelligence.\", price:34999000, priceLabel:\"T\u1eeb 34.999.000\u0111\", image:\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/vn-11134207-81ztc-mlhcb08i6sjn7b@resize_w900_nl-600x600.webp\"},\n {id:\"iphone17\", name:\"iPhone 17\", cat:\"\u0110i\u1ec7n tho\u1ea1i\", desc:\"C\u00e2n b\u1eb1ng l\u00fd t\u01b0\u1edfng gi\u1eefa thi\u1ebft k\u1ebf th\u1eddi trang v\u00e0 hi\u1ec7u n\u0103ng m\u1ea1nh m\u1ebd.\", price:24999000, priceLabel:\"T\u1eeb 24.999.000\u0111\", image:\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/iphone-17-finish-unselect-gallery-1-202509-600x338.webp\"},\n {id:\"macbookneo\", name:\"MacBook Neo\", cat:\"Laptop\", desc:\"\u0110i\u1ec1u tuy\u1ec7t di\u1ec7u \u1edf Mac, nay \u1edf m\u1ee9c gi\u00e1 b\u1ea5t ng\u1edd.\", price:19499000, priceLabel:\"T\u1eeb 19.499.000\u0111\", image:\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/macbook-neo-color-unselect-202603-gallery-1-600x384.webp\"},\n {id:\"macbookair\", name:\"MacBook Air\", cat:\"Laptop\", desc:\"Si\u00eau m\u1ea1nh m\u1ebd v\u1edbi chip M5, m\u1ecfng nh\u1eb9 t\u1ed1i \u0111a.\", price:33229000, priceLabel:\"T\u1eeb 33.229.000\u0111\", image:\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/macbook-air-size-unselect-202601-gallery-1-600x384.webp\"},\n {id:\"ipadair\", name:\"iPad Air\", cat:\"Tablet\", desc:\"Si\u00eau m\u1ea1nh m\u1ebd v\u1edbi chip M4, linh ho\u1ea1t cho c\u00f4ng vi\u1ec7c v\u00e0 s\u00e1ng t\u1ea1o.\", price:19599000, priceLabel:\"T\u1eeb 19.599.000\u0111\", image:\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/29.webp\"},\n {id:\"airpodsmax\", name:\"AirPods Max 2\", cat:\"\u00c2m thanh\", desc:\"\u00c2m thanh s\u1ed1ng \u0111\u1ed9ng, t\u00ednh n\u0103ng th\u00f4ng minh, ch\u1ed1ng \u1ed3n ch\u1ee7 \u0111\u1ed9ng.\", price:14990000, priceLabel:\"14.990.000\u0111\", image:\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/intelligent_features_static__d8bllbro7xyu_xlarge-e1784444089186-600x608.jpg\"},\n {id:\"taycam\", name:\"Tay C\u1ea7m Xbox360\", cat:\"Gaming\", desc:\"Ch\u00ednh h\u00e3ng 100%, c\u1ea7m ch\u1eafc tay, t\u01b0\u01a1ng th\u00edch \u0111a n\u1ec1n t\u1ea3ng.\", price:1290000, priceLabel:\"T\u1eeb 1.290.000\u0111 (\u01b0\u1edbc t\u00ednh)\", image:\"https:\/\/skibidididdy.io.vn\/wp-content\/uploads\/2026\/07\/TaycamPC2-1024x342.png\"},\n];\nconst categories = [\"T\u1ea5t c\u1ea3\",\"\u0110i\u1ec7n tho\u1ea1i\",\"Laptop\",\"Tablet\",\"\u00c2m thanh\",\"Gaming\"];\n\nlet activeCat = \"T\u1ea5t c\u1ea3\";\nlet searchQuery = \"\";\nlet cart = {};\nlet wishlist = {};\nlet recentlyViewed = [];\nlet modalProduct = null;\nlet modalQtyVal = 1;\n\n\/* ---------------- Persistence ---------------- *\/\nfunction loadJSON(key, fallback){\n try{ const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : fallback; }\n catch(e){ return fallback; }\n}\nfunction saveJSON(key, val){\n try{ localStorage.setItem(key, JSON.stringify(val)); }catch(e){}\n}\nfunction persistCart(){ saveJSON('ps_cart', cart); }\nfunction persistWishlist(){ saveJSON('ps_wishlist', wishlist); }\nfunction persistRecent(){ saveJSON('ps_recent', recentlyViewed); }\n\n\/* ---------------- Rendering helpers ---------------- *\/\nfunction thumbHTML(p){\n if(p.image) return `<img decoding=\"async\" src=\"${p.image}\" alt=\"${p.name}\" loading=\"lazy\" onload=\"this.parentElement.classList.remove('loading')\" onerror=\"this.parentElement.innerHTML=''; this.parentElement.classList.remove('loading')\">`;\n return iconSet[p.icon] || '';\n}\n\nfunction renderChips(containerId){\n const el = document.getElementById(containerId);\n el.innerHTML = categories.map(c => `<div class=\"cat-chip ${c===activeCat?'active':''}\" onclick=\"selectCat('${c}', '${containerId}')\">${c}<\/div>`).join('');\n}\nfunction selectCat(c, fromId){\n activeCat = c;\n if(fromId === 'cats-home'){ showScreen('products'); }\n renderChips('cats-home'); renderChips('cats-products');\n applyProductFilters();\n}\nfunction applyProductFilters(){\n let list = products.filter(p => activeCat==='T\u1ea5t c\u1ea3' || p.cat===activeCat);\n if(searchQuery){\n const q = searchQuery.toLowerCase();\n list = list.filter(p => p.name.toLowerCase().includes(q) || p.cat.toLowerCase().includes(q));\n }\n renderGrid('grid-all', list, true);\n}\nfunction onSearchInput(){\n const input = document.getElementById('product-search');\n searchQuery = input.value.trim();\n document.getElementById('search-clear-btn').classList.toggle('show', searchQuery.length>0);\n applyProductFilters();\n}\nfunction clearSearch(){\n searchQuery = \"\";\n document.getElementById('product-search').value = \"\";\n document.getElementById('search-clear-btn').classList.remove('show');\n applyProductFilters();\n}\n\nfunction pcardHTML(p, allowEmpty){\n const wished = !!wishlist[p.id];\n return `\n <div class=\"pcard\" onclick=\"openModal('${p.id}')\">\n <div class=\"thumb loading\">\n ${thumbHTML(p)}\n <button class=\"wish-btn ${wished?'active':''}\" onclick=\"event.stopPropagation(); toggleWish('${p.id}')\">\n <svg viewBox=\"0 0 24 24\" fill=\"${wished?'currentColor':'none'}\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 21s-7.5-4.6-10-9.2C.4 8.4 2 4.5 5.6 4c2.1-.3 4 .7 6.4 3 2.4-2.3 4.3-3.3 6.4-3 3.6.5 5.2 4.4 3.6 7.8C19.5 16.4 12 21 12 21z\"\/><\/svg>\n <\/button>\n <\/div>\n <div class=\"cat-tag\">${p.cat}<\/div>\n <div class=\"name\">${p.name}<\/div>\n <div class=\"row\">\n <div class=\"price mono\">${p.priceLabel}<\/div>\n <button class=\"addbtn\" onclick=\"event.stopPropagation(); quickAdd('${p.id}')\">+<\/button>\n <\/div>\n <\/div>`;\n}\nfunction renderGrid(elId, list, allowEmpty){\n const el = document.getElementById(elId);\n if(list.length===0 && allowEmpty){\n el.innerHTML = `<div class=\"empty-state\" style=\"grid-column:1\/-1;\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><line x1=\"21\" y1=\"21\" x2=\"16.6\" y2=\"16.6\"\/><\/svg>\n <p>Kh\u00f4ng t\u00ecm th\u1ea5y s\u1ea3n ph\u1ea9m ph\u00f9 h\u1ee3p<\/p>\n <\/div>`;\n return;\n }\n el.innerHTML = list.map(p => pcardHTML(p)).join('');\n}\n\n\/* ---------------- Screen switching ---------------- *\/\nfunction showScreen(name){\n document.querySelectorAll('.screen').forEach(s => s.classList.toggle('active', s.dataset.screen===name));\n document.querySelectorAll('.navitem').forEach(n => n.classList.toggle('active', n.dataset.nav===name));\n if(name==='cart') renderCart();\n if(name==='account') renderWishlistPanel();\n window.scrollTo({top:0, behavior:'instant'});\n}\nfunction goHome(){ showScreen('home'); }\n\n\/* ---------------- Wishlist ---------------- *\/\nfunction updateWishBadge(){\n document.getElementById('wish-count').textContent = Object.keys(wishlist).length;\n}\nfunction toggleWish(id){\n if(wishlist[id]) delete wishlist[id]; else wishlist[id] = true;\n persistWishlist();\n updateWishBadge();\n applyProductFilters();\n renderGrid('grid-featured', products.slice(0,4));\n renderWishlistPanel();\n if(modalProduct && modalProduct.id===id) syncModalWishIcon();\n}\nfunction toggleWishModal(){\n if(!modalProduct) return;\n toggleWish(modalProduct.id);\n}\nfunction syncModalWishIcon(){\n const wished = !!wishlist[modalProduct.id];\n const btn = document.getElementById('modal-wish-btn');\n btn.classList.toggle('active', wished);\n btn.querySelector('svg').setAttribute('fill', wished ? 'currentColor' : 'none');\n}\nlet wishlistPanelOpen = false;\nfunction toggleWishlistPanel(){\n wishlistPanelOpen = !wishlistPanelOpen;\n renderWishlistPanel();\n}\nfunction renderWishlistPanel(){\n const panel = document.getElementById('wishlist-panel');\n panel.style.display = wishlistPanelOpen ? 'block' : 'none';\n if(!wishlistPanelOpen) return;\n const ids = Object.keys(wishlist);\n const list = products.filter(p => ids.includes(p.id));\n const grid = document.getElementById('grid-wishlist');\n if(list.length===0){\n grid.innerHTML = `<div class=\"empty-state\" style=\"grid-column:1\/-1;\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M12 21s-7.5-4.6-10-9.2C.4 8.4 2 4.5 5.6 4c2.1-.3 4 .7 6.4 3 2.4-2.3 4.3-3.3 6.4-3 3.6.5 5.2 4.4 3.6 7.8C19.5 16.4 12 21 12 21z\"\/><\/svg>\n <p>Ch\u01b0a c\u00f3 s\u1ea3n ph\u1ea9m y\u00eau th\u00edch n\u00e0o<\/p>\n <\/div>`;\n return;\n }\n grid.innerHTML = list.map(p => pcardHTML(p)).join('');\n}\n\n\/* ---------------- Recently viewed ---------------- *\/\nfunction pushRecentlyViewed(id){\n recentlyViewed = recentlyViewed.filter(x => x!==id);\n recentlyViewed.unshift(id);\n recentlyViewed = recentlyViewed.slice(0,6);\n persistRecent();\n renderRecentlyViewed();\n}\nfunction renderRecentlyViewed(){\n const section = document.getElementById('rv-section');\n const row = document.getElementById('rv-row');\n const list = recentlyViewed.map(id => products.find(p=>p.id===id)).filter(Boolean);\n if(list.length===0){ section.style.display='none'; return; }\n section.style.display='block';\n row.innerHTML = list.map(p => `\n <div class=\"rv-card\" onclick=\"openModal('${p.id}')\">\n <div class=\"rv-thumb\">${thumbHTML(p)}<\/div>\n <div class=\"rv-name\">${p.name}<\/div>\n <\/div>`).join('');\n}\n\n\/* ---------------- Modal ---------------- *\/\nfunction openModal(id){\n modalProduct = products.find(p=>p.id===id);\n modalQtyVal = 1;\n document.getElementById('modal-thumb').innerHTML = thumbHTML(modalProduct) + `\n <button class=\"wish-btn\" id=\"modal-wish-btn\" onclick=\"toggleWishModal()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 21s-7.5-4.6-10-9.2C.4 8.4 2 4.5 5.6 4c2.1-.3 4 .7 6.4 3 2.4-2.3 4.3-3.3 6.4-3 3.6.5 5.2 4.4 3.6 7.8C19.5 16.4 12 21 12 21z\"\/><\/svg>\n <\/button>`;\n document.getElementById('modal-cat').textContent = modalProduct.cat;\n document.getElementById('modal-name').textContent = modalProduct.name;\n document.getElementById('modal-desc').textContent = modalProduct.desc;\n document.getElementById('modal-price').textContent = modalProduct.priceLabel;\n document.getElementById('modal-qty').textContent = modalQtyVal;\n document.getElementById('modal-backdrop').classList.add('show');\n syncModalWishIcon();\n pushRecentlyViewed(id);\n}\nfunction closeModal(){ document.getElementById('modal-backdrop').classList.remove('show'); }\nfunction closeModalBg(e){ if(e.target.id==='modal-backdrop') closeModal(); }\nfunction modalQty(delta){\n modalQtyVal = Math.max(1, modalQtyVal + delta);\n document.getElementById('modal-qty').textContent = modalQtyVal;\n}\nfunction addFromModal(){\n cart[modalProduct.id] = (cart[modalProduct.id]||0) + modalQtyVal;\n persistCart();\n updateCartBadge();\n showToast(`\u0110\u00e3 th\u00eam \"${modalProduct.name}\" x${modalQtyVal} v\u00e0o gi\u1ecf h\u00e0ng`);\n closeModal();\n}\nfunction quickAdd(id){\n const p = products.find(x=>x.id===id);\n cart[id] = (cart[id]||0) + 1;\n persistCart();\n updateCartBadge();\n showToast(`\u0110\u00e3 th\u00eam \"${p.name}\" v\u00e0o gi\u1ecf h\u00e0ng`);\n}\n\n\/* ---------------- Cart ---------------- *\/\nfunction cartCountTotal(){ return Object.values(cart).reduce((a,b)=>a+b,0); }\nfunction updateCartBadge(){\n const n = cartCountTotal();\n const badge = document.getElementById('cart-count');\n badge.style.display = n>0 ? 'flex':'none';\n badge.textContent = n;\n}\nfunction changeCartQty(id, delta){\n cart[id] = (cart[id]||0) + delta;\n if(cart[id] <= 0) delete cart[id];\n persistCart();\n updateCartBadge();\n renderCart();\n}\nfunction removeCartItem(id){\n delete cart[id];\n persistCart();\n updateCartBadge();\n renderCart();\n}\nfunction renderCart(){\n const ids = Object.keys(cart);\n const content = document.getElementById('cart-content');\n const summaryWrap = document.getElementById('cart-summary-wrap');\n if(ids.length===0){\n content.innerHTML = `\n <div class=\"empty-state\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><circle cx=\"9\" cy=\"20\" r=\"1.3\"\/><circle cx=\"18\" cy=\"20\" r=\"1.3\"\/><path d=\"M2 3h2l2.6 12.4a2 2 0 002 1.6h8.4a2 2 0 002-1.6L21 7H6\"\/><\/svg>\n <p>Gi\u1ecf h\u00e0ng c\u1ee7a b\u1ea1n \u0111ang tr\u1ed1ng<\/p>\n <button class=\"btn-pill\" onclick=\"showScreen('products')\">Kh\u00e1m ph\u00e1 s\u1ea3n ph\u1ea9m<\/button>\n <\/div>`;\n summaryWrap.innerHTML = '';\n return;\n }\n content.innerHTML = ids.map(id => {\n const p = products.find(x=>x.id===id);\n const qty = cart[id];\n return `\n <div class=\"cart-row\">\n <div class=\"thumb\">${thumbHTML(p)}<\/div>\n <div class=\"info\">\n <div class=\"name\">${p.name}<\/div>\n <div class=\"unit\">${p.priceLabel}<\/div>\n <div class=\"qty-stepper\">\n <button onclick=\"changeCartQty('${id}', -1)\">\u2212<\/button>\n <span>${qty}<\/span>\n <button onclick=\"changeCartQty('${id}', 1)\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"right\">\n <button class=\"removebtn\" onclick=\"removeCartItem('${id}')\">\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M3 6h18M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2m2 0v14a1 1 0 01-1 1H7a1 1 0 01-1-1V6\"\/><\/svg>\n <\/button>\n <div class=\"linetotal\">${(p.price*qty).toLocaleString('vi-VN')}\u0111<\/div>\n <\/div>\n <\/div>`;\n }).join('');\n\n const subtotal = ids.reduce((sum,id)=> sum + products.find(x=>x.id===id).price * cart[id], 0);\n summaryWrap.innerHTML = `\n <div class=\"cart-summary\">\n <div class=\"sum-row\"><span>T\u1ea1m t\u00ednh<\/span><span class=\"mono\">${subtotal.toLocaleString('vi-VN')}\u0111<\/span><\/div>\n <div class=\"sum-row\"><span>V\u1eadn chuy\u1ec3n<\/span><span>Mi\u1ec5n ph\u00ed<\/span><\/div>\n <div class=\"sum-row total\"><span>T\u1ed5ng c\u1ed9ng<\/span><span class=\"mono\">${subtotal.toLocaleString('vi-VN')}\u0111<\/span><\/div>\n <button class=\"checkout-btn\" onclick=\"checkout()\">\u0110\u1eb7t h\u00e0ng<\/button>\n <\/div>`;\n}\nfunction checkout(){\n showToast('\u0110\u1eb7t h\u00e0ng th\u00e0nh c\u00f4ng! (demo giao di\u1ec7n)');\n cart = {};\n persistCart();\n updateCartBadge();\n renderCart();\n setTimeout(()=> showScreen('home'), 900);\n}\n\n\/* ---------------- Toast ---------------- *\/\nlet toastTimer;\nfunction showToast(msg){\n const t = document.getElementById('toast');\n document.getElementById('toast-text').textContent = msg;\n t.classList.add('show');\n clearTimeout(toastTimer);\n toastTimer = setTimeout(()=> t.classList.remove('show'), 1900);\n}\n\n\/* ---------------- Auth ---------------- *\/\nlet currentUser = null;\nconst EYE_OPEN = '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1.5 12S5 5 12 5s10.5 7 10.5 7-3.5 7-10.5 7S1.5 12 1.5 12z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>';\nconst EYE_CLOSED = '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3l18 18\"\/><path d=\"M10.6 5.2A10.6 10.6 0 0112 5c7 0 10.5 7 10.5 7a15.6 15.6 0 01-3.4 4.2M6.6 6.6C3.4 8.6 1.5 12 1.5 12s3.5 7 10.5 7a10.2 10.2 0 004.9-1.2\"\/><path d=\"M9.9 9.9a3 3 0 004.2 4.2\"\/><\/svg>';\n\nfunction simpleHash(str){\n let h = 5381;\n for(let i=0; i<str.length; i++){ h = ((h*33) ^ str.charCodeAt(i)) >>> 0; }\n return h.toString(36);\n}\nfunction loadUsers(){ return loadJSON('ps_users', {}); }\nfunction saveUsers(users){ saveJSON('ps_users', users); }\n\n\/* Session: \"remember me\" checked -> localStorage (persists across browser restarts).\n Unchecked -> sessionStorage (cleared when the tab\/browser closes). *\/\nfunction saveSession(username, remember){\n const payload = JSON.stringify({username});\n try{\n if(remember){ localStorage.setItem('ps_session', payload); sessionStorage.removeItem('ps_session'); }\n else{ sessionStorage.setItem('ps_session', payload); localStorage.removeItem('ps_session'); }\n }catch(e){}\n}\nfunction loadSession(){\n try{\n const raw = sessionStorage.getItem('ps_session') || localStorage.getItem('ps_session');\n return raw ? JSON.parse(raw) : null;\n }catch(e){ return null; }\n}\nfunction clearSession(){\n try{ localStorage.removeItem('ps_session'); sessionStorage.removeItem('ps_session'); }catch(e){}\n}\n\n\/* Password visibility toggle, shared by all password fields *\/\nfunction togglePassVisibility(inputId, btn){\n const input = document.getElementById(inputId);\n const showing = input.type === 'text';\n input.type = showing ? 'password' : 'text';\n btn.innerHTML = showing ? EYE_OPEN : EYE_CLOSED;\n}\n\n\/* Live password strength meter for the register form *\/\nfunction updatePassStrength(){\n const val = document.getElementById('reg-password').value;\n const bars = document.querySelectorAll('#pass-strength-bars i');\n const label = document.getElementById('pass-strength-label');\n let score = 0;\n if(val.length >= 6) score++;\n if(val.length >= 10 && \/[0-9]\/.test(val) && \/[a-zA-Z]\/.test(val)) score++;\n if(val.length >= 10 && \/[^a-zA-Z0-9]\/.test(val)) score++;\n const colors = ['var(--line)', 'var(--comb)', 'var(--corn)', 'var(--teal)'];\n const labels = ['', 'Y\u1ebfu', 'Trung b\u00ecnh', 'M\u1ea1nh'];\n bars.forEach((bar, i) => { bar.style.background = i < score ? colors[score] : 'var(--line)'; });\n label.textContent = val ? labels[score] : '\\u00A0';\n label.style.color = score ? colors[score] : 'var(--ink-dim)';\n}\n\nfunction setSubmitLoading(btnId, loading){\n const btn = document.getElementById(btnId);\n if(!btn) return;\n btn.classList.toggle('loading', loading);\n btn.disabled = loading;\n}\n\nfunction switchAuthTab(tab){\n document.querySelectorAll('.auth-tab').forEach(t=>t.classList.toggle('active', t.dataset.tab===tab));\n document.getElementById('form-login').style.display = tab==='login' ? 'block' : 'none';\n document.getElementById('form-register').style.display = tab==='register' ? 'block' : 'none';\n document.getElementById('login-error').textContent = '';\n document.getElementById('register-error').textContent = '';\n}\n\nfunction handleRegister(){\n const name = document.getElementById('reg-name').value.trim();\n const username = document.getElementById('reg-username').value.trim().toLowerCase();\n const phone = document.getElementById('reg-phone').value.trim();\n const pass = document.getElementById('reg-password').value;\n const pass2 = document.getElementById('reg-password2').value;\n const errEl = document.getElementById('register-error');\n errEl.textContent = '';\n\n if(!name || !username || !pass){ errEl.textContent = 'Vui l\u00f2ng \u0111i\u1ec1n \u0111\u1ea7y \u0111\u1ee7 h\u1ecd t\u00ean, t\u00ean \u0111\u0103ng nh\u1eadp v\u00e0 m\u1eadt kh\u1ea9u.'; return; }\n if(!\/^[a-z0-9_.]{3,20}$\/.test(username)){ errEl.textContent = 'T\u00ean \u0111\u0103ng nh\u1eadp 3-20 k\u00fd t\u1ef1: ch\u1eef th\u01b0\u1eddng, s\u1ed1, d\u1ea5u . ho\u1eb7c _.'; return; }\n if(pass.length < 6){ errEl.textContent = 'M\u1eadt kh\u1ea9u c\u1ea7n t\u1ed1i thi\u1ec3u 6 k\u00fd t\u1ef1.'; return; }\n if(pass !== pass2){ errEl.textContent = 'M\u1eadt kh\u1ea9u nh\u1eadp l\u1ea1i kh\u00f4ng kh\u1edbp.'; return; }\n\n const users = loadUsers();\n if(users[username]){ errEl.textContent = 'T\u00ean \u0111\u0103ng nh\u1eadp \u0111\u00e3 t\u1ed3n t\u1ea1i, h\u00e3y ch\u1ecdn t\u00ean kh\u00e1c.'; return; }\n\n setSubmitLoading('register-submit-btn', true);\n setTimeout(()=>{\n users[username] = { name, phone, passHash: simpleHash(pass), createdAt: Date.now() };\n saveUsers(users);\n\n currentUser = { username, name, phone };\n saveSession(username, true);\n renderAccount();\n setSubmitLoading('register-submit-btn', false);\n showToast(`Ch\u00e0o m\u1eebng ${name}! T\u00e0i kho\u1ea3n \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea1o \ud83c\udf89`);\n }, 450);\n}\n\nfunction handleLogin(){\n const username = document.getElementById('login-username').value.trim().toLowerCase();\n const pass = document.getElementById('login-password').value;\n const remember = document.getElementById('login-remember').checked;\n const errEl = document.getElementById('login-error');\n errEl.textContent = '';\n\n if(!username || !pass){ errEl.textContent = 'Nh\u1eadp t\u00ean \u0111\u0103ng nh\u1eadp v\u00e0 m\u1eadt kh\u1ea9u.'; return; }\n\n const users = loadUsers();\n const u = users[username];\n if(!u || u.passHash !== simpleHash(pass)){ errEl.textContent = 'Sai t\u00ean \u0111\u0103ng nh\u1eadp ho\u1eb7c m\u1eadt kh\u1ea9u.'; return; }\n\n setSubmitLoading('login-submit-btn', true);\n setTimeout(()=>{\n currentUser = { username, name: u.name, phone: u.phone };\n saveSession(username, remember);\n renderAccount();\n setSubmitLoading('login-submit-btn', false);\n showToast(`Ch\u00e0o m\u1eebng tr\u1edf l\u1ea1i, ${u.name}! \ud83d\udc4b`);\n }, 350);\n}\n\nfunction handleLogout(){\n currentUser = null;\n clearSession();\n document.getElementById('edit-profile-form').style.display = 'none';\n renderAccount();\n showToast('\u0110\u00e3 \u0111\u0103ng xu\u1ea5t');\n}\n\n\/* ---------------- Forgot password ---------------- *\/\nfunction openForgotSheet(){\n document.getElementById('forgot-username').value = '';\n document.getElementById('forgot-error').textContent = '';\n const success = document.getElementById('forgot-success');\n success.classList.remove('show');\n success.textContent = '';\n document.getElementById('forgot-backdrop').classList.add('show');\n}\nfunction closeForgotSheet(){ document.getElementById('forgot-backdrop').classList.remove('show'); }\nfunction closeForgotBg(e){ if(e.target.id==='forgot-backdrop') closeForgotSheet(); }\n\nfunction handleForgotPassword(){\n const username = document.getElementById('forgot-username').value.trim().toLowerCase();\n const errEl = document.getElementById('forgot-error');\n const successEl = document.getElementById('forgot-success');\n errEl.textContent = '';\n successEl.classList.remove('show');\n\n if(!username){ errEl.textContent = 'Nh\u1eadp t\u00ean \u0111\u0103ng nh\u1eadp c\u1ee7a b\u1ea1n.'; return; }\n const users = loadUsers();\n const u = users[username];\n if(!u){ errEl.textContent = 'Kh\u00f4ng t\u00ecm th\u1ea5y t\u00e0i kho\u1ea3n v\u1edbi t\u00ean \u0111\u0103ng nh\u1eadp n\u00e0y.'; return; }\n\n \/* Demo flow: generate a temporary password so the user can log back in.\n A real backend would email\/SMS this instead of showing it on screen. *\/\n const temp = Math.random().toString(36).slice(-8);\n u.passHash = simpleHash(temp);\n saveUsers(users);\n\n successEl.textContent = `M\u1eadt kh\u1ea9u t\u1ea1m th\u1eddi c\u1ee7a b\u1ea1n l\u00e0: ${temp}. H\u00e3y \u0111\u0103ng nh\u1eadp r\u1ed3i \u0111\u1ed5i l\u1ea1i m\u1eadt kh\u1ea9u ngay.`;\n successEl.classList.add('show');\n}\n\n\/* ---------------- Edit profile ---------------- *\/\nfunction toggleEditProfile(){\n const form = document.getElementById('edit-profile-form');\n const open = form.style.display === 'block';\n if(open){ form.style.display = 'none'; return; }\n document.getElementById('edit-name').value = currentUser.name;\n document.getElementById('edit-phone').value = currentUser.phone || '';\n document.getElementById('edit-error').textContent = '';\n form.style.display = 'block';\n}\nfunction saveProfileEdit(){\n const name = document.getElementById('edit-name').value.trim();\n const phone = document.getElementById('edit-phone').value.trim();\n const errEl = document.getElementById('edit-error');\n errEl.textContent = '';\n if(!name){ errEl.textContent = 'H\u1ecd t\u00ean kh\u00f4ng \u0111\u01b0\u1ee3c \u0111\u1ec3 tr\u1ed1ng.'; return; }\n\n const users = loadUsers();\n const u = users[currentUser.username];\n u.name = name; u.phone = phone;\n saveUsers(users);\n currentUser.name = name; currentUser.phone = phone;\n\n document.getElementById('edit-profile-form').style.display = 'none';\n renderAccount();\n showToast('\u0110\u00e3 c\u1eadp nh\u1eadt h\u1ed3 s\u01a1');\n}\n\nfunction renderAccount(){\n const guest = document.getElementById('acc-guest');\n const userCard = document.getElementById('acc-user');\n const dot = document.getElementById('acc-dot');\n if(currentUser){\n guest.style.display = 'none';\n userCard.style.display = 'block';\n dot.classList.remove('show');\n document.getElementById('acc-avatar-initial').textContent = currentUser.name.trim().charAt(0).toUpperCase();\n document.getElementById('acc-user-name').textContent = currentUser.name;\n document.getElementById('acc-user-sub').textContent = '@' + currentUser.username + (currentUser.phone ? ' \u00b7 ' + currentUser.phone : '');\n } else {\n guest.style.display = 'block';\n userCard.style.display = 'none';\n document.getElementById('edit-profile-form').style.display = 'none';\n dot.classList.add('show');\n ['login-username','login-password','reg-name','reg-username','reg-phone','reg-password','reg-password2'].forEach(id=>{\n const el = document.getElementById(id);\n if(el) el.value = '';\n });\n updatePassStrength();\n }\n}\n\nfunction initAuth(){\n \/* Populate the eye icons for the three password fields *\/\n document.querySelectorAll('.pass-toggle').forEach(btn => { btn.innerHTML = EYE_OPEN; });\n\n const session = loadSession();\n if(session && session.username){\n const users = loadUsers();\n const u = users[session.username];\n if(u){ currentUser = { username: session.username, name: u.name, phone: u.phone }; }\n }\n renderAccount();\n}\n\n\/* ---------------- Init ---------------- *\/\ncart = loadJSON('ps_cart', {});\nwishlist = loadJSON('ps_wishlist', {});\nrecentlyViewed = loadJSON('ps_recent', []);\n\nrenderChips('cats-home');\nrenderChips('cats-products');\nrenderGrid('grid-featured', products.slice(0,4));\nrenderGrid('grid-all', products);\nrenderRecentlyViewed();\nupdateCartBadge();\nupdateWishBadge();\ninitAuth();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n <ul>\n\t\t\t <\/ul>\n <\/div> \n","protected":false},"excerpt":{"rendered":"<p>PolyShop PolyShop Ch\u00e0o m\u1eebng tr\u1edf l\u1ea1i Mua s\u1eafm nhanh h\u01a1n c\u00f9ng PolyShop \u01afu \u0111\u00e3i \u0111\u1ed9c quy\u1ec1n, theo d\u00f5i \u0111\u01a1n h\u00e0ng th\u1eddi gian th\u1ef1c v\u00e0 \u0111\u1ec1 xu\u1ea5t d\u00e0nh ri\u00eang cho b\u1ea1n. Kh\u00e1m ph\u00e1 s\u1ea3n ph\u1ea9m \u0110\u00e3 xem g\u1ea7n \u0111\u00e2y N\u1ed5i b\u1eadt h\u00f4m nay Xem t\u1ea5t c\u1ea3 \ud83d\udd25 FLASH SALE Gi\u1ea3m \u0111\u1ebfn 70% -70% Kh\u00e1ch h\u00e0ng n\u00f3i…<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8039","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/skibidididdy.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/8039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skibidididdy.io.vn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skibidididdy.io.vn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skibidididdy.io.vn\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/skibidididdy.io.vn\/index.php\/wp-json\/wp\/v2\/comments?post=8039"}],"version-history":[{"count":0,"href":"https:\/\/skibidididdy.io.vn\/index.php\/wp-json\/wp\/v2\/pages\/8039\/revisions"}],"wp:attachment":[{"href":"https:\/\/skibidididdy.io.vn\/index.php\/wp-json\/wp\/v2\/media?parent=8039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}