@font-face {
  font-family: 'SF Pro';
  src: url('../fonts/SF-Pro-VN.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue-dark: #0d5f9e;
  --blue-mid: #0069AD;
  --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: #3667A1;
  --table-head: #3667a1;
  --grey-bg: #f2f2f2;
  --card-bg: #e7ecef;
  --grey-line: #cdd2d4;
  --grey-text: #9aa0a6;
  --dark-text: #4a4e52;
  --darker-text: #1c1e21;
  --white: #ffffff;
  --font: 'SF Pro', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Form controls don't inherit font-family from body — force it so
   inputs, placeholders and buttons use SF Pro too. */
input,
textarea,
select,
button,
optgroup {
  font-family: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--dark-text);
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* height:100% (from the rule above) caps body at one screen, so on short
     windows #device overflowed it and the 28px bottom padding was lost —
     the nav ended flush against the window edge. Let body grow instead. */
  height: auto;
  min-height: 100vh;
  background: #e9ebee;
  padding: 28px 0;
}

#device {
  position: relative;
  width: 390px;
  min-height: 844px;
  background: var(--white);
  overflow: hidden;
  /* clip instead of hidden: same clipping, but no scroll container,
     so position:sticky children (.card-btn-row) stick to the viewport. */
  overflow: clip;
  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: calc(50px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  /* Top-to-bottom so the top edge is flat --blue-header-a, the colour Safari
     paints the status bar with (body background / theme-color); a left-to-right
     gradient left a visible seam on the right. */
  background: linear-gradient(180deg, var(--blue-header-a) 0%, var(--blue-header-b) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 7px 0;
  position: relative;
  z-index: 35;
}

.app-header .hdr-title {
  font-weight: 400;
  font-size: 17px;
  line-height: 120%;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  letter-spacing: .3px;
  pointer-events: none;
  text-transform: uppercase;
  padding: 0 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Detail screens: white bar with a blue title, like the reference app. */
.app-header.plain {
  background: #fff;
}

.app-header.plain .hdr-title {
  color: var(--link-blue);
  font-weight: 600;
  font-size: 19px;
  text-transform: none;
}

.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: #f2f2f2;
}

.screen {
  background: var(--grey-bg);
  padding-bottom: 14px;
  min-height: 600px;
}

#content-wrap.white,
#content-wrap.white .screen {
  background: #fff;
}

.screen.active {
  background-color: #f2f2f2;
}

/* 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;
  padding-top: 0px;
  /* Lift the tab bar above the home indicator / Safari bottom bar. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #2b2b2b;
  font-size: 12px;
  font-weight: 400;
  /* Fixed so the pinned tab bar's height is known (see the mobile media query). */
  line-height: 15px;
}

/* "Personal Information" needs 117px at 12px but a tab is only 97.5px wide.
   The reference app sets its nav label at ~10pt on a 428pt device, i.e. ~9px
   here. Scoped to English so the Vietnamese labels keep their size. */
html[lang="en"] .nav-item {
  font-size: 9px;
}

.nav-item svg {
  width: 24px;
  height: 24px;
  stroke: var(--grey-text);
}

.nav-item .nav-ic {
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item .nav-ic img {
  width: 26px;
  height: 26px;
  display: block;
  filter: grayscale(1);
  opacity: .9;
}

.nav-item.active .nav-ic img {
  filter: none;
  opacity: 1;
}

.nav-item.active svg {
  stroke: var(--blue-mid);
}

.nav-item.active {
  color: var(--blue-mid);
}

/* Login */
#screen-login {
  background: url('../img/login-bg.jpg') top center / 100% 60% no-repeat;
  display: flex;
  flex-direction: column;
  min-height: 844px;
}

.login-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 0;
}

.flag {
  width: 33px;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Language picker (login flag) */
#lang-modal {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  overflow: hidden;
  transition: background .3s ease, visibility 0s linear .3s;
}

#lang-modal.open {
  background: rgba(0, 0, 0, .6);
  visibility: visible;
  transition: background .3s ease, visibility 0s;
}

.lang-box {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 28px 20px 20px;
  transform: translateY(100vh);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

#lang-modal.open .lang-box {
  transform: translateY(0);
}

.lang-title {
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--link-blue);
  padding-bottom: 22px;
}

.lang-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 7px 10px;
  border-top: 1px solid #e3cae4;
  border-bottom: 1px solid #e3cae4;
  color: var(--link-blue);
  margin: 10px 0;
}

