:root{--blue:#087fce;--blue-dark:#075ea5;--ink:#1d2d3b;--muted:#778391;--line:#e7edf2;--paper:#f3f6f9;--green:#148653;--amber:#b87500;--red:#c43c45;--shadow:0 8px 26px rgba(27,61,91,.08)}
*{box-sizing:border-box}html{min-height:100%;background:var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Roboto,"Segoe UI",Arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}a{color:var(--blue);text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}.app-shell{width:100%;max-width:560px;min-height:100dvh;margin:0 auto;background:#f8fafc;position:relative;box-shadow:0 0 28px #19354b0b;padding-bottom:calc(74px + env(safe-area-inset-bottom))}.app-header{color:#fff;padding:16px 18px 22px;background:linear-gradient(135deg,#078de4,#075cae);border-radius:0 0 22px 22px;box-shadow:0 8px 22px #087fce24}.header-row{display:flex;align-items:center;justify-content:space-between}.brand-link{display:flex;align-items:center;gap:10px;color:#fff}.brand-link b{font-size:15px;display:block}.brand-link small{font-size:10px;display:block;opacity:.8;margin-top:2px}.brand-mark{width:52px;height:52px;border-radius:17px;background:#fff;color:var(--blue);display:grid;place-items:center;font-weight:900;font-size:19px;box-shadow:0 8px 20px #003e7725}.brand-mark.small{width:38px;height:38px;border-radius:13px;font-size:14px}.icon-button{width:40px;height:40px;border-radius:50%;background:#ffffff20;display:grid;place-items:center;color:#fff;font-size:22px;position:relative}.unread-dot{position:absolute;top:-3px;right:-2px;border-radius:10px;background:#eb4d59;color:#fff;font-size:10px;font-style:normal;min-width:17px;height:17px;display:grid;place-items:center;border:1px solid #087fce}.welcome{margin:22px 2px 0;display:flex;flex-direction:column}.welcome span{font-size:12px;opacity:.86}.welcome strong{font-size:23px;line-height:1.25;margin:2px 0 5px}.welcome small{opacity:.82;font-size:11px}.main-content{padding:0 15px 18px}.page-heading{padding:18px 2px 4px}.page-heading h1{font-size:20px;margin:0 0 12px;letter-spacing:-.3px}.hero-card{margin:8px 0 15px;padding:19px;border-radius:18px;color:#fff;background:linear-gradient(140deg,#078de4,#075ea5);box-shadow:0 10px 24px #087fce2b;overflow:hidden;position:relative}.hero-top{display:flex;justify-content:space-between;align-items:center}.hero-card h2{font-size:22px;line-height:1.25;margin:18px 0 7px}.hero-card p{font-size:12px;opacity:.9;margin:0 0 16px}.hero-spark{font-size:43px;opacity:.65}.pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:700;line-height:1.2}.pill.light{color:#fff;background:#ffffff2b}.green-pill{color:#137646;background:#e0f5e9}.gray-pill{color:#5e6a75;background:#edf0f3}.blue-pill{color:#076db3;background:#e4f3ff}.amber-pill{color:#9c6500;background:#fff2d1}.button{border:0;border-radius:11px;min-height:46px;padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:13px;text-align:center;cursor:pointer;width:100%}.button.primary{background:var(--blue);color:#fff;box-shadow:0 5px 12px #087fce28}.button.white{width:auto;display:inline-flex;background:#fff;color:#076db3;min-height:40px;padding:9px 14px}.button.outline{background:#fff;border:1px solid var(--line);color:var(--blue)}.button.danger{background:#fff3f3;border:1px solid #f4dada;color:var(--red);margin-top:12px}.small-button{width:auto;min-height:38px;padding:9px 12px;margin-top:9px;font-size:12px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:22px}.quick-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:13px 5px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink);box-shadow:0 3px 10px #143e5a08}.quick-card b{font-size:17px}.quick-card small{font-size:10px;color:var(--muted)}.quick-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:18px}.quick-icon.blue{color:var(--blue);background:#e7f4ff}.quick-icon.amber{color:var(--amber);background:#fff3d8}.quick-icon.green{color:var(--green);background:#e5f7ee}.section{margin:20px 0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px}.section-head h2{font-size:15px;margin:0}.section-head a{font-size:11px;font-weight:700;white-space:nowrap}.empty-card{background:#fff;border:1px dashed #d9e2e9;color:var(--muted);border-radius:14px;padding:18px;text-align:center;font-size:12px;line-height:1.6}.device-card,.history-card,.notice-card,.schedule-card,.review-card,.profile-card,.booking-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px;margin-bottom:10px;box-shadow:0 4px 14px #143e5a07}.device-card{display:flex;align-items:center;gap:12px;background:linear-gradient(125deg,#fff,#f2f9ff);border-color:#dcecf8}.device-photo{width:74px;height:84px;flex:0 0 74px;display:grid;place-items:center;border-radius:12px;background:#fff;border:1px solid #edf1f4;overflow:hidden;font-size:30px}.device-photo img{width:100%;height:100%;object-fit:contain}.device-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.device-info h3{font-size:14px;color:#0878c5;margin:3px 0 0}.device-info p,.device-info small{font-size:11px;margin:0;color:#697887;overflow-wrap:anywhere}.large-device{align-items:flex-start;padding:15px}.large-device .device-photo{width:92px;height:112px;flex-basis:92px}.history-card b{font-size:13px;display:block;margin:9px 0 4px}.history-card small{font-size:11px;color:var(--muted);display:block;line-height:1.5;overflow-wrap:anywhere}.history-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.history-top small{font-size:10px}.price{font-size:13px;color:#d8493f;display:block;margin-top:8px}.notice-card,.schedule-card{display:flex;align-items:flex-start;gap:10px}.notice-icon{flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:#e8f5ff;color:var(--blue);display:grid;place-items:center;font-weight:800}.notice-icon.amber-icon{background:#fff3d8;color:var(--amber)}.notice-card b,.schedule-card b{font-size:12px}.notice-card p,.schedule-card p{font-size:11px;color:#647383;line-height:1.5;margin:4px 0}.notice-card a,.small-link{font-size:11px;font-weight:700}.schedule-card{align-items:center}.schedule-card>div{flex:1}.intro{line-height:1.6}.review-card h3{font-size:15px;margin:11px 0 3px}.review-card>small{font-size:10px;color:var(--muted)}.review-card>p{font-size:12px;line-height:1.55;color:#526170;margin:12px 0}.review-card form{margin-top:14px}.form-label,.form-stack label{font-size:12px;font-weight:700;color:#44515e;display:block}.form-stack{display:grid;gap:14px}.form-stack label input,.form-stack label select,.form-stack label textarea,.review-form textarea{display:block;margin-top:6px;width:100%;min-height:46px;padding:11px 12px;border:1px solid #d9e1e7;border-radius:10px;background:#fff;color:var(--ink);font-size:14px;outline:none}.form-stack label textarea,.review-form textarea{min-height:90px;resize:vertical}.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.review-form textarea:focus{border-color:#58aee8;box-shadow:0 0 0 3px #078de41c}.booking-card{padding:16px}.booking-intro{display:flex;gap:10px;align-items:flex-start;margin-bottom:18px}.booking-intro>span{font-size:25px}.booking-intro h2{font-size:16px;margin:2px 0 5px}.booking-intro p{color:var(--muted);font-size:11px;line-height:1.5;margin:0}.rating-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0 17px}.rating-row label{min-width:0;position:relative;text-align:center;border:1px solid var(--line);border-radius:11px;padding:8px 3px;cursor:pointer}.rating-row input{position:absolute;opacity:0}.rating-row span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;margin:0 auto 5px;background:#edf6fd;color:var(--blue);font-weight:800}.rating-row small{font-size:9px;line-height:1.2;color:#5e6c79;display:block}.rating-row label:has(input:checked){border-color:var(--blue);background:#eff8ff}.rating-row label:has(input:checked) span{background:var(--blue);color:white}.check-row{display:flex;align-items:flex-start;gap:9px;padding:11px 0;border-bottom:1px solid #f0f2f4;font-size:12px;line-height:1.4}.check-row input{margin:2px 0 0;width:17px;height:17px;accent-color:var(--blue);flex:0 0 17px}.profile-card{text-align:left}.profile-card>h2{text-align:center;font-size:17px;margin:10px 0 3px}.profile-card>p{text-align:center;color:var(--muted);font-size:11px;margin:0 0 14px}.profile-avatar{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#e4f4ff;color:var(--blue);font-size:23px;font-weight:800;margin:0 auto}.profile-row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid #edf0f2;font-size:12px;color:#536170}.profile-row b{text-align:right;color:#25394b;max-width:62%;overflow-wrap:anywhere}.alert{border-radius:11px;padding:11px 12px;font-size:12px;line-height:1.5;margin:9px 0}.alert.error{background:#fff0f0;color:#9d2630;border:1px solid #f4d4d6}.alert.success{background:#eaf8ef;color:#176c42;border:1px solid #d1efdc}.bottom-nav{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,560px);padding:8px 5px calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:#ffffffed;backdrop-filter:blur(14px);border-top:1px solid var(--line)}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:#82909c;font-size:9px;font-weight:600;padding:2px}.bottom-nav a span{font-size:20px;line-height:23px}.bottom-nav a.active{color:var(--blue)}.login-shell{min-height:100dvh;padding:20px;display:grid;place-items:center;background:radial-gradient(circle at top right,#dbf1ff 0,transparent 42%),var(--paper)}.login-card{width:100%;max-width:420px;background:#fff;padding:26px 22px;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.login-card .brand-mark{margin-bottom:18px}.eyebrow{color:var(--blue);font-size:10px;letter-spacing:1.6px;font-weight:800;margin:0 0 5px}.login-card h1{font-size:24px;margin:0 0 8px}.muted{color:var(--muted);font-size:12px}.login-card>.muted{line-height:1.55;margin:0 0 21px}.login-help{font-size:11px;line-height:1.6;color:var(--muted);text-align:center;margin-top:18px}.secure-note{margin-top:17px;padding:10px;border-radius:10px;background:#f1f8fd;color:#557082;font-size:10px;text-align:center}
@media(min-width:700px){body{padding:22px}.app-shell{border-radius:22px;min-height:calc(100dvh - 44px);padding-bottom:25px}.app-header{border-radius:22px}.bottom-nav{position:sticky;transform:none;left:auto;width:100%;max-width:560px;margin:-72px auto 0;border:1px solid var(--line);border-radius:16px;padding:10px;background:#fff}.main-content{padding-bottom:75px}.login-card{padding:34px}}
@media(max-width:360px){.main-content{padding-left:11px;padding-right:11px}.welcome strong{font-size:21px}.quick-grid{gap:6px}.rating-row{gap:4px}.rating-row small{font-size:8px}.device-photo{width:62px;flex-basis:62px}}
.search-form{display:flex;gap:8px;margin:6px 0 15px}.search-form input{min-width:0;flex:1;border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:#fff}.search-form .button{width:auto;min-width:95px}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-card{min-width:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 14px #143e5a07}.product-card>img,.product-placeholder{width:100%;height:135px;object-fit:contain;background:#f7fafc}.product-placeholder{display:grid;place-items:center;font-size:38px}.product-body{padding:10px}.product-body>small{color:var(--muted);font-size:9px}.product-body h2{font-size:12px;line-height:1.4;min-height:34px;margin:5px 0}.product-body>strong{font-size:13px;color:#d8493f;display:block}.product-body .button{width:100%;font-size:10px;padding:8px 4px}.category-chips{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.category-chips a{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:#fff;color:#586777;padding:8px 12px;font-size:10px}.category-chips a.selected{background:#e7f4ff;border-color:#acd9f8;color:#0878c5;font-weight:700}.article-card{display:flex;gap:12px;align-items:flex-start;padding:11px;margin-bottom:10px;border:1px solid var(--line);background:#fff;border-radius:14px;color:var(--ink);box-shadow:0 4px 14px #143e5a07}.article-card>img{width:90px;height:92px;flex:0 0 90px;object-fit:cover;border-radius:10px;background:#f4f7f9}.article-card h2{font-size:13px;line-height:1.4;margin:7px 0 4px}.article-card p{font-size:10px;line-height:1.5;color:#6b7885;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.article-card small{font-size:9px;color:var(--muted)}

/* Bám sát giaodien_khachhang.html: khung mobile 414px, header xanh, thẻ máy, thao tác nhanh và thanh điều hướng dưới. */
body{background:#f0f2f5;color:#333;display:flex;justify-content:center}
.app-shell{width:100%;max-width:414px;min-height:100vh;min-height:100dvh;margin:0 auto;background:#f8f9fa;position:relative;box-shadow:0 0 20px rgba(0,0,0,.1);padding:0 0 calc(68px + env(safe-area-inset-bottom));overflow-x:hidden;display:flex;flex-direction:column}
.app-header.mock-home-header{position:sticky;top:0;z-index:100;background:linear-gradient(135deg,#0287e7,#0056b3);color:#fff;padding:16px 16px 20px;border-radius:0 0 16px 16px;box-shadow:none}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.user-avatar-row{display:flex;align-items:center;gap:10px;min-width:0}
.mock-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:#d9efff;color:#0878c5;border:2px solid #fff;font-size:17px;font-weight:800}
.greeting-text{font-size:12px;opacity:.9}.user-name-title{font-size:16px;font-weight:700;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge-member{font-size:10px;background:rgba(255,255,255,.2);padding:3px 8px;border-radius:10px;display:inline-block;margin-top:3px}
.btn-notif-bell{position:relative;flex:0 0 36px;width:36px;height:36px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);color:#fff;font-size:17px}
.notif-dot{position:absolute;top:1px;right:0;min-width:16px;height:16px;padding:0 3px;background:#e74c3c;color:#fff;border:1px solid #0287e7;border-radius:50%;display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:700}
.sub-header{position:sticky;top:0;z-index:90;min-height:52px;padding:10px 14px;background:#fff;color:#1a2a3a;border-bottom:1px solid #e1e8ed;display:flex;align-items:center;justify-content:space-between}
.sub-header .btn-back{width:30px;height:30px;display:grid;place-items:center;color:#1a2a3a;font-size:27px;line-height:1}.sub-title{flex:1;text-align:center;font-size:16px;font-weight:700}.sub-spacer{width:30px;flex:0 0 30px}
.main-content{width:100%;flex:1;min-width:0;overflow-x:hidden;padding:12px 12px 20px}.page-alerts:empty{display:none}.page-alerts{margin:0}.page-alerts:has(.alert){margin:0 0 9px}
.home-content{padding:0}.hero-device-card{padding:12px;margin:0 0 12px;background:linear-gradient(135deg,#fff,#f0f7ff);border:1px solid #d0e3f7;border-radius:12px;box-shadow:none}
.device-flex{display:flex;align-items:center;gap:12px;min-width:0}.device-img-thumb{width:80px;height:90px;flex:0 0 80px;border-radius:8px;object-fit:contain;padding:4px;background:#fff;border:1px solid #eee;display:grid;place-items:center;overflow:hidden;font-size:32px}.device-img-thumb img{width:100%;height:100%;object-fit:contain}.device-info-col{flex:1;min-width:0}.device-model-name{font-size:15px;font-weight:700;color:#0287e7;overflow-wrap:anywhere}.device-sn{font-size:11px;color:#666;margin:3px 0}.tag-status{display:inline-block;padding:3px 8px;border-radius:12px;font-size:10px;font-weight:700;margin-top:4px;background:#d4edda;color:#155724}.home-device-meta{margin-top:4px;font-size:11px;color:#555}.home-device-button{width:100%;min-height:34px;margin-top:10px;padding:6px 10px;border-radius:6px;font-size:12px;display:flex;align-items:center;justify-content:center;background:#0287e7;color:#fff}.home-device-button.btn-outline{background:#fff;border:1px solid #0287e7;color:#0287e7}.device-placeholder{background:#fff;color:#0287e7}
.card-title-row{font-size:14px;font-weight:700;color:#1a2a3a;margin:2px 0 10px;display:flex;align-items:center;justify-content:space-between}.home-notice-heading{margin-top:2px}.home-notice-heading a{font-size:12px;color:#0287e7;font-weight:500}
.mock-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}.quick-item{min-width:0;display:block;text-align:center;padding:12px 4px;background:#fff;border:1px solid #e9ecef;border-radius:10px;color:#333;box-shadow:none}.quick-icon-wrap{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin:0 auto 6px;color:#fff;font-size:19px;font-weight:700}.bg-qr{background:#0287e7}.bg-tech{background:#28a745}.bg-history{background:#ffc107;color:#fff}.bg-shop{background:#fd7e14}.quick-label{display:block;font-size:11px;font-weight:600;color:#333;line-height:1.25;overflow-wrap:anywhere}
.notif-card-item{display:block;padding:10px 12px;margin:0 0 8px;border:0;border-left:4px solid #0287e7;border-radius:10px;background:#fff;color:#333;box-shadow:0 1px 3px rgba(0,0,0,.03)}.notif-card-item.urgent{border-left-color:#e74c3c;background:#fff5f5}.notif-card-item.tech{border-left-color:#fd7e14;background:#fff9db}.notif-title{display:flex;justify-content:space-between;gap:8px;color:#1a2a3a;font-size:13px;font-weight:700}.notif-time{flex:0 0 auto;color:#888;font-size:10px;font-weight:400}.notif-desc{margin-top:4px;color:#555;font-size:12px;line-height:1.4}.home-empty-notice{padding:14px;border-radius:10px;background:#fff}.home-lower-section{margin:16px 0 0;padding:0;background:transparent;border:0;box-shadow:none}.section{margin:12px 0;padding:14px;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.03)}.section-head{margin:0 0 10px}.section-head h2{color:#1a2a3a;font-size:14px}.section-head a{font-size:11px;color:#0287e7}
.device-card,.history-card,.notice-card,.schedule-card,.review-card,.profile-card,.booking-card{border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.03)}
.bottom-nav{position:fixed;z-index:100;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:414px;padding:8px 0 calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:#fff;border-top:1px solid #e1e8ed;backdrop-filter:none}.bottom-nav a{flex:1;padding:2px 0;color:#666;font-size:10px;font-weight:500;gap:2px}.bottom-nav a span{font-size:18px;line-height:21px}.bottom-nav a.active{color:#0287e7}
.login-shell{width:100%;max-width:414px;min-height:100dvh;margin:0 auto;padding:20px;background:#f0f2f5}.login-card{border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
@media(min-width:600px){body{padding:16px 0}.app-shell{min-height:calc(100vh - 32px);border-radius:16px}.app-header.mock-home-header{border-radius:16px 16px 16px 16px}.bottom-nav{bottom:16px;border-radius:0 0 16px 16px}.login-shell{min-height:calc(100vh - 32px);border-radius:16px}}
@media(max-width:360px){.main-content{padding-left:10px;padding-right:10px}.mock-quick-grid{gap:5px}.quick-item{padding-left:2px;padding-right:2px}.user-name-title{max-width:190px}}