*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:Arial,sans-serif;font-size:14px;color:#222;background:#f0f0f0;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}

/* ── HEADER ─────────────────────────────────── */
.hdr{
  position:relative;width:100%;line-height:0;
}
.hdr-bg{display:block;width:100%;height:auto;}

/* ── NAVBAR ──────────────────────────────────── */
.nav{
  background:#fff;border-bottom:3px solid #0055a5;
  height:44px;display:flex;align-items:center;
  padding:0 20px;box-shadow:0 2px 6px rgba(0,0,0,.12);
  position:sticky;top:0;z-index:999;
}
.nav-home-icon{height:20px;width:auto;margin-right:6px;cursor:pointer;flex-shrink:0;}
.nav-search-icon{height:20px;width:auto;cursor:pointer;margin-left:auto;flex-shrink:0;}
.nav-ul{display:flex;list-style:none;height:44px;}
.nav-ul li{position:relative;height:44px;display:flex;align-items:center;}
.nav-ul li>a,.nav-ul li>span{
  display:flex;align-items:center;height:44px;padding:0 10px;
  color:#005baa;font-weight:700;font-size:12px;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;letter-spacing:.2px;
  border-right:1px solid #e5e5e5;
  transition:background .18s,color .18s;
}
.nav-ul li:first-child>a,.nav-ul li:first-child>span{border-left:1px solid #e5e5e5;}
.nav-ul li:hover>a,.nav-ul li:hover>span{background:#0055a5;color:#fff;}
/* dropdowns */
.nav-ul li .dd{
  display:none;position:absolute;top:44px;left:0;
  background:#fff;border-top:2px solid #0055a5;
  border:1px solid #ddd;border-top:2px solid #0055a5;
  min-width:230px;z-index:9999;box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.nav-ul li:hover .dd{display:block;}
.nav-ul li .dd a{
  display:block;padding:8px 14px;font-size:12.5px;color:#333;
  border-bottom:1px solid #f0f0f0;line-height:1.4;white-space:normal;
  font-weight:normal;
}
.nav-ul li .dd a:hover{background:#e8f3ff;color:#0055a5;padding-left:18px;}

/* ── WRAPPER ─────────────────────────────────── */
.wrap{max-width:1200px;margin:14px auto;padding:0 14px;}

/* ── ROW 1: 3 columns ───────────────────────── */
.r1{display:flex;gap:12px;align-items:flex-start;}
.c-left{flex:0 0 calc(50% - 8px);min-width:0;}
.c-mid{flex:0 0 calc(25% - 6px);min-width:0;}
.c-right{flex:0 0 calc(25% - 6px);min-width:0;}

/* Featured block */
.feat-block{background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.12);}
.feat-vid{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:#cde;}
.feat-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.feat-cap{
  position:relative;padding:10px 14px;
  color:#fff;font-weight:700;font-size:13.5px;
  background:rgba(0,20,60,.78);
}
.feat-cap::before{
  content:'';position:absolute;inset:0;
  background-image:url('images/background-pattern.png');
  background-size:cover;opacity:.35;
}
.feat-cap span{position:relative;z-index:1;}

/* Sub-news 3 col */
.sub3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e8e8e8;}
.s3-item{border-right:1px solid #ebebeb;}
.s3-item:last-child{border-right:none;}
.s3-img{width:100%;height:108px;object-fit:cover;}
.s3-img-ph{width:100%;height:108px;background:#c8d8ee;display:flex;align-items:center;justify-content:center;}
.s3-title{padding:7px 9px 9px;font-size:11.5px;font-weight:700;color:#1a1a1a;line-height:1.4;}
.s3-title a:hover{color:#0055a5;}

/* Thông báo */
.tb-box{background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.12);}
.tb-hdr{background:#0055a5;color:#fff;padding:9px 13px;font-size:15px;font-weight:700;}
.tb-list{}
.tb-item{display:flex;gap:8px;padding:9px 11px;border-bottom:1px solid #efefef;cursor:pointer;transition:background .15s;}
.tb-item:hover{background:#f0f7ff;}
.tb-item:last-child{border-bottom:none;}
.tb-drop{flex-shrink:0;width:15px;height:15px;object-fit:contain;align-self:flex-start;margin-top:3px;}
.tb-txt{flex:1;}
.tb-t{font-size:12.5px;font-weight:700;color:#1a1a1a;line-height:1.4;margin-bottom:3px;}
.tb-t a:hover{color:#0055a5;}
.tb-d{font-size:11px;color:#888;}

/* Right column */
.r-col{display:flex;flex-direction:column;gap:10px;}

/* Survey card (top right) */
.survey-card{background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.12);}
.survey-card img{width:100%;height:auto;display:block;}

/* CSKH app card (bottom right) */
.cskh-card{border-radius:2px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.12);}
.cskh-card img{width:100%;height:auto;display:block;}

/* ── FLOATING SIDEBAR ────────────────────────── */
.fsb{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:9999;display:flex;flex-direction:column;gap:3px;}
.fb{
  width:52px;height:52px;border-radius:50% 0 0 50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;
  background:#fff;
  box-shadow:-2px 2px 10px rgba(0,0,0,.25);
  transition:width .2s;
  text-decoration:none;
}
.fb:hover{width:62px;}
.fb img{width:100%;height:100%;object-fit:contain;padding:5px;}

/* ── BANNER ROW ──────────────────────────────── */
.bnr-row{display:flex;gap:8px;margin:14px 0;}
.bnr-row>div{flex:1;border-radius:2px;overflow:hidden;}
.bnr-row img{width:100%;height:auto;display:block;}

/* ── ROW 2: Tin mới + Xem nhiều ─────────────── */
.r2{display:flex;gap:12px;margin-top:14px;align-items:flex-start;}
.c-75{flex:0 0 calc(75% - 6px);min-width:0;}
.c-25{flex:0 0 calc(25% - 6px);min-width:0;}

.sec-ttl{font-size:15px;font-weight:900;color:#0055a5;text-transform:uppercase;
  padding-bottom:7px;border-bottom:2px solid #0055a5;margin-bottom:10px;}

/* Tin mới 2-col */
.tm-grid{display:flex;gap:10px;}
.tm-main{flex:1;background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.1);}
.tm-main-img{width:100%;height:230px;object-fit:cover;display:block;background:#c8d8ee;}
.tm-main-body{padding:10px 12px;}
.tm-main-title{font-size:14px;font-weight:700;color:#1a1a1a;line-height:1.4;margin-bottom:4px;}
.tm-main-title a:hover{color:#0055a5;}
.tm-main-time{font-size:11px;color:#888;margin-bottom:6px;}
.tm-main-sum{font-size:12px;color:#555;line-height:1.5;}
.tm-side{flex:1;display:flex;flex-direction:column;gap:0;background:#fff;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.1);}
.tm-s-item{display:flex;gap:9px;padding:10px;border-bottom:1px solid #efefef;cursor:pointer;}
.tm-s-item:hover{background:#f5faff;}
.tm-s-item:last-child{border-bottom:none;}
.tm-s-img{width:100px;height:75px;object-fit:cover;border-radius:2px;flex-shrink:0;}
.tm-s-img-ph{width:100px;height:75px;background:#dde8f4;border-radius:2px;flex-shrink:0;}
.tm-s-body{flex:1;}
.tm-s-title{font-size:12px;font-weight:700;color:#1a1a1a;line-height:1.4;margin-bottom:4px;}
.tm-s-title a:hover{color:#0055a5;}
.tm-s-time{font-size:11px;color:#888;}

/* Xem nhiều */
.xm-box{background:#fff;border-radius:2px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.1);}
.xm-hdr{background:#0055a5;color:#fff;padding:9px 12px;font-size:14px;font-weight:700;}
.xm-img{width:100%;height:130px;object-fit:cover;display:block;}
.xm-first-title{padding:8px 11px;font-size:12.5px;font-weight:700;color:#1a1a1a;line-height:1.4;border-bottom:1px solid #eee;}
.xm-item{padding:8px 11px;border-bottom:1px solid #eee;font-size:12px;color:#1a1a1a;line-height:1.4;cursor:pointer;}
.xm-item:hover{color:#0055a5;background:#f5faff;}
.xm-item:last-child{border-bottom:none;}

/* Liên kết */
.lkw{background:#fff;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.1);padding:9px 11px;margin-top:9px;display:flex;align-items:center;gap:8px;}
.lkw label{font-size:12px;font-weight:700;color:#0055a5;white-space:nowrap;}
.lkw select{font-size:12px;border:1px solid #ccc;border-radius:3px;padding:4px 6px;color:#333;flex:1;}

/* ── CHUYÊN MỤC BAR ──────────────────────────── */
.cm-bar{
  display:flex;align-items:center;gap:12px;
  background:#fff;padding:9px 14px;border-radius:2px;
  margin-top:14px;box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.cm-label{display:flex;align-items:center;gap:5px;font-weight:700;color:#c00;font-size:12.5px;white-space:nowrap;}
.cm-label img{height:18px;}
.cm-tags{display:flex;flex-wrap:wrap;gap:5px;}
.cm-tag{
  background:#e8f2ff;color:#0055a5;padding:4px 10px;
  border-radius:12px;font-size:12px;font-weight:700;cursor:pointer;
  border:1px solid #cce0ff;transition:background .15s,color .15s;
}
.cm-tag:hover{background:#0055a5;color:#fff;}

/* ── DỊCH VỤ KHÁCH HÀNG ─────────────────────── */
.dvkh{margin-top:14px;background:#fff;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.1);}
.dvkh-ttl{color:#0055a5;font-size:15px;font-weight:900;text-transform:uppercase;
  padding:9px 14px;border-bottom:2px solid #0055a5;}
.dvkh-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.dvkh-card{padding:14px 12px;border-right:1px solid #eee;border-bottom:1px solid #eee;}
.dvkh-card:nth-child(4n){border-right:none;}
.dvkh-card img{width:48px;height:48px;object-fit:contain;margin-bottom:8px;}
.dvkh-card-ttl{font-size:12.5px;font-weight:700;color:#0055a5;margin-bottom:6px;}
.dvkh-lnk{display:block;font-size:11.5px;color:#555;line-height:1.9;}
.dvkh-lnk:hover{color:#0055a5;}

/* ── APP PROMO ────────────────────────────────── */
.app-bar{
  background:linear-gradient(135deg,#0046a0 0%,#0088dd 60%,#44bbff 100%);
  border-radius:2px;padding:14px 24px;margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.app-bar-text h3{color:#fff;font-size:17px;font-weight:900;text-transform:uppercase;}
.app-bar-text p{color:rgba(255,255,255,.9);font-size:12.5px;margin-top:4px;}
.app-bar-btns{display:flex;gap:8px;align-items:center;}
.app-bar-btns img{height:34px;width:auto;}

/* ── FOOTER ──────────────────────────────────── */
.ftr{background:#0055a5;color:#fff;margin-top:14px;padding:18px 0 0;}
.ftr-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;}
.ftr-logo{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;}
.ftr-logo img{height:56px;filter:brightness(0) invert(1);}
.ftr-logo span{font-weight:900;font-size:13px;letter-spacing:1px;}
.ftr-info{flex:1;}
.ftr-info strong{font-size:13.5px;display:block;margin-bottom:6px;}
.ftr-info p{font-size:12px;line-height:1.9;opacity:.92;}
.ftr-copy{
  max-width:1200px;margin:12px auto 0;padding:10px 20px;
  border-top:1px solid rgba(255,255,255,.2);font-size:11.5px;opacity:.7;
  display:flex;align-items:center;gap:6px;
}
.ftr-copy img{height:16px;filter:brightness(0) invert(1);}

/* ── CHAT WIDGET ─────────────────────────────── */
#saw-chat-btn {
  position: fixed; bottom: 28px; right: 28px; z-index: 99999;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #0055a5, #0088dd);
  box-shadow: 0 4px 18px rgba(0,85,165,.5);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s;
}
#saw-chat-btn:hover { transform: scale(1.08); }
#saw-chat-btn svg { width: 32px; height: 32px; fill: #fff; }
#saw-chat-panel {
  position: fixed; bottom: 104px; right: 28px; z-index: 99998;
  width: 420px; height: 680px; border-radius: 16px;
  overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.28);
  display: none; border: 1px solid #d0d8e4;
}
#saw-chat-panel.open { display: block; }
#saw-chat-panel iframe { width: 100%; height: 100%; border: none; }