.lang-opt.active {
  background: #e4e4e6;
}

.lang-flag {
  width: 56px;
  height: 38px;
  border: 1px solid #2b2b2b;
  flex: 0 0 auto;
  display: block;
}

.lang-names {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 28px;
}

.lang-check {
  position: absolute;
  top: 12px;
  right: 8px;
  width: 18px;
  height: 18px;
}

.login-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 36px;
}

.login-logo {
  width: 120px;
  height: 120px;
  display: block;
  /* Shadow moved out of the SVG (its baked-in filter rasterized the whole
     logo and looked blurry on retina); CSS drop-shadow renders it crisply. */
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .22));
}

.login-form {
  padding: 34px 30px 0;
}

.login-field {
  display: flex;
  align-items: stretch;
  min-height: 36px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0, 40, 80, .08);
  border: 1px solid #ccc;
}

/* Flush against the field edges: stretch gives it the full inner height,
   and the parent's overflow clip rounds only the two left corners. */
.login-field .fi-icon {
  width: 36px;
  flex: 0 0 36px;
  background: var(--blue-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-field .fi-icon svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.login-field input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-text);
  background: transparent;
}

.login-field input::placeholder {
  font-size: 14px;
  font-weight: 400;
  color: #8a8f94;
}

.login-links {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 400;
  margin: 2px 4px 22px;
}

.login-links a {
  color: #0072C8;
}

.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: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  height: 38px;
}

.btn-face {
  width: 52px;
  flex: 0 0 52px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-face svg,
.btn-face img {
  width: 38px;
  height: 38px;
  display: block;
}

.btn-vneid {
  position: relative;
  margin: 16px 30px 0;
  width: calc(100% - 60px);
  background: #D91811;
  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;
  cursor: pointer;
  font-family: var(--font);
  height: 60px;
}

.vneid-text {
  text-align: center;
  line-height: 1.3;
}

.vneid-logo {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: block;
}

.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;
  font-weight: 400;
}

.login-footer .footer-privacy {
  text-align: right;
  margin-bottom: 0;
}

.login-bar {
  display: flex;
  align-items: center;
  gap: 26px;
  /* Keep the icons clear of the home indicator / Safari bottom bar. */
  padding: 14px 24px calc(22px + env(safe-area-inset-bottom, 0px));
  color: var(--blue-dark);
}

.login-bar svg {
  width: 24px;
  height: 24px;
}

.login-bar img {
  width: 24px;
  height: 24px;
  display: block;
}

.login-bar> :last-child {
  margin-left: auto;
}

/* 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);
  display: flex;
  flex-direction: column;
}

.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: 64px;
  height: 64px;
  margin-bottom: 10px;
}

.menu-avatar img {
  width: 100%;
  height: 100%;
  display: block;
}

.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 {
  position: relative;
}

.menu-list li::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 0;
  bottom: 0;
  height: 2px;
  background: 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 a img {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.menu-list .chev {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.menu-list .chev img {
  width: 30px;
  height: 30px;
  display: block;
}

.menu-list .chev svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
}

.menu-list li.menu-sep {
  height: 26px;
}

.menu-list li.menu-sep::after {
  display: none;
}

.menu-list li.menu-sep a,
.menu-list li.menu-sep:hover {
  background: none;
}

.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 #84878E;
}

.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 img {
  width: 57%;
  height: auto;
}

/* Ảnh đại diện do admin upload: phủ kín vòng tròn thay cho icon */
.avatar-round img.photo,
.menu-avatar img.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-top .pname {
    font-weight: 700;
    font-size: 14px;
    color: #000;
    letter-spacing: -4%;
}

.profile-top .pcode {
  font-weight: 400;
  font-size: 13px;
  color: #444849;
  line-height: 100%;
  margin-top: 8px;
}


.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 .lbl {
  color: var(--dark-text);
}

.info-row .val {
  text-align: right;
  max-width: 60%;
}

.info-row .lbl,
.info-row .val {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.35;
  color: #444849;
}

.action-list {
  margin: 0 14px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 8px;
  position: relative;
  cursor: pointer;
}

.action-item::after {
  content: "";
  position: absolute;
  left: 60px; /* 8px padding + 38px icon + 14px gap: starts under the label */
  right: 30px;
  bottom: 0;
  border-bottom: 1px solid #84878E;
}

