/*
Theme Name: Quang Cao HL
Theme URI: https://bienquangcaohl.com.vn/
Author: OpenAI
Description: Theme WordPress responsive cho website dịch vụ biển quảng cáo, lấy cảm hứng từ bố cục website Quảng Cáo HL. Có trang chủ, danh mục dịch vụ, công trình, tin tức, liên hệ và tùy biến thông tin doanh nghiệp.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: quang-cao-hl
*/
:root{--red:#e52329;--navy:#15283f;--ink:#222;--muted:#687385;--line:#e8ebef;--bg:#f6f7f9;--max:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Times New Roman', Times,serif;;color:var(--ink);line-height:1.65;background:#fff}a{color:var(--red);text-decoration:none}a:hover{color:#a90f15}img{max-width:100%;height:auto;display:block}.wrap{width:min(var(--max),calc(100% - 32px));margin:auto}.topbar{background:var(--navy);color:#fff;font-size:13px}.topbar .wrap{display:flex;justify-content:space-between;gap:18px;padding:8px 0;flex-wrap:wrap}.topbar a{color:#fff}.header{background:#fff;box-shadow:0 3px 18px #14243a12;position:relative;z-index:5}.headrow{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:16px 0}.brand{font-size:25px;font-weight:900;color:var(--navy);line-height:1.1;letter-spacing:-.5px}.brand span{color:var(--red)}.tagline{font-size:12px;color:var(--muted);display:block;font-weight:500;margin-top:6px}.headcall{font-weight:800;color:var(--red);font-size:20px;white-space:nowrap}.menu{background:var(--red)}.menu .wrap{display:flex;align-items:center;gap:0;flex-wrap:wrap}.menu a{display:block;padding:13px 15px;color:#fff;font-size:13px;font-weight:800;text-transform:uppercase}.menu a:hover,.menu a:focus{background:#b9151b;color:#fff}.hero{background:linear-gradient(115deg,#12263d 0%,#263e58 58%,#e52329 58%,#f04449 100%);color:#fff;overflow:hidden}.hero .wrap{min-height:350px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:30px;padding:48px 0}.eyebrow{font-weight:800;letter-spacing:2px;color:#ffb7b9;font-size:13px;text-transform:uppercase}.hero h1{font-size:clamp(32px,4.2vw,52px);line-height:1.12;margin:10px 0 18px;color:#fff}.hero p{font-size:17px;color:#f1f4f8;max-width:650px}.btn{display:inline-block;background:var(--red);color:#fff;padding:12px 22px;border-radius:3px;font-weight:800;margin:8px 8px 0 0;border:2px solid var(--red)}.btn:hover{background:#b9151b;border-color:#b9151b;color:#fff}.btn.light{background:#fff;color:var(--navy);border-color:#fff}.hero-art{min-height:240px;display:grid;place-items:center}.sign-graphic{width:min(100%,400px);padding:14px;background:#f6f7f8;border-radius:8px;box-shadow:0 20px 45px #0005;transform:rotate(2deg)}.sign-board{background:linear-gradient(135deg,#162d47,#233e5b);border:7px solid #d7dce1;padding:25px 12px;text-align:center;color:white;font-size:clamp(22px,3vw,34px);font-weight:900;line-height:1.2;text-shadow:0 2px 0 #000}.sign-board em{display:block;color:#ffcf4b;font-size:15px;font-style:normal;margin-top:10px;letter-spacing:2px}.feature-strip{background:#f7f8fa;border-bottom:1px solid var(--line)}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px 0}.feature{background:#fff;border:1px solid var(--line);padding:18px;display:flex;gap:13px;align-items:center}.feature .ico{width:45px;height:45px;border-radius:50%;background:#fff0f0;color:var(--red);display:grid;place-items:center;font-size:23px;flex-shrink:0}.feature strong{display:block;color:var(--navy)}.feature small{color:var(--muted)}.section{padding:52px 0}.section.soft{background:var(--bg)}.section-head{text-align:center;margin-bottom:28px}.section-head .kicker{color:var(--red);font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase}.section-head h2{margin:4px 0 8px;font-size:clamp(25px,3vw,35px);line-height:1.2;color:var(--navy)}.section-head p{color:var(--muted);margin:0}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{background:#fff;border:1px solid var(--line);box-shadow:0 5px 18px #182a3d08;overflow:hidden;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 12px 26px #182a3d14}.thumb{aspect-ratio:4/3;background:linear-gradient(135deg,#e6eaf0,#c9d1db);overflow:hidden;display:grid;place-items:center;color:#69778a;font-size:42px}.thumb img{width:100%;height:100%;object-fit:cover}.cardbody{padding:16px}.card h3{font-size:17px;line-height:1.35;margin:0 0 8px;color:var(--navy)}.card h3 a{color:inherit}.card p{font-size:13px;color:var(--muted);margin:0 0 10px}.readmore{font-size:12px;font-weight:900;text-transform:uppercase}.aboutgrid{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}.aboutpanel{background:var(--navy);padding:32px;color:#fff;border-left:6px solid var(--red)}.aboutpanel h2{color:#fff;margin-top:0;font-size:30px;line-height:1.2}.checklist{padding:0;list-style:none}.checklist li{margin:10px 0}.checklist li:before{content:'✓';color:#ff5a5f;font-weight:900;margin-right:10px}.process{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.step{padding:22px 15px;background:#fff;border:1px solid var(--line);text-align:center}.step b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;margin:0 auto 12px;font-size:18px}.step h3{font-size:15px;line-height:1.3;color:var(--navy)}.step p{font-size:13px;color:var(--muted)}.cta{background:linear-gradient(100deg,#142941,#263e57);color:#fff;padding:38px 0}.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}.cta h2{margin:0 0 5px;color:#fff;font-size:28px}.cta p{margin:0;color:#d9e0e8}.postlist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.postmeta{font-size:12px;color:var(--muted);margin-bottom:8px}.footer{background:#101e2e;color:#cbd4df;padding:42px 0 0}.footgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px;padding-bottom:30px}.footer h3{color:#fff;margin-top:0}.footer a{color:#dbe2eb}.footer ul{padding-left:18px}.copyright{border-top:1px solid #ffffff20;padding:14px 0;font-size:12px;color:#aeb8c5}.pagehead{background:#f4f6f8;padding:32px 0;border-bottom:1px solid var(--line)}.pagehead h1{margin:0;color:var(--navy);font-size:32px}.breadcrumbs{font-size:12px;color:var(--muted);margin-top:6px}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:34px;padding:36px 0 55px}.article h2,.article h3{color:var(--navy)}.article img{border-radius:3px}.sidebar{border:1px solid var(--line);padding:20px;height:max-content}.sidebar h3{margin-top:0;color:var(--navy)}.sidebar ul{padding-left:18px}.contactgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px}.contactbox{background:#f6f7f9;padding:24px;border:1px solid var(--line)}.formrow{margin-bottom:13px}.formrow label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}.formrow input,.formrow textarea{width:100%;padding:12px;border:1px solid #ccd3dc;background:#fff;font:inherit;border-radius:2px}.formrow textarea{min-height:130px}.pagination{margin-top:30px}.pagination .page-numbers{display:inline-block;padding:8px 12px;border:1px solid var(--line);margin-right:4px}.pagination .current{background:var(--red);color:#fff}.mobile-toggle{display:none}.notice{padding:12px;background:#effaf1;border:1px solid #ccebd0;margin:15px 0}.searchform{display:flex}.searchform input{min-width:0;width:100%;padding:10px;border:1px solid var(--line)}.searchform button{background:var(--red);color:#fff;border:0;padding:0 13px}@media(max-width:950px){.cards{grid-template-columns:repeat(2,1fr)}.process{grid-template-columns:repeat(3,1fr)}.hero .wrap{grid-template-columns:1fr}.hero-art{display:none}.footgrid{grid-template-columns:1fr 1fr}.headrow{flex-wrap:wrap}.headcall{font-size:17px}}@media(max-width:650px){.wrap{width:min(100% - 24px,var(--max))}.topbar .wrap{display:block}.topbar .wrap span{display:block}.headrow{padding:12px 0}.brand{font-size:22px}.headcall{font-size:16px}.mobile-toggle{display:block;background:var(--navy);color:#fff;border:0;padding:10px 13px}.menu .wrap{display:none;align-items:stretch}.menu.open .wrap{display:flex;flex-direction:column}.menu a{padding:10px 12px}.hero .wrap{padding:35px 0;min-height:0}.hero h1{font-size:34px}.features{grid-template-columns:1fr;padding:15px 0}.cards{grid-template-columns:1fr 1fr;gap:12px}.cardbody{padding:12px}.card h3{font-size:15px}.section{padding:36px 0}.aboutgrid,.contactgrid,.content-layout{grid-template-columns:1fr}.process{grid-template-columns:1fr 1fr}.postlist{grid-template-columns:1fr}.cta .wrap{display:block}.footgrid{grid-template-columns:1fr}.pagehead h1{font-size:26px}}