/* "Dịch vụ" dropdown in the main menu: opens on hover, or on focus for keyboard and touch */
.dd{position:relative;display:inline-flex}
.dd-btn{font:inherit;font-weight:600;font-size:15px;color:#21272A;background:none;border:0;padding:10px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.dd-btn svg{transition:transform .15s}
.dd-menu{display:none;position:absolute;top:100%;left:-16px;z-index:200;min-width:280px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #E1EAE3;border-top:3px solid #0D662B;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:8px 0}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd:hover .dd-btn svg,.dd:focus-within .dd-btn svg{transform:rotate(180deg)}
.dd-menu a{display:block;padding:11px 18px;color:#21272A;text-decoration:none;font-weight:600;font-size:15px}
.dd-menu a:hover,.dd-menu a:focus{background:#EEF5F0;color:#0D662B}

/* Header row: logo, main menu, phone and quote button */
.hdr-row{max-width:1200px;margin:0 auto;padding:12px 24px;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.main-nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:15px;font-weight:600;flex:1 1 420px}
.main-nav>a{text-decoration:none;padding:10px 0;color:#21272A}
.hdr-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hdr-mobile{display:none}
.hdr-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;color:#0D662B;background:none;border:0;border-radius:4px;cursor:pointer}
.nav-toggle{display:none}
.nav-toggle .ic-close,.site-header.open .nav-toggle .ic-menu{display:none}
.site-header.open .nav-toggle .ic-close{display:block}

/* Phones: logo + call icon + ☰; the menu folds open below the row */
@media (max-width:700px){
  .hdr-row{padding:8px 16px;gap:0}
  .hdr-row img{height:44px!important}
  .hdr-actions{display:none}
  .hdr-mobile{display:flex;align-items:center;gap:4px;margin-left:auto}
  .nav-ready .nav-toggle{display:inline-flex}
  .main-nav{flex:1 1 100%;flex-direction:column;gap:0;margin-top:8px;border-top:1px solid #E1EAE3;max-height:calc(100vh - 80px);overflow-y:auto}
  .nav-ready:not(.open) .main-nav{display:none}
  .main-nav>a,.dd-btn{padding:14px 0;border-bottom:1px solid #E1EAE3;font-size:16px}
  .dd{display:block}
  .dd-btn{width:100%}
  .dd-btn svg{display:none}
  .dd-menu{display:block;position:static;min-width:0;max-width:none;border:0;box-shadow:none;padding:4px 0 8px 12px;border-bottom:1px solid #E1EAE3}
  .dd-menu a{padding:10px 0}
}

/* Quick contact: floating call + Zalo on desktop, a three-button bar on phones */
.quick-contact{position:fixed;right:20px;bottom:20px;z-index:150;display:flex;flex-direction:column;gap:12px;font-family:'Be Vietnam Pro',system-ui,sans-serif}
.quick-contact a{display:flex;align-items:center;justify-content:center;gap:8px;width:56px;height:56px;border-radius:50%;color:#fff;text-decoration:none;font-weight:700;font-size:15px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.quick-contact a:hover{color:#fff;filter:brightness(1.1)}
.quick-contact span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qc-call{background:#0D662B}
.qc-zalo{background:#0068FF}
.quick-contact .qc-quote{display:none;background:#C6963C;color:#0A3D1B}
@media (max-width:700px){
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .quick-contact{left:0;right:0;bottom:0;flex-direction:row;gap:0;padding-bottom:env(safe-area-inset-bottom);background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,.12)}
  .quick-contact a{flex:1 1 0;width:auto;height:60px;border-radius:0;box-shadow:none}
  .quick-contact span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .quick-contact .qc-quote{display:flex}
  .quick-contact .qc-quote:hover{color:#0A3D1B}
}