/* Website công khai HTX Duy Sơn — phương án A "Cổng dịch vụ". Màu nhận diện DUYSOCO (logo Logo_Htxds.jpg). */
:root {
  --xanh: #0072BC;
  --xanh-dam: #005A96;
  --xanh-chu: #0062A3;
  --xanh-troi: #0093DD;
  --navy: #1B2147;
  --navy-dam: #11163A;
  --chu-phu: #4A5370;
  --vien: #E3E8EF;
  --nen-nhat: #F0F5FA;
  --nen-o: #F7F9FC;
  --do: #B4231B;
  --do-thuong-hieu: #D9251D;
  --cam: #B85A00;
  --la: #2E7D32;
  --nhat-xanh: #E1EFFA;
  --nhat-do: #FDECEA;
  --nhat-cam: #FDE9D7;
  --nhat-la: #E3F4E4;
  --bo: 16px;
  --rong: 1200px;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--navy);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--xanh-chu); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { color: inherit; letter-spacing: -0.01em; }
.ic { flex: none; vertical-align: -0.15em; }
.nho { font-size: .875rem; color: var(--chu-phu); }
.trong { color: var(--chu-phu); margin: 0; }

.container-site { width: 100%; max-width: var(--rong); margin-inline: auto; padding-inline: 24px; }
.py-section { padding-block: 48px; }
@media (max-width: 575px) { .container-site { padding-inline: 16px; } .py-section { padding-block: 32px; } }

.bo-qua { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; padding: 8px 16px; }
.bo-qua:focus { left: 16px; top: 8px; }

