/*
Theme Name: Dien Nuoc 5P
Theme URI: https://diennuoc5p.com
Author: Dao Quoc Phong
Description: Theme sửa chữa điện nước khu Cầu Giấy — mobile-first, trang chủ kiểu cấp cứu, nút gọi/Zalo cố định đáy màn hình. Chữ và nút cỡ vừa theo chốt của sếp (tiêu đề ~16px, nút cao 44px).
Version: 1.0.0
Text Domain: diennuoc5p
*/

:root{
  --do:#d9342b;
  --do-dam:#b52a22;
  --zalo:#0068ff;
  --muc:#212529;
  --xam:#6b7280;
  --nen:#ffffff;
  --nen-nhat:#f6f7f8;
  --vien:#e5e7eb;
  --xanh-la:#1a8f4c;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.65;color:var(--muc);background:var(--nen);
  padding-bottom:60px; /* chừa chỗ thanh Gọi/Zalo đáy màn hình */
}
img{max-width:100%;height:auto}
a{color:var(--do-dam)}
.container{max-width:960px;margin:0 auto;padding:0 12px} /* mobile lề mỏng, nội dung tràn gần sát viền */

h1{font-size:19px;line-height:1.4;margin:0 0 8px}
h2{font-size:16px;line-height:1.4;margin:26px 0 10px}
h3{font-size:15px;margin:18px 0 8px}

/* ===== Header: logo | ô tìm kiếm (giữa) | nút gọi tròn kiểu ledxinh (màu đỏ) ===== */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--vien);z-index:60}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 0}
.site-logo{order:1;font-weight:800;font-size:17px;color:var(--do);text-decoration:none;white-space:nowrap}
.site-logo small{display:block;font-weight:500;font-size:11px;color:var(--xam);line-height:1.2}
.site-logo img.custom-logo{display:block;max-height:42px;width:auto}