.action-item .ai-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.action-item .ai-icon img {
  width: 38px;
  height: 38px;
  display: block;
}

.action-item .ai-label {
  flex: 1;
  letter-spacing: .2px;
  font-size: 16px;
  font-weight: 400;
  /* 12px was below the 16px font size — fine while every label fit on one
     line, but "SOCIAL SECURITY PARTICIPATION RECORD" wraps and the lines
     would overlap. Single-line rows keep their height (the 38px icon drives it). */
  line-height: 1.3;
}

.action-item .chev {
  color: var(--grey-text);
  display: flex;
}

.action-item .chev svg,
.action-item .chev img {
  width: 16px;
  height: 16px;
  display: block;
}

/* Thẻ BHYT */
.card-block {
  /* No bottom margin: the bhyt screen is a flex column (margins don't
     collapse), and .benefit-box's 25px top margin already spaces them. */
  margin: 14px 14px 0;
  background: linear-gradient(90deg, #eeeff1 0%, #e2edf3 100%);
  border-radius: 6px;
  padding: 16px 16px 14px;
}

.card-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #84878E;
}

.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: 400;
}

.benefit-box {
  margin: 25px 14px 14px;
  background: linear-gradient(90deg, #eeeff1 0%, #e2edf3 100%);
  border-radius: 6px;
  padding: 16px;
}

.benefit-title {
  color: var(--link-blue);
  font-weight: 700;
  font-size: 13px;
  line-height: 100%;
  margin-left: -8px;
}

.benefit-text {
  font-size: 13px;
  line-height: 1.4;
  color: #000;
  font-weight: 400;
  margin-top: 10px;
}

/* Stretch the screen to fill the content area so .card-btn-row sits
   directly on the tab bar even when the content above is short. */
#content-wrap:has(.card-btn-row) {
  display: flex;
  flex-direction: column;
}

.screen:has(.card-btn-row) {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.card-btn-row {
  display: flex;
  background: #fff;
  margin-top: auto;
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.card-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 8px;
  color: var(--link-blue);
  font-weight: 400;
  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);
}

.card-btn img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Tabs */
.tabbar {
  display: flex;
  background: #fff;
  padding: 14px 4px 10px;
  border-bottom: 2px solid #ccc;
}

.tabbar.qtth-tabbar,
.tabbar.ttth-tabbar
{
  border-bottom: none;
  background: #f2f2f2;
}
.tabbar.dvc-tabbar {
  margin-bottom: 20px;
  background: #f2f2f2;
}

.dvc-item:first-child {
  border-radius: 10px;
}

.tabbar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  color: #A9A8AD  ;
  font-weight: 400;
  font-size: 13.5px;
  font-family: var(--font);
  text-decoration: none;
  text-align: center;
}

.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);
}

/* Tab icon dạng file SVG (đã có sẵn vòng tròn): tô màu qua mask để dùng chung 1 file cho cả trạng thái thường và active */
.tabbar .tab .tic.tic-mask {
  border: none;
  border-radius: 0;
  background-color: #a9a8ad;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tabbar .tab.active .tic.tic-mask {
  background-color: #0072c8;
}

.tic-mask.ic-bhxh { -webkit-mask-image: url('../icons/qtth/bhxh.svg'); mask-image: url('../icons/qtth/bhxh.svg'); }
.tic-mask.ic-bhtn { -webkit-mask-image: url('../icons/qtth/bhtn.svg'); mask-image: url('../icons/qtth/bhtn.svg'); }
.tic-mask.ic-tnld { -webkit-mask-image: url('../icons/qtth/tnld.svg'); mask-image: url('../icons/qtth/tnld.svg'); }
.tic-mask.ic-bhyt { -webkit-mask-image: url('../icons/qtth/bhyt.svg'); mask-image: url('../icons/qtth/bhyt.svg'); }
.tic-mask.ic-c14  { -webkit-mask-image: url('../icons/qtth/c14.svg');  mask-image: url('../icons/qtth/c14.svg'); }
.tic-mask.ic-ttth-motlan     { -webkit-mask-image: url('../icons/ttth/motlan.svg');     mask-image: url('../icons/ttth/motlan.svg'); }
.tic-mask.ic-ttth-odts       { -webkit-mask-image: url('../icons/ttth/odts.svg');       mask-image: url('../icons/ttth/odts.svg'); }
.tic-mask.ic-ttth-hangthang  { -webkit-mask-image: url('../icons/ttth/hangthang.svg');  mask-image: url('../icons/ttth/hangthang.svg'); }
.tic-mask.ic-ttth-thatnghiep { -webkit-mask-image: url('../icons/ttth/thatnghiep.svg'); mask-image: url('../icons/ttth/thatnghiep.svg'); }