/* ---------- Nút ---------- */
.nut { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 700; border: 0; cursor: pointer; text-decoration: none; }
.nut:hover { text-decoration: none; }
.nut-chinh { background: var(--xanh); color: #fff; }
.nut-chinh:hover { background: var(--xanh-dam); color: #fff; }
.nut-vien { border: 1px solid #B9C4D3; color: var(--navy); background: #fff; }
.nut-vien:hover { border-color: var(--xanh); color: var(--xanh-chu); }
.lien-ket-mui-ten { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

/* ---------- Ô biểu tượng ---------- */
.o-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none; }
.o-nho { width: 36px; height: 36px; }
.o-vua { width: 40px; height: 40px; }
.o-lon { width: 52px; height: 52px; border-radius: 14px; }
.o-xanh { background: var(--nhat-xanh); color: var(--xanh); }
.o-do { background: var(--nhat-do); color: var(--do); }
.o-cam { background: var(--nhat-cam); color: var(--cam); }
.o-la { background: var(--nhat-la); color: var(--la); }
.o-trong { background: rgba(255,255,255,.16); color: #fff; }
.mau-cam { color: #E87722; } .mau-xanh { color: var(--xanh-troi); } .mau-la { color: var(--la); }

.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--nhat-xanh); color: var(--xanh-chu); }
.chip-dien { background: var(--nhat-cam); color: #8A4200; }
.chip-nong { background: var(--nhat-la); color: #2E6B31; }

/* ---------- Đầu trang: hàng thương hiệu + thanh menu ---------- */
.dau-trang { background: var(--xanh); color: #fff; }
.hang-thuong-hieu { display: flex; align-items: center; gap: 16px 24px; padding-block: 14px; }
.thuong-hieu { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; min-width: 0; }
.thuong-hieu:hover { color: #fff; text-decoration: none; }
.thuong-hieu-logo { background: #fff; border-radius: 12px; padding: 4px 6px; display: flex; flex: none; }
.thuong-hieu-logo img { width: 60px; height: 48px; object-fit: contain; }
.thuong-hieu-chu { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.thuong-hieu-ten { font-size: 1.35rem; font-weight: 800; white-space: nowrap; }
.thuong-hieu-phu { font-size: .82rem; color: #DCEBF7; white-space: nowrap; }
.lien-he-nhanh { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nhanh-muc { display: flex; align-items: center; gap: 10px; color: #fff; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.28); white-space: nowrap; }
.nhanh-muc:hover { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }
.nhanh-muc span { display: flex; flex-direction: column; line-height: 1.2; font-weight: 700; }
.nhanh-muc small { font-size: .72rem; font-weight: 500; color: #DCEBF7; }
.nhanh-hotline { background: #fff; color: var(--xanh-chu); border-color: #fff; }
.nhanh-hotline:hover { background: #F0F7FD; color: var(--xanh-dam); }
.nhanh-hotline small { color: var(--chu-phu); }
.nhanh-gd .ic { color: #FFD27A; }
.o-zalo.o-zalo-nho { width: 30px; height: 30px; border-radius: 8px; font-size: .62rem; }
.nut-menu { display: none; margin-left: auto; border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 8px 10px; border-radius: 10px; background: transparent; }

.thanh-menu { background: #fff; border-bottom: 1px solid var(--vien); padding: 0; position: sticky; top: 0; z-index: 1020; box-shadow: 0 2px 10px rgba(27,33,71,.05); }
.thanh-menu .navbar-nav { flex-wrap: nowrap; }
.thanh-menu .nav-link { color: var(--navy); font-weight: 600; font-size: .95rem; padding: 14px 13px !important; white-space: nowrap; border-bottom: 3px solid transparent; }
.thanh-menu .nav-link:hover, .thanh-menu .nav-link:focus-visible, .thanh-menu .show > .nav-link { color: var(--xanh-chu); border-bottom-color: var(--xanh); text-decoration: none; }
.thanh-menu .dropdown-menu { border: 0; border-radius: 12px; box-shadow: 0 12px 32px rgba(27,33,71,.18); padding: 8px; min-width: 300px; max-height: 70vh; overflow-y: auto; margin-top: 0; }
.thanh-menu .dropdown-item { border-radius: 8px; padding: 8px 12px; font-weight: 500; white-space: normal; color: var(--navy); }
.thanh-menu .dropdown-item:hover { background: var(--nhat-xanh); color: var(--xanh-chu); text-decoration: none; }
.thanh-menu .dropdown-item.cap-2 { padding-left: 28px; font-size: .9rem; color: var(--chu-phu); }
.menu-dt { display: none; }

@media (max-width: 1199px) {
  .lien-he-nhanh .nhanh-gd { display: none; }
  .nut-menu { display: inline-flex; margin-left: 0; }
  .thanh-menu { position: static; box-shadow: none; border-bottom: 0; }
  .thanh-menu .navbar-collapse { padding-block: 8px 12px; }
  .thanh-menu .navbar-nav { flex-wrap: wrap; }
  .thanh-menu .nav-link { border-bottom: 0; padding: 10px 4px !important; white-space: normal; }
  .thanh-menu .dropdown-menu { box-shadow: none; min-width: 0; background: var(--nen-o); }
  .menu-dt { display: flex; border-top: 1px solid var(--vien); margin-top: 6px; padding-top: 6px; }
}
@media (max-width: 767px) {
  .lien-he-nhanh { display: none; }
  .nut-menu { margin-left: auto; }
  .thuong-hieu-logo img { width: 46px; height: 37px; }
  .thuong-hieu-ten { font-size: 1.05rem; }
  .thuong-hieu-phu { font-size: .72rem; }
}

/* ---------- Banner ---------- */
.hero { position: relative; background: var(--navy) url(/web/images/hero-luoi-dien.jpg) center right / cover no-repeat; color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,37,69,.94) 0%, rgba(11,37,69,.82) 50%, rgba(11,37,69,.45) 100%); }
.hero-luoi { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 64px 72px; }
.hero-chu { display: flex; flex-direction: column; gap: 20px; }
.hero-nhan { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); padding: 6px 12px; border-radius: 999px; color: #fff; }
.hero-nhan .ic { color: #7CC4F0; }
.hero h1 { margin: 0; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.hero-mo-ta { margin: 0; font-size: 1.12rem; color: #D5E2F2; max-width: 540px; }
.hero-form { background: #fff; color: var(--navy); padding: 18px; border-radius: var(--bo); max-width: 560px; }
.hero-form label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 8px; }
.hero-form-hang { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-form input { flex: 1 1 220px; height: 50px; border: 1px solid #B9C4D3; border-radius: 10px; padding: 0 14px; font: inherit; font-size: 1.05rem; text-transform: uppercase; }
.hero-form input::placeholder { text-transform: none; }
.hero-form input:focus { outline: 3px solid rgba(0,114,188,.3); border-color: var(--xanh); }
.hero-form .nut { height: 50px; }
.hero-cam-ket { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: #E3ECF7; }
.hero-cam-ket li { display: inline-flex; align-items: center; gap: 6px; }
.hero-cam-ket .ic { color: #7CC4F0; }

.hop-thong-bao { background: #fff; color: var(--navy); border-radius: var(--bo); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.hop-thong-bao-dau { display: flex; align-items: center; gap: 12px; }
.hop-thong-bao h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.tb-dong { display: flex; gap: 12px; padding: 14px; border-radius: 12px; background: var(--nen-o); color: var(--navy); }
.tb-dong:hover { background: var(--nhat-xanh); color: var(--navy); text-decoration: none; }
.tb-meta { display: block; font-size: .8rem; color: var(--chu-phu); font-weight: 600; }
.tb-ten { display: block; font-weight: 600; line-height: 1.4; }
@media (max-width: 899px) { .hero-luoi { grid-template-columns: 1fr; padding-block: 40px 48px; } }

/* ---------- Mục chung ---------- */
.muc { padding-block: 56px 24px; }
.muc-dau { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.muc-dau-hang { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.muc-nhan { font-size: .8rem; font-weight: 700; color: var(--xanh-chu); letter-spacing: .08em; }
.muc-dau h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 800; }
.nen-nhat { background: var(--nen-nhat); margin-top: 40px; }
.nen-nhat .muc { padding-block: 56px; }

/* Dịch vụ khách hàng */
.luoi-dich-vu { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.the-dv { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--vien); border-radius: var(--bo); background: #fff; color: var(--navy); transition: border-color .15s, box-shadow .15s, transform .15s; }
.the-dv:hover { text-decoration: none; color: var(--navy); border-color: #B9D3EC; box-shadow: 0 10px 28px rgba(27,33,71,.08); transform: translateY(-2px); }
.the-dv strong { font-size: 1.1rem; }
.the-dv > span:not(.o-icon):not(.the-dv-di) { color: var(--chu-phu); font-size: .95rem; }
.the-dv-di { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--xanh-chu); }
.the-dv-chinh { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.the-dv-chinh:hover { color: #fff; background: var(--xanh-dam); }
.the-dv-chinh > span:not(.o-icon):not(.the-dv-di), .the-dv-chinh .the-dv-di { color: #E3F0FA; }
@media (prefers-reduced-motion: reduce) { .the-dv, .the-tin { transition: none; } .the-dv:hover, .the-tin:hover { transform: none; } }

/* Tin trang chủ */
.luoi-tin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 899px) { .luoi-tin { grid-template-columns: 1fr; } }
.tin-noi-bat { display: flex; flex-direction: column; gap: 12px; }
.tin-noi-bat-anh { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bo); display: block; background: var(--nhat-xanh); }
.tin-noi-bat h3 { margin: 0; font-size: 1.45rem; line-height: 1.3; }
.tin-noi-bat h3 a { color: var(--navy); }
.tin-noi-bat p { margin: 0; color: var(--chu-phu); }
.the-tin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .85rem; color: var(--chu-phu); }
.ds-tin-gon { list-style: none; margin: 0; padding: 0; }
.ds-tin-gon li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--vien); }
.ds-tin-gon li:last-child { border-bottom: 0; }
.ds-tin-gon a { color: var(--navy); font-weight: 600; line-height: 1.4; }
.ds-tin-gon a:hover { color: var(--xanh-chu); }

/* Lĩnh vực */
.luoi-linh-vuc { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.the-linh-vuc { background: #fff; border-radius: var(--bo); overflow: hidden; display: flex; flex-direction: column; }
.the-linh-vuc img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.the-linh-vuc > div { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.the-linh-vuc h3 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.the-linh-vuc p { margin: 0; color: var(--chu-phu); }
.the-linh-vuc a { margin-top: auto; font-weight: 700; }

/* Đường dây nóng */
.luoi-duong-day { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.the-duong-day { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--vien); border-radius: 14px; color: var(--navy); background: #fff; }
.the-duong-day:hover { border-color: var(--xanh); color: var(--navy); text-decoration: none; background: var(--nen-o); }
.the-duong-day strong { display: block; font-size: 1.05rem; }
.the-zalo { border-color: #B9D3EC; background: var(--nhat-xanh); }
.o-zalo { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #0068FF; color: #fff; font-weight: 800; font-size: .72rem; flex: none; }

/* Ứng dụng */
.bang-app { background: var(--xanh); color: #fff; border-radius: 20px; padding: 40px 40px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; overflow: hidden; }
.bang-app-chu { flex: 1 1 380px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 40px; }
.bang-app h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 800; }
.bang-app p { margin: 0; color: #E3F0FA; font-size: 1.05rem; }
.bang-app-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.nut-cua-hang { display: inline-flex; align-items: center; gap: 10px; background: var(--navy); color: #fff; font-weight: 700; padding: 10px 20px; border-radius: 12px; }
.nut-cua-hang:hover { background: var(--navy-dam); color: #fff; text-decoration: none; }
.nut-cua-hang span { display: flex; flex-direction: column; line-height: 1.2; }
.nut-cua-hang small { font-size: .7rem; font-weight: 500; }
.bang-app-anh { flex: 0 1 320px; width: 320px; align-self: flex-end; display: block; }
@media (max-width: 575px) { .bang-app { padding: 28px 24px 0; } .bang-app-anh { margin-inline: auto; } }

/* ---------- Trang con ---------- */
.dai-tieu-de { background: var(--nen-nhat); border-bottom: 1px solid var(--vien); padding-block: 28px 32px; }
.dai-tieu-de h1 { margin: 6px 0 0; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; }
.dai-tieu-de .tieu-de-tin { font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.3; margin-bottom: 12px; }
.dai-tieu-de .mo-ta { margin: 8px 0 0; color: var(--chu-phu); max-width: 720px; }
.duong-dan { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .85rem; color: var(--chu-phu); }
.duong-dan li + li::before { content: "›"; margin-right: 6px; color: #8592AE; }

.luoi-the-tin { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.the-tin { display: flex; flex-direction: column; border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; background: #fff; transition: box-shadow .15s, transform .15s; }
.the-tin:hover { box-shadow: 0 10px 28px rgba(27,33,71,.08); transform: translateY(-2px); }
.the-tin-anh img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--nhat-xanh); }
.the-tin-than { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.the-tin h3 { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.the-tin h3 a { color: var(--navy); }
.the-tin h3 a:hover { color: var(--xanh-chu); }
.the-tin p { margin: 0; color: var(--chu-phu); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nhan-pdf { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--do); }

.phan-trang { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 36px; }
.phan-trang a, .phan-trang span { min-width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0 12px; border-radius: 10px; border: 1px solid var(--vien); font-weight: 600; }
.phan-trang span[aria-current] { background: var(--xanh); border-color: var(--xanh); color: #fff; }

.hop-trong { text-align: center; padding: 48px 24px; border: 1px dashed #C9D3E0; border-radius: var(--bo); color: var(--chu-phu); }
.hop-trong .ic { color: #8592AE; margin-bottom: 8px; }
.hop-trong .nut { margin: 4px; }

.bo-cuc-tin { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
@media (max-width: 991px) { .bo-cuc-tin { grid-template-columns: 1fr; } }
.tom-tat { font-size: 1.1rem; font-weight: 500; color: var(--navy); border-left: 0; background: var(--nen-o); padding: 16px 20px; border-radius: 12px; }
.khung-pdf { border: 1px solid var(--vien); border-radius: 12px; overflow: hidden; height: min(80vh, 900px); margin-bottom: 16px; background: var(--nen-o); }
.khung-pdf iframe { width: 100%; height: 100%; border: 0; display: block; }
.anh-tin { border-radius: 12px; }
.cot-ben { position: sticky; top: 72px; border: 1px solid var(--vien); border-radius: var(--bo); padding: 20px 22px; }
.cot-ben h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 4px; }
@media (max-width: 991px) { .cot-ben { position: static; } }

.van-ban { max-width: 820px; font-size: 1.02rem; }
.van-ban h2 { font-size: 1.3rem; font-weight: 700; margin: 32px 0 12px; }
.van-ban h3 { font-size: 1.1rem; font-weight: 700; margin: 24px 0 10px; }
.van-ban img { height: auto; border-radius: 8px; }
.van-ban table { width: 100%; border-collapse: collapse; margin: 16px 0; display: block; overflow-x: auto; }
.van-ban td, .van-ban th { border: 1px solid var(--vien); padding: 8px 10px; }
.van-ban .card { padding: 20px 24px; border-radius: 12px; border: 1px solid var(--vien); background: var(--nen-o); margin-bottom: 8px; }
.van-ban .card h2 { margin-top: 0; }
.van-ban section { scroll-margin-top: 72px; }

.tieu-de-phu { font-size: 1.3rem; font-weight: 800; margin: 0 0 16px; }
.luoi-lien-he { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; }
.the-lien-he { border: 1px solid var(--vien); border-radius: var(--bo); padding: 24px; }
.the-lien-he h3 { font-size: 1.1rem; font-weight: 700; margin: 14px 0 8px; }
.the-lien-he p { margin: 0 0 4px; }

/* ---------- Chân trang ---------- */
.chan-trang { background: var(--navy); color: #C9D1E3; font-size: .95rem; margin-top: 56px; }
.chan-trang a { color: #C9D1E3; }
.chan-trang a:hover { color: #fff; }
.chan-trang-luoi { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 36px 32px; padding-block: 56px 36px; }
@media (max-width: 991px) { .chan-trang-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chan-cot-rong { grid-column: 1 / -1; } }
@media (max-width: 575px) { .chan-trang-luoi { grid-template-columns: 1fr; } }
.chan-thuong-hieu { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.chan-thuong-hieu strong { display: block; color: #fff; font-size: 1.1rem; }
.chan-thuong-hieu .nho { color: #C9D1E3; }
.chan-thuong-hieu .thuong-hieu-logo img { width: 52px; height: 42px; }
.chan-lien-he { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chan-lien-he li { display: flex; gap: 10px; align-items: flex-start; }
.chan-lien-he .ic { color: #7CC4F0; margin-top: 3px; }
.chan-lien-he strong { color: #fff; }
.chan-cot h2 { color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.chan-cot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chan-duoi { border-top: 1px solid #343B5E; font-size: .82rem; }
.chan-duoi-trong { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-block: 18px 26px; }
.chan-duoi-phai { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.chan-duoi-phai .ic { color: #7CC4F0; }

/* ---------- Nút liên hệ nổi ---------- */
.nut-noi { position: fixed; right: 18px; bottom: 18px; z-index: 1030; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.nut-noi a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nut-noi-tron { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 24px rgba(27,33,71,.28); font-weight: 800; font-size: .8rem; }
.nut-noi-zalo .nut-noi-tron { background: #0068FF; }
.nut-noi-goi .nut-noi-tron { background: var(--do-thuong-hieu); animation: rung 2.4s ease-in-out infinite; }
.nut-noi-nhan { order: -1; background: #fff; color: var(--navy); font-weight: 700; font-size: .9rem; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(27,33,71,.18); }
.nut-noi a:hover .nut-noi-nhan { color: var(--xanh-chu); }
@media (max-width: 575px) { .nut-noi-zalo .nut-noi-nhan { display: none; } .nut-noi { right: 12px; bottom: 12px; } }
@keyframes rung { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .nut-noi-goi .nut-noi-tron { animation: none; } }

.page-pending h1 { font-size: 1.5rem; color: var(--xanh-chu); }
:focus-visible { outline: 3px solid rgba(0,114,188,.45); outline-offset: 2px; }

/* ---------- Giao dịch trực tuyến: đăng ký cấp điện ---------- */
.gd-luoi { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
@media (max-width: 991px) { .gd-luoi { grid-template-columns: 1fr; } }
.gd-buoc { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0 0 24px; flex-wrap: wrap; }
.gd-buoc li { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--nen-o); color: var(--chu-phu); font-weight: 600; }
.gd-buoc li span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--vien); }
.gd-buoc li.dang { background: var(--nhat-xanh); color: var(--xanh-chu); }
.gd-buoc li.dang span { background: var(--xanh); color: #fff; border-color: var(--xanh); }
.gd-buoc li.xong span { background: #1E8E5A; color: #fff; border-color: #1E8E5A; }
.gd-form fieldset { border: 1px solid var(--vien); border-radius: var(--bo); padding: 20px 24px 24px; margin-bottom: 20px; background: #fff; }
.gd-form legend { float: none; width: auto; font-size: 1.05rem; font-weight: 700; color: var(--navy); padding: 0 8px; margin: 0 0 4px -8px; }
.gd-form .form-label b { color: #C0392B; font-weight: 700; }
.gd-chu-y { font-size: .88rem; color: var(--chu-phu); margin-bottom: 12px; }
.gd-tep { padding: 12px 0; border-top: 1px dashed var(--vien); }
.gd-tep:first-of-type { border-top: 0; }
.gd-tep .form-label { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-weight: 600; }
.gd-tep .form-label a { font-weight: 500; font-size: .88rem; display: inline-flex; align-items: center; gap: 4px; }
.gd-xong { text-align: center; padding: 40px 24px; border: 1px solid var(--vien); border-radius: var(--bo); background: #fff; }
.gd-xong .ic { color: #1E8E5A; }
.gd-xong h2 { font-size: 1.4rem; margin: 12px 0; }
.gd-ben { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 72px; }
@media (max-width: 991px) { .gd-ben { position: static; } }
.the-ben { border: 1px solid var(--vien); border-radius: var(--bo); padding: 20px; background: #fff; }
.the-ben h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.the-ben h3 { font-size: .95rem; font-weight: 700; margin: 14px 0 4px; }
.the-ben ol, .the-ben ul { padding-left: 18px; margin-bottom: 0; }
.the-ben-xanh { background: var(--xanh); color: #fff; border-color: var(--xanh); }
.the-ben-xanh p { color: #DCEBF7; }

/* ---------- Captcha ---------- */
.o-captcha-hang { display: flex; gap: 8px; align-items: stretch; }
.o-captcha-hang img { border: 1px solid var(--vien); border-radius: 10px; max-width: 100%; height: auto; background: #fff; }
.o-captcha-hang .btn { font-size: 1.3rem; line-height: 1; padding-inline: 14px; }
.o-captcha input[type=text] { max-width: 260px; }
/* Chữ in hoa giãn cách chỉ áp dụng cho ký tự khách gõ; chữ gợi ý (placeholder) giữ bình thường để không bị cắt mất. */
.o-captcha input[type=text]:not(:placeholder-shown) { text-transform: uppercase; letter-spacing: .25em; font-weight: 700; }
.o-captcha-goi-y { font-weight: 400; color: var(--chu-phu); font-size: .88rem; }
.tc-tai-app { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Tra cứu hóa đơn ---------- */
.tc-trang { max-width: 960px; }
.tc-the { border: 1px solid var(--vien); border-radius: var(--bo); background: #fff; padding: 24px 28px; margin-bottom: 28px; box-shadow: 0 4px 18px rgba(27,33,71,.06); }
.tc-the-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--vien); padding-bottom: 14px; margin-bottom: 18px; }
.tc-the-dau h2 { font-size: 1.25rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--navy); text-transform: uppercase; }
.tc-thang { background: var(--nhat-xanh); color: var(--xanh-chu); font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.tc-thong-tin { display: grid; gap: 0; margin: 0; border: 1px solid var(--vien); border-radius: 12px; overflow: hidden; }
.tc-thong-tin > div { display: grid; grid-template-columns: 220px 1fr; border-top: 1px solid var(--vien); }
.tc-thong-tin > div:first-child { border-top: 0; }
.tc-thong-tin dt { background: var(--nen-o); padding: 12px 16px; font-weight: 600; color: var(--chu-phu); }
.tc-thong-tin dd { margin: 0; padding: 12px 16px; font-weight: 600; color: var(--navy); }
.tc-tong dd { color: #C0392B; font-size: 1.25rem; font-weight: 800; }
@media (max-width: 575px) { .tc-thong-tin > div { grid-template-columns: 1fr; } .tc-thong-tin dt { padding-bottom: 4px; } }
.tc-hanh-dong { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 22px 0 8px; text-align: center; }
.tc-nut-tt { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; padding-inline: 32px; }
.tc-nut-tt small { font-weight: 500; font-size: .85rem; display: inline-flex; align-items: center; gap: 4px; }
.tc-da-tra { display: inline-flex; align-items: center; gap: 8px; background: #FFF4D6; color: #8A5A00; border: 1px solid #F5C451; padding: 10px 22px; border-radius: 12px; font-weight: 800; }
.tc-ghi-chu { color: var(--chu-phu); font-size: .92rem; margin: 0; }
.tc-chi-tiet { margin-top: 12px; }
.tc-chi-tiet > summary { cursor: pointer; color: var(--xanh-chu); font-weight: 700; text-align: center; list-style: none; padding: 8px; }
.tc-chi-tiet > summary::-webkit-details-marker { display: none; }
.tc-chi-tiet > summary::after { content: " ▾"; }
.tc-chi-tiet[open] > summary::after { content: " ▴"; }
.tc-chi-tiet h3 { font-size: 1.05rem; font-weight: 800; text-align: center; margin: 12px 0 14px; text-transform: uppercase; }
.tc-chi-so { margin-bottom: 18px; }
.tc-bang { margin-bottom: 18px; border: 1px solid var(--vien); }
.tc-bang thead th { background: var(--nen-o); font-size: .88rem; white-space: nowrap; }
.tc-dong-tong td { color: #C0392B; font-weight: 800; }
.tc-the-form .form-label b { color: #C0392B; }
.tc-huong-dan { border: 1px solid var(--vien); border-radius: var(--bo); background: #fff; overflow: hidden; }
.tc-huong-dan h2 { font-size: 1rem; font-weight: 800; text-transform: uppercase; margin: 0; padding: 16px 20px; background: var(--nen-o); border-bottom: 1px solid var(--vien); }
.tc-huong-dan details { border-top: 1px solid var(--vien); padding: 0 20px; }
.tc-huong-dan details:first-of-type { border-top: 0; }
.tc-huong-dan summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.tc-huong-dan details[open] summary { color: var(--xanh-chu); }
.tc-huong-dan details p { margin: 0 0 10px; }
.tc-huong-dan details[open] { padding-bottom: 8px; }
.tc-so { width: 26px; height: 26px; border-radius: 50%; background: var(--xanh); color: #fff; display: inline-grid; place-items: center; font-size: .85rem; flex: none; }
.tc-chu-y { color: #C0392B; font-weight: 600; }

/* Icon cửa hàng ứng dụng lấy từ web cũ (images/app-store-img.png, google-store-img.png) */
.nut-cua-hang img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.chan-cua-hang { display: inline-flex; align-items: center; gap: 6px; }
.chan-cua-hang img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }

/* Trang chủ chỉ có nút dẫn sang trang Tra cứu (form tra cứu nằm ở /TraCuu). */
.nut-hero-tra-cuu { display: inline-flex; align-items: center; gap: 10px; font-size: 1.1rem; height: 54px; padding: 0 28px; margin: 4px 0 20px; text-decoration: none; }
.nut-hero-tra-cuu:hover { text-decoration: none; }

/* ---------- Xóa tài khoản app CSKH ---------- */
.xtk-luoi { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
@media (max-width: 991px) { .xtk-luoi { grid-template-columns: 1fr; } }
.xtk-thong-tin { display: flex; flex-direction: column; gap: 16px; }
.xtk-thong-tin .the-ben h2 { display: flex; align-items: center; gap: 8px; }
.xtk-thong-tin ol, .xtk-thong-tin ul { margin-bottom: 0; }
.xtk-luu-y { border-color: #F5C451; background: #FFFBEF; }
.xtk-xac-nhan { padding-left: 2.2em; }
.tc-the .form-label b { color: #C0392B; }