/* Ô tìm kiếm */
.header-search{order:3;width:100%}
.header-search form{display:flex;gap:0}
.header-search input[type=search]{flex:1;min-width:0;height:40px;border:1px solid var(--vien);border-right:0;border-radius:9px 0 0 9px;padding:0 12px;font-size:14px;background:var(--nen-nhat);outline:none}
.header-search input[type=search]:focus{border-color:var(--do);background:#fff}
.header-search button{height:40px;width:46px;border:0;border-radius:0 9px 9px 0;background:var(--do);color:#fff;font-size:16px;cursor:pointer}

/* Nút gọi: vòng tròn đỏ có icon rung + sóng lan, số bên cạnh.
   Mobile ẨN (đã có thanh Gọi/Zalo cố định đáy màn hình, đỡ trùng nút) — chỉ hiện trên laptop. */
.header-call{order:2;margin-left:auto;display:none;align-items:center;gap:9px;text-decoration:none;white-space:nowrap}
.call-icon{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #e85a4f, var(--do) 70%);color:#fff;box-shadow:0 3px 10px rgba(217,52,43,.35);flex:0 0 auto;transition:transform .15s}
.header-call:hover .call-icon{transform:scale(1.1)}
.call-icon::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(217,52,43,.45);animation:dn5p-pulse 1.7s ease-out infinite}
.call-icon svg{width:22px;height:22px;animation:dn5p-shake 1.7s ease-in-out infinite}
.call-text{display:none;line-height:1.2}
.call-text small{display:block;font-size:11px;color:var(--xam);font-weight:600}
.call-text b{font-size:15px;color:var(--do);font-weight:800}
@keyframes dn5p-pulse{to{box-shadow:0 0 0 13px rgba(217,52,43,0)}}
@keyframes dn5p-shake{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(-14deg)}70%{transform:rotate(11deg)}78%{transform:rotate(-8deg)}86%{transform:rotate(5deg)}}

/* Menu chính: một hàng cuộn ngang trên điện thoại */
.site-nav{border-bottom:1px solid var(--vien);background:#fff}
.site-nav ul{list-style:none;margin:0;padding:0 14px;display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.site-nav li{flex:0 0 auto}
.site-nav a{display:block;padding:9px 10px;font-size:13.5px;font-weight:600;color:var(--muc);text-decoration:none;white-space:nowrap}
.site-nav a:hover{color:var(--do)}

/* ===== Nút (có hover: nhấc nhẹ + đậm màu) ===== */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:9px;font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.18)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-goi{background:var(--do);color:#fff}
.btn-goi:visited,.btn-zalo:visited{color:#fff}
.btn-goi:hover{background:var(--do-dam)}
.btn-zalo{background:var(--zalo);color:#fff}
.btn-zalo:hover{background:#0052c9}

/* ===== Hero trang chủ ===== */
.hero{padding:18px 0 6px}
.hero p.mota{margin:0;color:var(--xam);font-size:14px}
.hero-buttons{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;margin:14px 0 12px}
.tem-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tem{background:var(--nen-nhat);border:1px solid var(--vien);border-radius:8px;padding:8px 6px;text-align:center;font-size:12.5px;font-weight:600;line-height:1.35}
.tem span{display:block;font-size:15px}

/* ===== Khối sự cố ===== */
.section{margin:24px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.section-head a{font-size:13px;white-space:nowrap}
.suco-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.suco{display:block;background:#fff;border:1px solid var(--vien);border-radius:10px;padding:12px;text-decoration:none;color:var(--muc);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s,transform .15s}
.suco b{display:block;font-size:14.5px;margin-bottom:3px}
.suco span{font-size:12.5px;color:var(--xam);line-height:1.4;display:block}
.suco:hover{border-color:var(--do);box-shadow:0 4px 12px rgba(0,0,0,.09);transform:translateY(-2px)}
.dichvu-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dichvu-links a{font-size:13px;border:1px solid var(--vien);border-radius:999px;padding:6px 12px;text-decoration:none;color:var(--muc);background:var(--nen-nhat);transition:border-color .15s,color .15s,background .15s}
.dichvu-links a:hover{border-color:var(--do);color:var(--do);background:#fff}

/* ===== Bảng giá ===== */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{border:1px solid var(--vien);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--nen-nhat);font-size:13.5px}
td.gia{white-space:nowrap;font-weight:700}
.ghi-chu-gia{font-size:12.5px;color:var(--xam);margin-top:6px}

/* ===== Khu vực ===== */
.khuvuc-tags{display:flex;flex-wrap:wrap;gap:8px}
.khuvuc-tags a{border:1px solid var(--vien);border-radius:999px;padding:7px 13px;font-size:13.5px;text-decoration:none;color:var(--muc);background:#fff}
.khuvuc-tags a:hover{border-color:var(--do);color:var(--do)}

/* ===== Quy trình 3 bước ===== */
.quytrinh{list-style:none;margin:0;padding:0;counter-reset:buoc}
.quytrinh li{position:relative;padding:0 0 14px 42px;counter-increment:buoc}
.quytrinh li::before{content:counter(buoc);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--do);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.quytrinh b{display:block;font-size:14.5px}
.quytrinh p{margin:2px 0 0;font-size:13.5px;color:var(--xam)}

/* ===== Hộp cam kết / CTA trong bài ===== */
.cta-box{background:#fff5f4;border:1px solid #f3c1bd;border-radius:10px;padding:14px;margin:22px 0}
.cta-box p{margin:0 0 10px;font-size:14.5px;font-weight:600}
.cta-box .hero-buttons{margin:0}

/* ===== Danh sách bài (mẹo) ===== */
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-bottom:1px solid var(--vien);padding:11px 0}
.post-list a{font-weight:700;font-size:14.5px;text-decoration:none;color:var(--muc)}
.post-list a:hover{color:var(--do)}
.post-list .ngay{display:block;font-size:12.5px;color:var(--xam);margin-top:2px}

/* ===== Nội dung trang / bài viết ===== */
.entry{padding:16px 0}
.entry h1{margin-top:4px}
.entry h2{border-left:3px solid var(--do);padding-left:9px}
.entry ul,.entry ol{padding-left:22px}
.entry blockquote{margin:14px 0;padding:10px 14px;background:var(--nen-nhat);border-left:3px solid var(--do);font-size:14px}
.breadcrumb{font-size:12.5px;color:var(--xam);padding-top:12px}
.breadcrumb a{color:var(--xam)}
.entry-meta{font-size:12.5px;color:var(--xam);margin-bottom:12px}

/* ===== Footer ===== */
.site-footer{background:#1e2530;color:#cdd3db;margin-top:34px;padding:22px 0 18px;font-size:13.5px}
.site-footer h4{color:#fff;font-size:14px;margin:0 0 8px}
.site-footer a{color:#cdd3db}
.footer-cols{display:grid;grid-template-columns:1fr;gap:18px}
.copyright{margin-top:18px;padding-top:12px;border-top:1px solid #39414d;font-size:12.5px;color:#8b93a0}

/* ===== Thanh Gọi/Zalo cố định đáy màn hình ===== */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;z-index:100;box-shadow:0 -2px 8px rgba(0,0,0,.12)}
.bottom-bar a{display:flex;align-items:center;justify-content:center;gap:7px;height:52px;font-weight:800;font-size:15px;color:#fff;text-decoration:none;transition:filter .15s}
.bottom-bar a:hover{filter:brightness(1.12)}
.bb-goi{background:var(--do)}
.bb-zalo{background:var(--zalo)}

/* ===== Laptop: giãn 2 cột, không thiết kế riêng ===== */
@media(min-width:768px){
  body{font-size:16px}
  h1{font-size:22px}
  h2{font-size:18px}
  /* Header laptop: ô tìm kiếm nằm giữa */
  .header-search{order:2;width:auto;flex:1;max-width:430px;margin:0 14px}
  .suco-grid{grid-template-columns:repeat(4,1fr)}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
  .hero-buttons{max-width:520px}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px}
}
@media(min-width:900px){
  .bottom-bar{display:none} /* laptop bỏ thanh đáy, thay bằng nút gọi tròn trên header */
  body{padding-bottom:0}
  .header-call{order:3;display:inline-flex}
  .call-text{display:block}
}