/* Tab icon dạng file SVG không có vòng tròn: tô màu qua mask theo trạng thái */
.tabbar .tab .tic.tic-plain {
  border: none;
  border-radius: 0;
  height: 34px;
}

.tabbar .tab:has(.tic-plain) {
  gap: 2px;
}

.tabbar .tab .tic .tic-glyph {
  display: block;
  background-color: #9aa0a6;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tabbar .tab.active .tic .tic-glyph {
  background-color: var(--blue-mid);
}

.tic-glyph.ic-dvc-service { width: 33px; height: 33px; -webkit-mask-image: url('../icons/dvc/service.svg'); mask-image: url('../icons/dvc/service.svg'); }
.tic-glyph.ic-dvc-history { width: 33px; height: 33px; -webkit-mask-image: url('../icons/dvc/history.svg'); mask-image: url('../icons/dvc/history.svg'); }

.subheader-box {
  margin: 14px;
  background: #fff;
  border-radius: 0px;
  padding: 14px 16px;
  border: 1px solid #ccc;
  margin-bottom: 0;
  border-bottom: none;
}

.subheader-title {
  color: var(--link-blue);
  font-weight: 400;
  font-size: 15.5px;
}

.subheader-sub {
  font-size: 14px;
  margin-top: 0px;
  font-weight: 400;
  color: #000;
}

.subheader-warn {
  color: red;
  font-size: 13.5px;
  font-weight: 400;
  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: 400;
  padding: 10px 6px;
  border-bottom: 1px solid #2a577f;
  text-align: center;
  font-size: 12.5px;
}

table.data-tbl th:last-child {
  border-right: none;
}

table.data-tbl td {
  border-bottom: 1px solid #9cb3cd;
  border-right: 1px solid #9cb3cd;
  padding: 10px 6px;
  text-align: center;
  font-weight: 400;
  color: var(--darker-text);
  font-size: 12.5px;
}

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;
  background: #fff;
}

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;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  border: 1px solid var(--grey-line);
}

/* Thông tin hưởng: closed box with a centred title. */
.subheader-box.ttth-box {
  border-bottom: 1px solid #ccc;
  text-align: center;
  padding: 8px 16px;
}

.subheader-box + .tbl-wrap {
  border-top: none;
}

.empty-note {
  text-align: center;
  color: #3d4145;
  font-weight: 700;
  font-size: 13.5px;
  padding: 40px 20px;
}

.detail-meta {
  display: flex;
  justify-content: space-around;
  gap: 14px;
  padding: 14px;
  font-weight: 400;
  font-size: 13.5px;
}

.detail-card {
  margin: 0 14px;
  background: var(--table-head);
  color: #fff;
  border-radius: 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
}

.detail-card b {
  font-weight: 700;
}

.detail-rows {
  margin: 0 14px 14px;
}

.detail-row {
  display: flex;
  background: #fff;
  border: 1px solid #9cb3cd;
  border-top: none;
  font-size: 13.5px;
  font-weight: 400;
  color: #000;
}

.detail-row > span {
  flex: 1 1 50%;
  padding: 13px 16px;
}

.detail-row > span:first-child {
  text-align: center;
  border-right: 1px solid #9cb3cd;
}

.detail-row > span:last-child {
  text-align: right;
}

/* Dịch vụ công */
.dvc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  padding: 0 16px;
}

.dvc-logo {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  margin-top: 14px;
}

.dvc-body {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--grey-line);
}

.dvc-item:last-child .dvc-body {
  border-bottom: none;
}

.dvc-item .dt {
  color: var(--link-blue);
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 5px;
}

