*{box-sizing:border-box}
:root{--ink:#182238;--muted:#738096;--line:#e7ebf2;--bg:#f5f7fb;--card:#fff;--red:#e51f36;--red2:#b90f27;--gold:#d7a33a;--green:#16875b;--blue:#4267d5;--shadow:0 12px 32px rgba(24,34,56,.08)}
html,body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.site-header{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 max(20px,calc((100% - 1120px)/2));position:sticky;top:0;z-index:10}
.brand-row{display:flex;align-items:center;gap:12px}.brand-logo{width:44px;height:44px}.brand-row b{display:block;font-size:17px;letter-spacing:.3px}.brand-row span{display:block;color:#7a8496;font-size:12px;margin-top:2px}
.brand-mark{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#ff3046,#c90e27);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px;box-shadow:0 8px 20px rgba(229,31,54,.22)}
.support-container{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:26px 0 48px}
.hero{position:relative;overflow:hidden;border-radius:24px;padding:34px 34px 30px;background:linear-gradient(115deg,#fff 0%,#fff7f4 52%,#fff 100%);border:1px solid #f0e5e3;box-shadow:var(--shadow);margin-bottom:24px}
.hero:after{content:"";position:absolute;width:290px;height:290px;border-radius:50%;right:-80px;top:-110px;background:radial-gradient(circle,rgba(229,31,54,.18),rgba(229,31,54,0) 67%)}
.hero:before{content:"";position:absolute;width:130px;height:130px;border-radius:28px;right:120px;bottom:-60px;transform:rotate(22deg);background:rgba(215,163,58,.11)}
.hero-content{position:relative;z-index:1;max-width:700px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.7px;color:var(--red);margin-bottom:10px}.hero h1{font-size:clamp(34px,5vw,52px);line-height:1.05;margin:0 0 12px;letter-spacing:-1.6px}.hero p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;max-width:620px}
.hero-badge{position:absolute;right:34px;bottom:28px;z-index:1;display:flex;align-items:center;gap:10px;background:#fff;padding:10px 13px;border-radius:14px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(24,34,56,.08);font-size:12px;font-weight:700}.hero-badge img{width:34px;height:34px}

.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.category-card{border:1px solid var(--line);background:#fff;border-radius:18px;padding:18px;display:grid;grid-template-columns:46px 1fr 20px;align-items:center;gap:14px;text-align:left;min-height:88px;transition:.2s;box-shadow:0 5px 18px rgba(24,34,56,.035)}
.category-card:hover{transform:translateY(-2px);border-color:#d7ddea;box-shadow:var(--shadow)}
.category-card b{display:block;font-size:15px}.category-card small{display:block;color:var(--muted);font-size:12px;margin-top:5px;line-height:1.4}.category-card i{font-size:27px;color:#a4adbc;font-style:normal}.category-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff3f1;color:var(--red);font-size:21px;font-weight:800;border:1px solid #f5ddda}
.login-card-link .category-icon{background:#edf2ff;color:#3e5cc7;border-color:#dbe2ff}
.panel{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:25px}
.back-link-btn,.back-link{border:0;background:none;color:#657086;padding:0;font-weight:700}.back-link-btn:hover,.back-link:hover{color:var(--red)}
.topic-head{display:flex;gap:16px;align-items:center;padding:15px 0 22px;border-bottom:1px solid var(--line);margin-bottom:20px}.topic-icon{width:52px;height:52px;border-radius:16px;background:#fff0ee;color:var(--red);display:grid;place-items:center;font-size:24px;font-weight:900}.topic-head h2{margin:2px 0 5px;font-size:24px}.topic-head p{margin:0;color:var(--muted);font-size:13px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{min-width:0}.field.full{grid-column:1/-1}
label{display:block;font-size:12px;font-weight:800;color:#4f5b70;margin:0 0 7px}label em{font-style:normal;color:var(--red)}
input,select,textarea{width:100%;border:1px solid #dfe4ec;border-radius:12px;background:#fbfcfe;color:var(--ink);padding:13px 14px;outline:0;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:#c5cedd;box-shadow:0 0 0 4px rgba(66,103,213,.08);background:#fff}textarea{resize:vertical;min-height:105px}
.upload-box{padding:15px;border:1px dashed #ccd4e1;border-radius:15px;background:#fafbfe}.upload-box input{background:#fff}.upload-box small{display:block;color:#8993a5;margin-top:7px}
.primary-btn{border:0;border-radius:13px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;padding:14px 17px;font-weight:800;display:flex;justify-content:space-between;align-items:center;box-shadow:0 10px 22px rgba(229,31,54,.18);margin-top:5px}.primary-btn:hover{filter:brightness(.98);transform:translateY(-1px)}.primary-btn:disabled{opacity:.6;transform:none}.full{width:100%}
.success{margin-top:15px;padding:16px;border-radius:14px;background:#edf9f3;border:1px solid #ccebdc;color:#146e4d}.success b,.success span,.success small{display:block}.success span{margin-top:5px}.success small{margin-top:4px;color:#5b7a6d}.alert{margin:15px 0;padding:13px 14px;border-radius:12px;font-size:13px}.danger{background:#fff0f1;border:1px solid #f5cdd2;color:#a6192e}
.progress-panel{margin-top:30px;border-radius:22px;padding:26px;background:linear-gradient(135deg,#1b2436,#29344a);color:#fff;box-shadow:var(--shadow)}.progress-panel h2{margin:3px 0 7px;font-size:25px}.progress-panel p{margin:0;color:#bac3d2;font-size:13px;line-height:1.5}.eyebrow.light{color:#f1c65d}.progress-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:18px}.progress-form input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}.progress-form input::placeholder{color:#aeb8c8}.light-btn{border:0;border-radius:12px;padding:0 20px;background:#fff;color:#202a3c;font-weight:800}.progress-item{background:#fff;color:var(--ink);margin-top:10px;padding:14px;border-radius:14px;display:grid;grid-template-columns:1fr auto;gap:5px}.progress-item b,.progress-item span,.progress-item small{display:block}.progress-item span{font-size:12px;color:#657086;margin-top:4px}.progress-item small{font-size:11px;color:#9aa3b1;margin-top:3px}.progress-item p{grid-column:1/-1;color:#59667a;background:#f7f8fb;padding:10px;border-radius:10px}.status{display:inline-flex;align-items:center;height:28px;padding:0 9px;border-radius:20px;font-size:11px;font-weight:800;background:#f0f2f6;color:#5c6677}.status.pending{background:#fff6dc;color:#9a6a00}.status.in-review{background:#edf2ff;color:#3d59b7}.status.approved,.status.resolved{background:#eaf8f1;color:#15734d}.status.rejected{background:#fff0f1;color:#a6192e}.empty-light{color:#aeb8c8;margin-top:15px}.loading{color:#c4ccda;margin-top:14px}

.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 10%,#fff 0,#f4f6fb 45%,#edf0f6 100%)}.login-wrap{width:min(430px,100%)}.login-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}.login-card .brand-row{margin-bottom:28px}.login-title{font-size:29px;font-weight:850;letter-spacing:-.7px}.muted{color:var(--muted);font-size:13px;line-height:1.5}.login-card form{margin-top:22px}.login-card label{margin-top:15px}.login-card .primary-btn{margin-top:22px}.back-link{display:block;text-align:center;margin-top:18px;text-decoration:none;font-size:13px}

.admin-page{background:#f4f6fa}.admin-layout{min-height:100vh;display:flex}.sidebar{width:250px;background:#121a2a;color:#fff;padding:22px 15px;position:fixed;left:0;top:0;bottom:0}.sidebar .brand-row{padding:4px 7px 25px}.sidebar .brand-row span{color:#9ca7b9}.sidebar .brand-row b{color:#fff}.side-title{font-size:10px;color:#7f8ba1;font-weight:800;letter-spacing:1.4px;padding:8px}.side-item{width:100%;border:0;background:transparent;color:#c4ccda;padding:11px 10px;border-radius:10px;text-align:left;display:flex;justify-content:space-between;font-size:12px;margin:2px 0}.side-item:hover,.side-item.active{background:#202b40;color:#fff}.side-item span{background:#2d3950;padding:2px 7px;border-radius:20px;font-size:10px}.side-logout{position:absolute;bottom:20px;left:22px;color:#c4ccda;text-decoration:none;font-size:12px}.admin-main{margin-left:250px;width:calc(100% - 250px);padding:30px;max-width:1450px}.admin-top{display:flex;justify-content:space-between;align-items:flex-start}.admin-top h1{font-size:31px;margin:0}.admin-top p{margin:5px 0;color:var(--muted);font-size:13px}.admin-user{background:#fff;border:1px solid var(--line);border-radius:20px;padding:9px 12px;font-size:12px}.admin-user span{color:#2eaa75;margin-right:5px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:22px 0}.stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:0 4px 15px rgba(24,34,56,.035)}.stat-card small{display:block;color:#7d8798;font-size:11px}.stat-card b{display:block;font-size:25px;margin-top:5px}.toolbar{display:grid;grid-template-columns:1fr 180px 90px;gap:9px;margin-bottom:13px}.refresh-btn{border:1px solid var(--line);background:#fff;border-radius:11px;font-weight:700}.ticket-list{display:grid;gap:10px}.ticket-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 45px 15px 17px;cursor:pointer;transition:.15s}.ticket-card:hover{border-color:#ccd4e2;box-shadow:var(--shadow);transform:translateY(-1px)}.ticket-line{display:flex;justify-content:space-between;align-items:center}.ticket-no{font-size:11px;color:#8791a2;font-weight:800}.ticket-card h3{font-size:14px;margin:10px 0 4px}.ticket-card p{font-size:12px;color:#737e91;margin:0}.ticket-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;color:#9099a9;font-size:10px}.ticket-meta b{color:#586377}.ticket-arrow{position:absolute;right:17px;top:50%;font-size:25px;color:#a1aaba}.empty{background:#fff;border:1px dashed #ccd4e1;padding:40px;text-align:center;color:#8a94a6;border-radius:16px}
.modal{display:none;position:fixed;inset:0;background:rgba(8,14,26,.58);z-index:50;padding:20px;overflow:auto}.modal.show{display:grid;place-items:center}.modal-card{position:relative;width:min(820px,100%);background:#fff;border-radius:22px;padding:25px;max-height:92vh;overflow:auto}.modal-close{position:absolute;right:15px;top:12px;border:0;background:#f2f4f8;border-radius:50%;width:34px;height:34px;font-size:22px}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;padding-right:35px}.modal-header small{color:#8a94a6;font-weight:800}.modal-header h2{margin:5px 0 18px;font-size:23px}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}.detail-cell{background:#fafbfc;padding:12px}.detail-cell small{display:block;color:#8b95a5;font-size:10px}.detail-cell b{display:block;font-size:12px;margin-top:4px;word-break:break-word}.message-box{margin-top:13px;background:#f7f8fb;border-radius:14px;padding:14px}.message-box small{font-size:10px;font-weight:800;color:#8993a4}.message-box p{white-space:pre-wrap;font-size:12px;line-height:1.55}.attachment-row{margin:13px 0}.attachment-link{display:inline-block;padding:9px 12px;border-radius:10px;background:#edf2ff;color:#3e5cc7;text-decoration:none;font-size:12px;font-weight:800}.no-attachment{font-size:12px;color:#99a2b1}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-card form label{margin-top:13px}.modal-card .primary-btn{margin-top:15px}

@media(max-width:760px){
 .site-header{height:64px;padding:0 16px}.brand-logo{width:40px;height:40px}.brand-row b{font-size:15px}
 .support-container{width:calc(100% - 24px);padding:14px 0 30px}
 .hero{border-radius:19px;padding:24px 20px 22px}.hero h1{font-size:35px;letter-spacing:-1px}.hero p{font-size:14px;max-width:90%}.hero-badge{position:relative;right:auto;bottom:auto;width:max-content;margin-top:18px}.hero:after{right:-130px}
 .category-grid{grid-template-columns:1fr;gap:10px}.category-card{min-height:80px;padding:14px}
 .panel{padding:17px;border-radius:18px}.topic-head{align-items:flex-start}.topic-head h2{font-size:20px}.fields{grid-template-columns:1fr}.field.full{grid-column:auto}
 .progress-form{grid-template-columns:1fr}.light-btn{padding:13px}
 .progress-item{grid-template-columns:1fr}.progress-item .status{width:max-content}
 .admin-layout{display:block}.sidebar{position:relative;width:100%;height:auto;bottom:auto}.side-logout{position:static;display:block;margin:15px 7px 3px}.admin-main{margin-left:0;width:100%;padding:18px 12px}.admin-top{gap:10px}.admin-top h1{font-size:25px}.admin-user{display:none}.stat-grid{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr}.side-item{width:49%;display:inline-flex}.detail-grid{grid-template-columns:repeat(2,1fr)}.review-grid{grid-template-columns:1fr}
}
@media(max-width:390px){.category-card{grid-template-columns:42px 1fr 16px}.category-icon{width:42px;height:42px}.hero h1{font-size:32px}.detail-grid{grid-template-columns:1fr}}


/* Self Service Center — mobile-first professional layout */
.service-header{height:64px;background:#fff;border-bottom:1px solid #eceef3;position:sticky;top:0;z-index:20}
.service-inner{height:100%;width:min(760px,100%);margin:auto;display:grid;grid-template-columns:48px 1fr 70px;align-items:center;padding:0 14px}
.home-btn{border:0;background:transparent;color:#333;font-size:30px;line-height:1;padding:0;text-align:left}
.service-title{text-align:center;font-size:19px;font-weight:500;letter-spacing:-.2px}
.lang-pill{justify-self:end;font-size:15px;display:flex;align-items:center;gap:5px;color:#252525}
.self-service{width:min(720px,100%);margin:0 auto;padding:0 0 46px;background:#f7f7fd;min-height:calc(100vh - 64px)}
.welcome-banner{height:240px;position:relative;overflow:hidden;padding:27px 20px;background:linear-gradient(115deg,#df6b13 0%,#f19a18 48%,#d8750c 100%);color:#fff}
.welcome-banner:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.5px);background-size:18px 18px;opacity:.55}
.banner-copy{position:relative;z-index:2;width:61%}
.banner-brand{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900;margin-bottom:12px}
.banner-brand img{width:30px;height:30px;filter:brightness(0) invert(1)}
.banner-copy h1{font-size:27px;line-height:1.06;letter-spacing:-.8px;margin:0 0 12px;text-shadow:0 2px 1px rgba(126,52,0,.35)}
.banner-url{display:inline-block;background:rgba(255,255,255,.94);color:#d87911;padding:5px 9px;border-radius:5px;font-weight:800;font-size:11px}
.banner-copy p{font-size:10px;margin:9px 0 0;opacity:.95}
.banner-art{position:absolute;right:-10px;bottom:-5px;width:44%;height:100%}
.headset-circle{position:absolute;right:60px;top:30px;width:75px;height:75px;border:4px solid rgba(255,255,255,.8);border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:900;font-size:25px;line-height:.7}
.headset-circle small{font-size:7px;letter-spacing:1px}
.support-orb{position:absolute;right:9px;bottom:46px;width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.17);border:2px solid rgba(255,255,255,.7);display:grid;place-items:center;font-size:40px;transform:rotate(-18deg)}
.person-card{position:absolute;right:72px;bottom:-22px;width:104px;height:128px;border-radius:60px 60px 10px 10px;background:linear-gradient(#ffe3cf,#f8bd92);box-shadow:0 10px 30px rgba(101,43,0,.25);display:grid;place-items:center}
.person-face{width:63px;height:63px;border-radius:50%;background:#f6c7a2;display:grid;place-items:center;color:#fff;font-weight:900;font-size:17px;border:4px solid #fff}
.person-headset{position:absolute;width:72px;height:72px;border:5px solid #fff;border-bottom-color:transparent;border-radius:50%}
.section-title{font-size:26px;font-weight:500;margin:0;padding:30px 20px 17px;color:#343434}
.service-list{background:#fff;margin:0 20px;border-radius:3px;overflow:hidden;box-shadow:0 1px 5px rgba(20,30,50,.035)}
.service-row{width:100%;min-height:92px;border:0;border-bottom:1px solid #ececec;background:#fff;display:grid;grid-template-columns:58px 1fr 28px;gap:9px;align-items:center;text-align:left;padding:13px 12px 13px 15px;color:#313131}
.service-row:last-child{border-bottom:0}
.service-row:active{background:#faf7f2}
.row-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e9d0b4,#c87921);color:#fff;font-size:23px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.row-text b{display:block;font-size:18px;font-weight:500;line-height:1.18}
.row-text small{display:block;color:#7f7f7f;font-size:12px;margin-top:4px;line-height:1.25}
.chevron{font-size:33px;font-weight:300;color:#9a9a9a;text-align:right}
.admin-row .row-icon{background:linear-gradient(145deg,#b51d2f,#7c0f1d)}
.tips{padding:26px 20px 10px;color:#666}
.tips h2{font-size:25px;font-weight:500;color:#333;margin:0 0 16px}
.tips p{font-size:15px;line-height:1.35;margin:0 0 10px}
.inner-view{padding:18px 20px 35px}
.return-btn{border:0;background:transparent;color:#777;padding:0 0 16px;font-size:14px;font-weight:600}
.selected-title{background:#fff;border-radius:10px;padding:17px;display:flex;gap:13px;align-items:flex-start;box-shadow:0 2px 10px rgba(20,30,50,.05);margin-bottom:14px}
.selected-icon{width:48px;height:48px;flex:0 0 48px;border-radius:50%;background:linear-gradient(145deg,#e9d0b4,#c87921);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}
.selected-title span{font-size:9px;color:#c57a28;font-weight:800;letter-spacing:1.2px}
.selected-title h2{font-size:21px;line-height:1.15;margin:3px 0 5px;color:#202737}
.selected-title p{font-size:12px;color:#7b8492;line-height:1.35;margin:0}
.request-form{background:#fff;border-radius:10px;padding:17px;box-shadow:0 2px 10px rgba(20,30,50,.05)}
.request-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.request-form .field{min-width:0}
.request-form label{display:block;font-size:12px;font-weight:700;color:#555f70;margin:0 0 7px}
.request-form label em{color:#d51d32;font-style:normal}
.request-form input,.request-form select,.request-form textarea{width:100%;border:1px solid #e2e5ea;background:#fbfcfe;border-radius:8px;padding:12px 12px;outline:none;color:#252c38;font-size:14px}
.request-form input:focus,.request-form select:focus,.request-form textarea:focus{border-color:#c57a28;box-shadow:0 0 0 3px rgba(197,122,40,.08)}
.request-form textarea{resize:vertical}
.request-form .full{grid-column:1/-1}
.request-form .upload-box{margin-top:13px;padding:13px;background:#faf8f5;border:1px dashed #d9c4aa;border-radius:8px}
.request-form .upload-box input{background:#fff}
.progress-icon{background:linear-gradient(145deg,#6ba77c,#267b4c)}
.progress-form-single{display:grid;gap:13px}
.progress-form-single .primary-btn{margin-top:4px}
#submitResult,#progressResult{margin-top:13px}
.loading,.empty-light{padding:15px;text-align:center;color:#7b8492;background:#f7f8fa;border-radius:8px;font-size:13px}
@media(max-width:600px){
 .welcome-banner{height:240px}
 .banner-copy{width:66%}.banner-copy h1{font-size:25px}.banner-art{width:40%}
 .person-card{right:32px;width:88px;height:115px}.headset-circle{right:15px;top:25px;width:62px;height:62px}.support-orb{right:-2px;bottom:45px;width:65px;height:65px}
 .service-row{min-height:83px}.row-text b{font-size:16px}
 .request-form .fields{grid-template-columns:1fr}.request-form .full{grid-column:auto}
}
@media(max-width:390px){
 .service-inner{grid-template-columns:42px 1fr 62px}.service-title{font-size:17px}
 .welcome-banner{height:230px;padding-left:16px}.banner-copy h1{font-size:23px}.banner-copy{width:68%}.banner-art{width:38%}
 .service-list{margin:0 12px}.section-title{padding-left:12px}.tips{padding-left:12px;padding-right:12px}.inner-view{padding-left:12px;padding-right:12px}
}

/* Final reference-style service grid */
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 20px}
.service-row{min-height:118px;border:1px solid #ececec!important;border-radius:12px!important;grid-template-columns:52px 1fr 20px;gap:8px;padding:15px 12px!important;box-shadow:0 2px 8px rgba(20,30,50,.035)}
.service-row:hover{background:#fff;box-shadow:0 5px 16px rgba(20,30,50,.08);transform:translateY(-1px)}
.row-icon{width:50px;height:50px;border-radius:50%;padding:7px;background:linear-gradient(145deg,#f0dfca,#c87921)!important}
.row-icon img{width:100%;height:100%;display:block}
.row-text b{font-size:16px!important;font-weight:700!important}.row-text small{font-size:11px!important}
.chevron{font-size:30px}
@media(max-width:430px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 12px}.service-row{min-height:126px;grid-template-columns:44px 1fr 16px;padding:12px 9px!important;gap:6px}.row-icon{width:44px;height:44px}.row-text b{font-size:14px!important}.row-text small{font-size:10px!important}.chevron{font-size:26px}}
@media(max-width:340px){.service-grid{grid-template-columns:1fr}.service-row{min-height:86px;grid-template-columns:50px 1fr 18px}.row-icon{width:48px;height:48px}.row-text b{font-size:16px!important}}