@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');
:root{
  --blue-dark:#0d5f9e;
  --blue-mid:#0f74c2;
  --blue:#1a8fd1;
  --blue-light:#2bafe6;
  --blue-header-a:#00abf0;
  --blue-header-b:#0074c7;
  --blue-menu-a:#0072c8;
  --blue-menu-b:#01aef2;
  --blue-menu-line:rgba(255,255,255,.22);
  --app-blue:#3667a1;
  --link-blue:#35699e;
  --table-head:#3667a1;
  --grey-bg:#eef1f3;
  --card-bg:#e7ecef;
  --grey-line:#cdd2d4;
  --grey-text:#9aa0a6;
  --dark-text:#4a4e52;
  --darker-text:#1c1e21;
  --white:#ffffff;
  --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
a{text-decoration:none; color:inherit;}
html,body{margin:0; padding:0; height:100%; font-family:var(--font); color:var(--dark-text);}
body{display:flex; align-items:flex-start; justify-content:center; min-height:100vh; background:#e9ebee; padding:28px 0;}

#device{
  position:relative; width:390px; min-height:844px;
  background:var(--white); overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 8px 30px rgba(0,0,0,.10);
}

/* Header */
.app-header{
  flex:0 0 auto; height:56px;
  background:linear-gradient(90deg, var(--blue-header-a) 0%, var(--blue-header-b) 100%);
  display:flex; align-items:center; justify-content:space-between; padding:0 14px;
  position:relative; z-index:35;
}
.app-header .hdr-title{
  position:absolute; left:0; right:0; text-align:center; color:#fff; font-size:17px;
  font-weight:800; letter-spacing:.3px; pointer-events:none; text-transform:uppercase;
  padding:0 60px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.icon-btn{background:none; border:none; padding:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; width:32px; height:32px;}
.icon-btn svg{width:24px; height:24px;}
.hdr-spacer{width:32px; height:32px;}

/* Content */
#content-wrap{flex:1 1 auto; position:relative; background:var(--grey-bg);}
.screen{background:var(--grey-bg); padding-bottom:14px; min-height:600px;}

/* Bottom nav */
#bottomnav{flex:0 0 auto; display:flex; background:#fff; border-top:1px solid var(--grey-line); padding:8px 0 14px; position:relative; z-index:35;}
.nav-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; cursor:pointer; color:#2b2b2b; font-size:11px; font-weight:700;}
.nav-item svg{width:24px; height:24px; stroke:var(--grey-text);}
.nav-item .nav-ic{width:27px; height:27px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid transparent;}
.nav-item.active .nav-ic{border-color:var(--blue-mid);}
.nav-item.active svg{stroke:var(--blue-mid);}

/* Login */
#screen-login{background:radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.2px) 0 0/16px 16px, linear-gradient(160deg, #1aa6e6 0%, #4fc3ef 55%, #bfe9fb 100%); display:flex; flex-direction:column; min-height:844px;}
.login-topbar{display:flex; justify-content:space-between; align-items:center; padding:16px 18px 0;}
.flag{width:34px; height:24px; background:#da251d; border-radius:3px; display:flex; align-items:center; justify-content:center;}
.flag svg{width:16px; height:16px; fill:#ffce00;}
.login-logo-wrap{display:flex; flex-direction:column; align-items:center; margin-top:36px;}
.login-logo{width:150px; height:150px; border-radius:50%; background:#0f6fb3; border:5px solid #fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,60,100,.25);}
.login-form{padding:34px 30px 0;}
.login-field{display:flex; align-items:center; gap:12px; background:#fff; border-radius:8px; padding:14px 16px; margin-bottom:16px; box-shadow:0 2px 10px rgba(0,40,80,.08);}
.login-field .fi-icon{width:34px; height:34px; border-radius:6px; background:var(--blue-mid); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.login-field .fi-icon svg{width:18px; height:18px; fill:#fff;}
.login-field input{border:none; outline:none; flex:1; font-size:16px; font-weight:600; color:var(--dark-text); background:transparent; width:100%;}
.login-links{display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin:2px 4px 22px;}
.login-links a{color:var(--blue-dark);}
.login-error{background:#fdecea; border:1px solid #f3b7b0; color:#a02c22; font-weight:700; font-size:13px; padding:10px 14px; border-radius:8px; margin-bottom:14px;}
.btn-login-row{display:flex; gap:12px; align-items:stretch;}
.btn-login{flex:1; background:#fff; border:2px solid var(--blue-mid); color:var(--blue-mid); font-weight:800; font-size:16px; padding:14px 0; border-radius:8px; cursor:pointer; font-family:var(--font);}
.btn-face{width:52px; flex:0 0 52px; border:2px solid var(--blue-mid); border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center;}
.btn-face svg{width:24px; height:24px;}
.btn-vneid{margin-top:16px; width:100%; background:#c22b1f; color:#fff; border:none; border-radius:8px; padding:14px 12px; font-weight:800; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:12px; cursor:pointer; font-family:var(--font);}
.vneid-badge{width:40px; height:40px; border-radius:50%; background:#0a5c2b; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.vneid-badge svg{width:22px; height:22px; fill:#ffce00;}
.login-footer{text-align:center; margin-top:auto; padding:26px 20px 8px; font-size:13px; font-weight:700;}
.login-footer a{color:var(--blue-dark); display:block; margin-bottom:10px;}
.login-bar{display:flex; justify-content:space-around; padding:14px 24px 22px; color:var(--blue-dark);}
.login-bar svg{width:22px; height:22px;}

/* Side menu */
#menu-overlay{position:absolute; inset:0; z-index:60; display:none;}
#menu-overlay.open{display:block;}
.menu-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.4);}
.menu-drawer{position:absolute; top:0; bottom:0; left:0; width:78%; background:linear-gradient(180deg, var(--blue-menu-a) 0%, var(--blue-menu-b) 100%); color:#fff; overflow-y:auto; padding-top:20px; box-shadow:6px 0 24px rgba(0,0,0,.3); font-family:var(--font);}
.menu-profile{display:flex; flex-direction:column; align-items:center; text-align:center; padding:14px 10px 18px; border-bottom:1px solid var(--blue-menu-line);}
.menu-avatar{width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.menu-avatar svg{width:36px; height:36px; fill:#fff;}
.menu-name{font-weight:800; font-size:16px;}
.menu-id{font-weight:700; font-size:14px; opacity:.9; margin-top:2px;}
.menu-list{list-style:none; margin:0; padding:6px 0 0;}
.menu-list li{border-bottom:1px solid var(--blue-menu-line);}
.menu-list button, .menu-list a{width:100%; background:none; border:none; color:#fff; text-align:left; display:flex; align-items:center; gap:14px; padding:15px 18px; font-weight:700; font-size:15px; cursor:pointer; font-family:var(--font);}
.menu-list button svg, .menu-list a svg{width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto;}
.menu-list .chev{margin-left:auto; opacity:.85; display:flex;}
.menu-list .chev svg{width:16px; height:16px; stroke:#fff;}
.menu-footer{margin-top:auto; padding:34px 18px 18px; font-size:12px; opacity:.85; line-height:1.5;}

/* QL cá nhân */
.profile-card{margin:14px 14px 18px; background:var(--card-bg); border-radius:6px; padding:16px;}
.profile-top{display:flex; align-items:center; gap:14px; padding-bottom:12px; border-bottom:1px solid var(--grey-line);}
.avatar-round{width:58px; height:58px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; box-shadow:0 1px 4px rgba(0,0,0,.15);}
.avatar-round svg{width:30px; height:30px; fill:var(--blue-mid);}
.profile-top .pname{font-weight:800; font-size:16px; color:var(--darker-text);}
.profile-top .pcode{font-size:13.5px; color:var(--dark-text); margin-top:2px; font-weight:600;}
.info-row{display:flex; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--grey-line); font-size:13.5px;}
.info-row:last-child{border-bottom:none;}
.info-row .lbl{color:var(--dark-text); font-weight:600;}
.info-row .val{text-align:right; font-weight:700; color:var(--darker-text); max-width:60%;}
.action-list{margin:0 14px;}
.action-item{display:flex; align-items:center; gap:14px; background:#fff; padding:14px 8px; border-bottom:1px solid var(--grey-line); cursor:pointer;}
.action-item .ai-icon{width:38px; height:38px; border-radius:50%; border:2px solid var(--blue-mid); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.action-item .ai-icon svg{width:19px; height:19px; stroke:var(--blue-mid); fill:none;}
.action-item .ai-label{flex:1; font-weight:800; font-size:14.5px; color:var(--dark-text); letter-spacing:.2px;}
.action-item .chev{color:var(--grey-text); display:flex;}
.action-item .chev svg{width:16px; height:16px;}

/* Thẻ BHYT */
.card-block{margin:14px; background:var(--card-bg); border-radius:6px; padding:16px 16px 14px;}
.card-title-row{display:flex; align-items:center; gap:14px; padding-bottom:12px; border-bottom:1px solid var(--grey-line);}
.card-title-row .tname{font-weight:800; font-size:16px; color:var(--darker-text);}
.card-title-row .tvalid{font-size:13px; color:var(--dark-text); margin-top:3px; font-weight:700;}
.benefit-box{margin:12px 14px 0; background:#fff; border-radius:6px; padding:16px;}
.benefit-title{color:var(--link-blue); font-weight:800; font-size:14.5px; margin-bottom:10px;}
.benefit-text{font-size:13.5px; line-height:1.65; color:var(--darker-text); font-weight:700;}
.card-btn-row{display:flex; border-top:1px solid var(--grey-line); background:#fff; margin-top:14px;}
.card-btn{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 8px; color:var(--link-blue); font-weight:800; font-size:13.5px; border-right:1px solid var(--grey-line); cursor:pointer;}
.card-btn:last-child{border-right:none;}
.card-btn svg{width:19px; height:19px; fill:var(--link-blue);}

/* Tabs */
.tabbar{display:flex; background:#fff; padding:14px 4px 10px; border-bottom:1px solid var(--grey-line);}
.tabbar .tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:none; cursor:pointer; color:#9aa0a6; font-weight:800; font-size:11.5px; font-family:var(--font); text-decoration:none;}
.tabbar .tab .tic{width:44px; height:44px; border-radius:50%; border:2px solid #d3d7da; display:flex; align-items:center; justify-content:center;}
.tabbar .tab .tic svg{width:22px; height:22px; stroke:#9aa0a6; fill:none;}
.tabbar .tab.active{color:var(--blue-mid);}
.tabbar .tab.active .tic{border-color:var(--blue-mid);}
.tabbar .tab.active .tic svg{stroke:var(--blue-mid);}

.subheader-box{margin:14px; background:#fff; border-radius:6px; padding:14px 16px;}
.subheader-title{color:var(--link-blue); font-weight:800; font-size:15.5px;}
.subheader-sub{font-size:14px; margin-top:6px; font-weight:600;}
.subheader-warn{color:#d5342a; font-size:13.5px; font-weight:700; margin-top:2px;}

table.data-tbl{width:100%; border-collapse:separate; border-spacing:0; background:#fff; font-size:12.5px;}
table.data-tbl th{background:var(--table-head); color:#fff; font-weight:800; padding:10px 6px; border-bottom:1px solid #2a577f; border-right:1px solid #2a577f; text-align:center; font-size:11.5px;}
table.data-tbl th:last-child{border-right:none;}
table.data-tbl td{border-bottom:1px solid var(--grey-line); border-right:1px solid var(--grey-line); padding:10px 6px; text-align:center; font-weight:700; color:var(--darker-text);}
table.data-tbl td:last-child{border-right:none;}
table.data-tbl tr:last-child td{border-bottom:none;}
table.data-tbl td.tleft{text-align:left;}
table.data-tbl .eye{color:var(--link-blue); cursor:pointer; width:40px;}
table.data-tbl th.eye-col{width:40px; padding:10px 4px;}
.tbl-wrap{margin:0 14px 14px; border-radius:6px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08); border:1px solid var(--grey-line);}
.empty-note{text-align:center; color:#3d4145; font-weight:700; font-size:13.5px; padding:40px 20px;}

.detail-meta{display:flex; gap:14px; padding:14px; font-weight:800; font-size:13.5px;}
.detail-card{margin:0 14px; background:var(--table-head); color:#fff; border-radius:8px 8px 0 0; padding:14px 16px; font-size:13px; line-height:1.7; font-weight:600;}
.detail-card b{font-weight:800;}
.detail-rows{margin:0 14px 14px;}
.detail-row{display:flex; justify-content:space-between; background:#fff; padding:13px 16px; border:1px solid var(--grey-line); border-top:none; font-size:13.5px; font-weight:700;}

/* Dịch vụ công */
.dvc-item{background:#fff; padding:14px 16px; border-bottom:1px solid var(--grey-line);}
.dvc-item .dt{color:var(--link-blue); font-weight:800; font-size:13.5px; margin-bottom:5px;}
.dvc-item .dd{font-size:13px; color:var(--darker-text); font-weight:700; line-height:1.5;}

/* Tra cứu */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:26px 8px; padding:26px 14px;}
.grid-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;}
.grid-circle{width:78px; height:78px; border-radius:50%; border:2px solid var(--blue-mid); display:flex; align-items:center; justify-content:center;}
.grid-circle svg{width:36px; height:36px; stroke:var(--blue-mid); fill:none;}
.grid-item .glabel{font-weight:800; font-size:13px; color:var(--link-blue); line-height:1.4;}

/* Trợ giúp */
.help-hero{margin:0; height:220px; position:relative; overflow:hidden; background:linear-gradient(120deg,#0b1c2e,#123a5c 45%, #1a5f8f 100%); display:flex; align-items:center; justify-content:flex-end; padding:0 18px;}
.help-hero .hh-logo{width:78px; height:78px; border-radius:50%; border:3px solid #fff; display:flex; align-items:center; justify-content:center; position:absolute; top:24px; right:20px;}
.help-hero .hh-logo svg{width:44px; height:44px; fill:#fff;}
.help-hero .hh-text{position:absolute; right:20px; bottom:18px; text-align:right; color:#fff;}
.help-hero .hh-text .h1{font-size:22px; font-weight:900; letter-spacing:1px;}
.help-hero .hh-text .h2{font-size:34px; font-weight:900; letter-spacing:2px;}
.help-hero .hh-person{position:absolute; left:0; bottom:0; top:0; width:60%; background:linear-gradient(160deg,#e8c9a8,#c9926b); clip-path:polygon(0 0,100% 0,86% 100%,0% 100%); opacity:.35;}
.help-list{padding:14px;}
.help-item{display:flex; align-items:center; gap:14px; background:#e9ecee; border-radius:8px; padding:16px; margin-bottom:12px;}
.help-item .hi-icon{width:40px; height:40px; border-radius:50%; border:2px solid var(--blue-mid); display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:#fff;}
.help-item .hi-icon svg{width:20px; height:20px; stroke:var(--blue-mid); fill:none;}
.help-item .hi-label{font-weight:800; font-size:14.5px; color:#2b2f33;}

/* Cài đặt */
.settings-row{display:flex; justify-content:space-between; align-items:center; padding:20px 18px; border-bottom:1px solid var(--grey-line); background:var(--grey-bg);}
.settings-row .slbl{color:var(--link-blue); font-weight:800; font-size:15.5px;}
.lang-switch{display:flex; gap:8px;}
.lang-btn{border:2px solid var(--blue-mid); background:#fff; color:var(--blue-mid); font-weight:800; font-size:13px; padding:6px 14px; border-radius:20px; cursor:pointer; font-family:var(--font);}
.lang-btn.active{background:var(--blue-mid); color:#fff;}
.toggle{width:46px; height:26px; border-radius:20px; background:#c7ccd0; position:relative; cursor:pointer; flex:0 0 auto;}
.toggle::after{content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .18s;}
.toggle.on{background:var(--blue-mid);}
.toggle.on::after{left:22px;}
.settings-msg{margin:14px; background:#e7f6ea; border:1px solid #b7e0bf; color:#1e6b30; font-weight:700; font-size:13px; padding:10px 14px; border-radius:8px;}

/* Đổi mật khẩu */
.form-pad{padding:20px 18px;}
.field-underline{display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--blue-mid); padding:10px 2px 12px; margin-bottom:26px;}
.field-underline input{border:none; outline:none; background:transparent; flex:1; font-size:15px; font-weight:600; color:var(--dark-text); font-family:var(--font); width:100%;}
.field-underline input::placeholder{color:var(--link-blue); font-weight:600;}
.field-underline svg{width:18px; height:18px; fill:var(--link-blue); flex:0 0 auto;}
.btn-outline{width:100%; padding:15px; border:2px solid var(--blue-mid); border-radius:8px; background:transparent; color:var(--link-blue); font-weight:800; font-size:16px; cursor:pointer; font-family:var(--font);}
.form-msg-error{background:#fdecea; border:1px solid #f3b7b0; color:#a02c22; font-weight:700; font-size:13px; padding:10px 14px; border-radius:8px; margin-bottom:16px;}
.form-msg-ok{background:#e7f6ea; border:1px solid #b7e0bf; color:#1e6b30; font-weight:700; font-size:13px; padding:10px 14px; border-radius:8px; margin-bottom:16px;}

/* Sổ khám chữa bệnh */
.skcb-head{display:flex; align-items:center; gap:14px; padding:18px 16px 10px;}
.skcb-head .sname{font-weight:800; font-size:17px;}
.skcb-toggle-row{display:flex; justify-content:space-around; padding:14px 20px 16px; text-align:center;}
.skcb-toggle-row .sto{display:flex; flex-direction:column; align-items:center; gap:8px; color:#9aa0a6; font-weight:800; font-size:12.5px;}
.skcb-toggle-row .sto.active{color:var(--link-blue);}
.skcb-toggle-row .stic{width:46px; height:46px; border-radius:50%; border:2px solid #d3d7da; display:flex; align-items:center; justify-content:center;}
.skcb-toggle-row .sto.active .stic{border-color:var(--link-blue);}
.skcb-toggle-row .stic svg{width:22px; height:22px; stroke:#9aa0a6; fill:none;}
.skcb-toggle-row .sto.active .stic svg{stroke:var(--link-blue);}
.year-select{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:6px 16px 10px; font-weight:800; font-size:16px; color:var(--dark-text); text-decoration:underline;}

.hide{display:none !important;}

#toast{
  position:fixed; left:50%; bottom:20px; z-index:500;
  width:362px; max-width:calc(100vw - 28px);
  transform:translate(-50%, 8px);
  background:#fff6da; border:1px solid #f0d778; color:#8a6100;
  font-weight:700; font-size:13px; padding:12px 16px; border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.15); text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
#toast.show{opacity:1; transform:translate(-50%, 0);}

@media (max-width:480px){
  body{background:#fff; padding:0; align-items:stretch;}
  #device{width:100vw; min-height:100vh; box-shadow:none;}
}