.dvc-item .dd {
  font-size: 13px;
  color: var(--darker-text);
  font-weight: 400;
  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 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-circle img {
  width: 64px;
  height: 64px;
  display: block;
}

.grid-item .glabel {
  font-weight: 400;
  font-size: 14px;
  color: var(--link-blue);
  line-height: 1.4;
}

/* Trợ giúp */
/* Banner đã có sẵn logo + chữ "HỖ TRỢ 24/7"; cắt bỏ viền xanh 3px phía trên và viền xám phía dưới của ảnh */
.help-hero {
  overflow: hidden;
  position: relative;
  /* Vertical scrolling still belongs to the page; horizontal drags are ours. */
  touch-action: pan-y;
}

.hero-track {
  display: flex;
  will-change: transform;
}

.hero-track.animate {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.help-hero img {
  display: block;
  width: 100%;
  flex: 0 0 100%;
  height: auto;
  margin: -0.25% 0 -0.6%;
  user-select: none;
  -webkit-user-drag: none;
}

.help-list {
  padding: 10px 10px 4px;
}

.help-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #e6edee;
  padding: 0 10px;
  min-height: 58px;
  margin-bottom: 14px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .18);
  
}

.help-item .hi-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.help-item .hi-label {
  font-weight: 400;
  font-size: 17px;
  color: #2b2f33;
  letter-spacing: .2px;
}

/* 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: 1px solid var(--blue-mid);
  padding: -1px 2px 12px;
  margin-bottom: 26px;
}

.field-underline input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--dark-text);
  font-family: var(--font);
  width: 100%;
}

.field-underline input::placeholder {
  color: #7c9cc2;
  font-weight: 400;
}

.field-underline svg {
  width: 18px;
  height: 18px;
  color: #0684ff;
  fill: currentColor;
  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 */
.screen.active:has(.skcb-head) {
  background: var(--grey-bg);
}

.skcb-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 22px 0;
}

.skcb-head .avatar-round {
  width: 56px;
  height: 56px;
}

.skcb-head .sname {
  font-weight: 700;
  font-size: 15px;
  color: #000;
  padding-top: 8px;
}

.skcb-toggle-row {
  display: flex;
  padding: 32px 0 10px;
  border-bottom: 1px solid #9aa0a6;
  text-align: center;
}

.skcb-toggle-row .sto {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #a9a8ad;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25;
}

.skcb-toggle-row .sto.active {
  color: var(--link-blue);
}

/* Icon files carry their own circle; coloured through a mask per state. */
.skcb-toggle-row .stic {
  width: 30px;
  height: 30px;
  background-color: #a9a8ad;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.skcb-toggle-row .sto.active .stic {
  background-color: #0072c8;
}

.stic.ic-skcb-lichsu  { -webkit-mask-image: url('../icons/skcb/lichsu.svg');  mask-image: url('../icons/skcb/lichsu.svg'); }
.stic.ic-skcb-giaycap { -webkit-mask-image: url('../icons/skcb/giaycap.svg'); mask-image: url('../icons/skcb/giaycap.svg'); }

/* Year sits centred in the right half, caret pinned to the right edge. */
.year-select {
  display: flex;
  align-items: center;
  padding: 10px 20px 10px 50%;
}

.year-select .year-val {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--link-blue);
  text-decoration: underline;
}

.year-select .year-caret {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--link-blue);
}

table.skcb-tbl th {
  font-size: 13px;
  padding: 12px 6px;
  border-bottom: none;
  border-right: 1px solid rgba(255, 255, 255, .55);
}

table.skcb-tbl-lichsu th:nth-child(1),
table.skcb-tbl-lichsu th:nth-child(2) { width: 25%; }
table.skcb-tbl-lichsu th:nth-child(3) { width: 40%; }

.skcb-empty {
  text-align: center;
  color: #000;
  font-size: 13.5px;
  padding: 18px 16px;
}

.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: var(--blue-header-a);
    padding: 0;
    align-items: stretch;
  }

  #device {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    box-shadow: none;
  }

  /* Safari 26 tints its bottom toolbar from a fixed element at the bottom
     edge, else from the body background (blue here, for the status bar).
     Pinning the white tab bar makes the toolbar white. */
  #bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* Room for the pinned tab bar: 1px border + 31px icon + 4px gap
     + 15px label + 14px padding = 65px, plus the home-indicator inset. */
  #device:has(#bottomnav) {
    padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px));
  }

  /* Stick above the pinned tab bar instead of behind it. */
  .card-btn-row {
    bottom: calc(65px + env(safe-area-inset-bottom, 0px));
  }

  #screen-login {
    min-height: 100vh;
    min-height: 100dvh;
  }

  body:has(.app-header.plain) {
    background: #fff;
  }

  body:has(#screen-login) {
    align-items: flex-start;
    background: #fff;
  }

  #device:has(#screen-login) {
    overflow: visible;
  }
}