/*!
 * Header & Footer — nhận diện Pro-Metal.
 * Header nền xanh đậm (logo trắng), menu 2 cấp dropdown, hamburger CSS-only (không JS),
 * CTA Gọi/Zalo, footer 4 cột + social + form "Nhận báo giá nhanh".
 * @owner Session A · chỉ dùng var(--pm-*).
 *
 * Ghi chú: .pm-footer__title là NHÃN tiện ích của widget footer (uppercase, nhỏ),
 * KHÔNG phải tiêu đề nội dung → không thuộc quy tắc "H2–H6 bằng size" của type scale.
 */

/* ============================================================= *
 *  CTA dùng chung (A sở hữu; tách biệt .pm-btn của Session B)
 * ============================================================= */
.pm-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:9px;font-weight:700;font-size:15px;line-height:1;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .16s ease,background .16s ease,filter .16s ease;white-space:nowrap}
.pm-cta .pm-icon{flex:none}
.pm-cta--call{background:var(--pm-accent);color:var(--pm-text);box-shadow:0 6px 16px rgba(240,147,43,.28)}
.pm-cta--call:hover,.pm-cta--call:focus-visible{background:var(--pm-accent-hover);color:var(--pm-text);transform:translateY(-2px)}
.pm-cta--zalo{background:var(--pm-zalo);color:#fff}
.pm-cta--zalo:hover,.pm-cta--zalo:focus-visible{color:#fff;filter:brightness(1.08);transform:translateY(-2px)}
.pm-cta--ghost{background:transparent;border-color:currentColor;color:var(--pm-brand)}
.pm-cta--ghost:hover,.pm-cta--ghost:focus-visible{background:var(--pm-surface-2)}
.pm-cta[disabled],.pm-cta.is-loading{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ============================================================= *
 *  HEADER
 * ============================================================= */
.pm-site-header{background:var(--pm-brand-dark);color:#dbe8ef}

/* Top bar */
.pm-topbar{background:rgba(0,0,0,.22)}
.pm-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:40px;flex-wrap:wrap;font-size:var(--pm-small)}
.pm-topbar p{margin:0;display:flex;align-items:center;gap:8px}
.pm-topbar a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.pm-topbar a:hover{color:#fff}
.pm-topbar__hot b{color:#fff}
.pm-topbar .pm-icon{color:var(--pm-accent)}

/* Main bar */
.pm-header-main__inner{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;min-height:72px;padding-block:10px}
.pm-header-brand{flex:none;margin-right:auto}

/* Logo */
.pm-logo{display:inline-flex;align-items:center;text-decoration:none;line-height:1}
.pm-logo__img{max-height:46px;width:auto}
.pm-logo__text{font-weight:800;font-size:22px;letter-spacing:.03em;color:#fff;text-transform:uppercase}

/* Burger + checkbox (CSS-only toggle) */
.pm-nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pm-burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--pm-r-sm);color:#fff;cursor:pointer;background:rgba(255,255,255,.08)}
.pm-burger:hover{background:rgba(255,255,255,.16)}
.pm-burger__close{display:none}
.pm-nav-toggle:checked ~ .pm-burger .pm-burger__open{display:none}
.pm-nav-toggle:checked ~ .pm-burger .pm-burger__close{display:inline-flex}
.pm-nav-toggle:focus-visible ~ .pm-burger{outline:3px solid #fff;outline-offset:2px}

/* Nav — mobile: gập lại, mở khi tick checkbox */
.pm-nav{flex-basis:100%;display:none}
.pm-nav-toggle:checked ~ .pm-nav{display:block}
.pm-menu{list-style:none;margin:0;padding:8px 0 4px;display:flex;flex-direction:column;gap:2px}
.pm-menu a{display:block;padding:12px 10px;color:#e6eff4;text-decoration:none;border-radius:6px;font-weight:600}
.pm-menu a:hover,.pm-menu a:focus-visible,.pm-menu .current-menu-item>a,.pm-menu .current-menu-parent>a{background:rgba(255,255,255,.08);color:#fff}
.pm-menu .sub-menu{list-style:none;margin:0;padding:2px 0 6px 14px}
.pm-menu .sub-menu a{font-weight:500;color:#bcd2dd;font-size:15px;padding:9px 10px}

/* CTA trong header — mobile: xuống hàng, mở cùng menu */
.pm-header-cta{flex-basis:100%;display:none;gap:10px;padding-bottom:12px}
.pm-nav-toggle:checked ~ .pm-header-cta{display:flex}
.pm-header-cta .pm-cta{flex:1;justify-content:center}

/* ---- Desktop ---- */
@media (min-width:1080px){
	.pm-burger{display:none}
	.pm-header-main__inner{flex-wrap:nowrap}
	.pm-header-brand{margin-right:24px}

	.pm-nav{flex-basis:auto;display:block;margin-left:auto}
	.pm-menu{flex-direction:row;align-items:center;gap:2px;padding:0}
	.pm-menu>li{position:relative}
	.pm-menu>li>a{padding:10px 13px;white-space:nowrap}

	/* mũi tên dropdown */
	.pm-menu .menu-item-has-children>a::after{content:"";display:inline-block;width:.46em;height:.46em;margin-left:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.85}

	/* Dropdown */
	.pm-menu .sub-menu{position:absolute;top:100%;left:0;min-width:236px;background:var(--pm-white);border-radius:0 0 var(--pm-r-md) var(--pm-r-md);box-shadow:var(--pm-sh-card);padding:8px;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60}
	.pm-menu>li:hover>.sub-menu,.pm-menu>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
	.pm-menu .sub-menu a{color:var(--pm-text);font-size:15px;padding:10px 12px;border-radius:6px}
	.pm-menu .sub-menu a:hover,.pm-menu .sub-menu a:focus-visible{background:var(--pm-surface-2);color:var(--pm-brand-deep)}

	.pm-header-cta{flex-basis:auto;display:flex;padding:0;margin-left:16px}
	.pm-header-cta .pm-cta{flex:none}
}

@media (max-width:600px){
	.pm-topbar__addr{display:none}
}

/* ============================================================= *
 *  FOOTER
 * ============================================================= */
.pm-site-footer{background:var(--pm-brand-dark);color:#b8ccd6;margin-top:64px;font-size:15px}
.pm-footer__top{display:grid;grid-template-columns:1fr;gap:34px;padding-block:48px}
@media (min-width:640px){.pm-footer__top{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.pm-footer__top{grid-template-columns:1.5fr 1fr 1fr 1.4fr}}

.pm-footer__title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin:0 0 16px}
.pm-footer__logo{margin-bottom:14px}
.pm-footer__logo .pm-logo__img{max-height:50px}
.pm-footer__slogan{color:var(--pm-accent);font-weight:700;letter-spacing:.02em;font-size:14px;margin:0 0 18px}

.pm-footer__contact{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:12px}
.pm-footer__contact li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.pm-footer__contact .pm-icon{color:var(--pm-accent);margin-top:2px}
.pm-footer__contact a{color:#dbe8ef;text-decoration:none}
.pm-footer__contact a:hover{color:#fff}
.pm-footer__contact b{color:#fff;font-weight:700}
.pm-footer__contact em{font-style:normal;color:#9fb8c4;font-size:13.5px}

.pm-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pm-footer__list a{color:#c3d6e0;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.pm-footer__list a:hover{color:#fff}
.pm-footer__list li{display:flex;gap:8px;align-items:center}
.pm-footer__list .pm-icon{color:var(--pm-accent)}

.pm-footer__areas-note{margin:0 0 14px;color:#9fb8c4}
.pm-footer__pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pm-footer__pills li{background:rgba(255,255,255,.08);border-radius:var(--pm-r-pill);padding:6px 14px;font-size:13px;font-weight:600;color:#dbe8ef}

/* Social */
.pm-footer__social{list-style:none;display:flex;gap:10px;margin:6px 0 0;padding:0}
.pm-social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:transform .16s ease,background .16s ease}
.pm-social:hover,.pm-social:focus-visible{color:#fff;transform:translateY(-2px)}
.pm-social--facebook:hover{background:#1877f2}
.pm-social--zalo:hover{background:var(--pm-zalo)}
.pm-social--telegram:hover{background:#29a9eb}

/* Form báo giá nhanh */
.pm-footer__quote-sub{margin:0 0 16px;color:#9fb8c4;font-size:14px;line-height:1.55}
.pm-footer__form{display:flex;flex-direction:column;gap:10px}
.pm-footer__form .pm-field{margin:0}
.pm-footer__submit{width:100%;justify-content:center;margin-top:2px}
.pm-form-msg{margin:.2rem 0 0;font-size:14px;min-height:1.2em}
.pm-form-msg.is-error{color:#ffd3b0}
.pm-form-msg.is-ok{color:#bfe6c8}

/* Bottom bar */
.pm-footer__bottom{background:rgba(0,0,0,.26)}
.pm-footer__bottom-inner{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;padding-block:16px;font-size:13.5px}
.pm-footer__bottom p{margin:0;color:#9fb8c4}
.pm-footer__legal{display:flex;gap:16px}
.pm-footer__legal a{color:#9fb8c4;text-decoration:none}
.pm-footer__legal a:hover{color:#fff}