/*
Theme Name:   Personal Photo Studio - contentgoc
Theme URI:    https://dev.com.vn
Author:       dev.com.vn
Author URI:   https://dev.com.vn
Description:  Chế bản contentgoc cho Dịch vụ chụp ảnh cá nhân chuyên nghiệp.
Version:      1.3.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:      GPL-2.0-or-later
Text Domain:  gdvp-theme
*/

/* ── Inter từ Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

/* ══════════════════════════════════════
   DESIGN TOKENS — Content Marketing + Trắng sáng
══════════════════════════════════════ */
:root {
  /* ─ Brand hồng pinky ─ */
  --c-pri:      #EC4899;
  --c-pri2:     #F472B6;
  --c-pri3:     #FDF2F8;
  --c-pri4:     #FBCFE8;
  --c-prid:     #BE185D;
  --c-pri-dark: #BE185D;

  /* ─ Neutral ─ */
  --c-tx:    #111827;
  --c-ts:    #374151;
  --c-tm:    #6B7280;
  --c-tb:    #9CA3AF;
  --c-tl:    #D1D5DB;

  /* ─ Surface trắng sáng ─ */
  --c-bg:    #F9FAFB;
  --c-bg2:   #F3F4F6;
  --c-white: #FFFFFF;
  --c-bd:    #E5E7EB;
  --c-bd2:   #D1D5DB;

  /* ─ Shadow nhẹ ─ */
  --sh-xs: 0 1px 2px rgba(0,0,0,.04);
  --sh-sm: 0 1px 8px rgba(0,0,0,.07);
  --sh-md: 0 4px 16px rgba(0,0,0,.09);
  --sh-lg: 0 8px 32px rgba(0,0,0,.12);
  --sh-xl: 0 16px 56px rgba(0,0,0,.14);

  /* ─ Radius ─ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ─ Transition ─ */
  --tr: .18s ease;

  /* ─ Font duy nhất: Inter ─ */
  --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--ff);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-tx);
  background: var(--c-bg);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--ff);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-tx);
}

a { color: var(--c-pri); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--c-prid); }

img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; }
input, textarea, select, button { font-family: var(--ff); font-size: inherit; }

::selection { background: var(--c-pri); color: #fff; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--c-bg2); }
::-webkit-scrollbar-thumb { background: var(--c-bd2); border-radius: 10px; }

/* ==================================================
   Final polish requested: larger logo, no underline, bigger menu, bright pink home ads
================================================== */
a,
a:hover,
a:focus,
a:active,
.site-header a,
.nav a,
.top-right a,
.header-actions a,
#main-content a,
.wp-content a,
.entry-content a,
.cm-ad-card,
.cm-service-card,
.h-seeall,
.h-btn,
.h-tag,
.h-ind,
.h-ncard {
  text-decoration: none !important;
}
.nav .active > a:after,
.nav .current-menu-item > a:after,
.nav .current-menu-ancestor > a:after,
.nav .current_page_item > a:after,
.nav .current_page_ancestor > a:after {
  display: none !important;
}
.site-header.gdvp-dynamic-header .header-main {
  grid-template-columns: 320px minmax(0, 1fr) 280px !important;
}
.site-header.gdvp-dynamic-header .brand-logo-only img,
.site-header.gdvp-dynamic-header .brand-logo-only .custom-logo {
  width: 288px !important;
  max-width: 288px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}
.site-header.gdvp-dynamic-header .brand-logo-only .custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 288px !important;
  height: auto !important;
}
.site-header.gdvp-dynamic-header .nav a {
  font-size: 15px !important;
  text-decoration: none !important;
}
.site-header.gdvp-dynamic-header .nav .sub-menu a {
  font-size: 14px !important;
}
.cm-ad-section {
  background: #FFF7FB !important;
  border-top: 1px solid #FFE4F1 !important;
  border-bottom: 1px solid #FFE4F1 !important;
}
.cm-ad-card {
  min-height: 300px !important;
  background: linear-gradient(135deg,#FFFFFF 0%,#FFF1F8 45%,#FFE4F1 100%) !important;
  color: #7A1039 !important;
  border: 1px solid #F9A8D4 !important;
  box-shadow: 0 18px 45px rgba(236,72,153,.12) !important;
}
.cm-ad-card:before,
.cm-ad-left:before,
.cm-ad-right:before {
  background: linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,228,241,.72)) !important;
}
.cm-ad-kicker {
  border-color: #F9A8D4 !important;
  background: #FFFFFF !important;
  color: #BE185D !important;
}
.cm-ad-card h2 {
  color: #831843 !important;
}
.cm-ad-card p {
  color: #7A1039 !important;
}
.cm-ad-btn {
  background: #EC4899 !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 24px rgba(236,72,153,.22) !important;
}
@media(max-width:1100px){
  .site-header.gdvp-dynamic-header .header-main{
    grid-template-columns: 300px minmax(0,1fr) !important;
  }
  .site-header.gdvp-dynamic-header .header-actions{
    grid-column: 2;
  }
}
@media(max-width:720px){
  .site-header.gdvp-dynamic-header .brand-logo-only img,
  .site-header.gdvp-dynamic-header .brand-logo-only .custom-logo{
    width: min(56vw, 220px) !important;
    max-width: 220px !important;
    height: auto !important;
  }
  .site-header.gdvp-dynamic-header .brand-logo-only .custom-logo-link{
    max-width: 220px !important;
  }
  .site-header.gdvp-dynamic-header .nav a{
    font-size: 14px !important;
  }
  .site-header.gdvp-dynamic-header .nav .sub-menu a{
    font-size: 13px !important;
  }
}



/* Mobile category menu fix */
.mobile-menu-toggle{ text-decoration:none !important; }
.mobile-menu-toggle.is-active{ border-color:#f9a8d4; background:#fff7fb; color:#be185d; }
@media(max-width:720px){
  .site-header.gdvp-dynamic-header .mobile-menu-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:42px;
    font-size:14px;
  }
  .site-header.gdvp-dynamic-header .nav-bar{
    display:none !important;
  }
  .site-header.gdvp-dynamic-header .nav-bar.is-open{
    display:block !important;
  }
  .site-header.gdvp-dynamic-header .nav{
    display:block !important;
  }
}


/* ==================================================
   Header update: fixed brief link, mobile hamburger beside logo
================================================== */
.desktop-brief-cta,
.mobile-brief-btn{
  text-decoration:none !important;
}
.mobile-menu-footer{
  display:none;
}
.mobile-menu-toggle .hamburger-lines{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:22px;
  height:18px;
}
.mobile-menu-toggle .hamburger-lines span{
  display:block;
  width:22px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:transform .18s ease, opacity .18s ease;
}
.mobile-menu-toggle.is-active .hamburger-lines span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.mobile-menu-toggle.is-active .hamburger-lines span:nth-child(2){
  opacity:0;
}
.mobile-menu-toggle.is-active .hamburger-lines span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}
.site-header.gdvp-dynamic-header .header-actions .login{
  display:none !important;
}
@media(min-width:721px){
  .site-header.gdvp-dynamic-header .mobile-menu-toggle .mobile-menu-label{
    display:none;
  }
}
@media(max-width:720px){
  .site-header.gdvp-dynamic-header{
    position:sticky;
  }
  .site-header.gdvp-dynamic-header .header-main{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 58px !important;
    align-items:center !important;
    gap:10px !important;
    min-height:64px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  .site-header.gdvp-dynamic-header .brand{
    grid-column:1 !important;
    order:1 !important;
    min-width:0 !important;
  }
  .site-header.gdvp-dynamic-header .mobile-menu-toggle{
    grid-column:2 !important;
    order:2 !important;
    display:inline-flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:end !important;
    width:58px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    gap:3px !important;
    border-radius:13px !important;
    font-size:10px !important;
    line-height:1 !important;
    color:#be185d !important;
    background:#fff7fb !important;
    border:1px solid #f9a8d4 !important;
    box-shadow:0 8px 18px rgba(236,72,153,.10) !important;
  }
  .site-header.gdvp-dynamic-header .mobile-menu-toggle .mobile-menu-label{
    display:block !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:-.02em !important;
  }
  .site-header.gdvp-dynamic-header .search-box,
  .site-header.gdvp-dynamic-header .header-actions{
    display:none !important;
  }
  .site-header.gdvp-dynamic-header .brand-logo-only img,
  .site-header.gdvp-dynamic-header .brand-logo-only .custom-logo{
    width:min(58vw,220px) !important;
    max-width:220px !important;
    height:auto !important;
  }
  .site-header.gdvp-dynamic-header .nav-bar{
    display:none !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    z-index:99 !important;
    background:#fff !important;
    border-top:1px solid #ffe4f1 !important;
    border-bottom:1px solid #f9a8d4 !important;
    box-shadow:0 18px 40px rgba(15,35,60,.14) !important;
    max-height:calc(100vh - 70px) !important;
    overflow:auto !important;
  }
  .site-header.gdvp-dynamic-header .nav-bar.is-open{
    display:block !important;
  }
  .site-header.gdvp-dynamic-header .nav-bar .container{
    width:min(var(--container,1160px),calc(100% - 24px)) !important;
  }
  .site-header.gdvp-dynamic-header .nav{
    display:block !important;
    padding:10px 0 4px !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  .site-header.gdvp-dynamic-header .nav li{
    border-bottom:1px solid #f1f5f9 !important;
  }
  .site-header.gdvp-dynamic-header .nav a{
    min-height:44px !important;
    padding:10px 44px 10px 0 !important;
    width:100% !important;
  }
  .site-header.gdvp-dynamic-header .mobile-menu-footer{
    display:block !important;
    padding:14px 0 18px !important;
    border-top:1px solid #ffe4f1 !important;
  }
  .site-header.gdvp-dynamic-header .mobile-brief-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:46px !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,#ec4899,#f472b6) !important;
    color:#fff !important;
    font-weight:800 !important;
    box-shadow:0 14px 26px rgba(236,72,153,.22) !important;
  }
}


/* ==================================================
   HOTFIX 1.3.3: keep mobile search + show brief button in mobile menu
================================================== */
@media(max-width:720px){
  .site-header.gdvp-dynamic-header .header-main{
    grid-template-columns:minmax(0,1fr) 58px !important;
    grid-auto-rows:auto !important;
  }
  .site-header.gdvp-dynamic-header .search-box{
    display:grid !important;
    grid-column:1 / -1 !important;
    order:3 !important;
    width:100% !important;
    height:42px !important;
    margin:4px 0 0 !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .site-header.gdvp-dynamic-header .search-box input{
    display:block !important;
    min-width:0 !important;
  }
  .site-header.gdvp-dynamic-header .search-box button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .site-header.gdvp-dynamic-header .header-actions{
    display:none !important;
  }
  .site-header.gdvp-dynamic-header #mainNavBar.is-open .mobile-menu-footer,
  .site-header.gdvp-dynamic-header .nav-bar.is-open .mobile-menu-footer{
    display:block !important;
    padding:14px 0 18px !important;
    border-top:1px solid #ffe4f1 !important;
  }
  .site-header.gdvp-dynamic-header #mainNavBar.is-open .mobile-brief-btn,
  .site-header.gdvp-dynamic-header .nav-bar.is-open .mobile-brief-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:46px !important;
    border-radius:14px !important;
    text-decoration:none !important;
    background:linear-gradient(135deg,#ec4899,#f472b6) !important;
    color:#fff !important;
    font-weight:800 !important;
    box-shadow:0 14px 26px rgba(236,72,153,.22) !important;
  }
}

/* ==================================================
   HOTFIX 1.3.4: FORCE mobile search + colored brief CTA
   - Mobile row 1: logo left, hamburger right
   - Mobile row 2: visible search box full width
   - Mobile menu footer: colored Gửi brief button
================================================== */
@media (max-width: 720px) {
  html body .site-header.gdvp-dynamic-header .header-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    gap: 8px 10px !important;
    min-height: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
  html body .site-header.gdvp-dynamic-header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    display: flex !important;
    min-width: 0 !important;
  }
  html body .site-header.gdvp-dynamic-header .brand-logo-only,
  html body .site-header.gdvp-dynamic-header .brand-logo-only .custom-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    max-width: min(58vw, 220px) !important;
  }
  html body .site-header.gdvp-dynamic-header .brand-logo-only img,
  html body .site-header.gdvp-dynamic-header .brand-logo-only .custom-logo {
    width: min(58vw, 220px) !important;
    max-width: 220px !important;
    height: auto !important;
    max-height: 52px !important;
    object-fit: contain !important;
  }
  html body .site-header.gdvp-dynamic-header .mobile-menu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 2 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    width: 58px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    gap: 3px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: #be185d !important;
    background: #fff7fb !important;
    border: 1px solid #f9a8d4 !important;
    box-shadow: 0 8px 18px rgba(236,72,153,.10) !important;
  }
  html body .site-header.gdvp-dynamic-header .mobile-menu-toggle .mobile-menu-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
  }
  html body .site-header.gdvp-dynamic-header form.search-box,
  html body .site-header.gdvp-dynamic-header .search-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    order: 3 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 6px 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    position: static !important;
    transform: none !important;
  }
  html body .site-header.gdvp-dynamic-header .search-box input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html body .site-header.gdvp-dynamic-header .search-box button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  html body .site-header.gdvp-dynamic-header .header-actions {
    display: none !important;
  }
  html body .site-header.gdvp-dynamic-header .nav-bar {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    z-index: 999 !important;
    background: #fff !important;
    border-top: 1px solid #ffe4f1 !important;
    border-bottom: 1px solid #f9a8d4 !important;
    box-shadow: 0 18px 40px rgba(15,35,60,.14) !important;
    max-height: calc(100vh - 112px) !important;
    overflow: auto !important;
  }
  html body .site-header.gdvp-dynamic-header .nav-bar.is-open {
    display: block !important;
  }
  html body .site-header.gdvp-dynamic-header .nav-bar .container {
    width: min(var(--container,1160px), calc(100% - 24px)) !important;
  }
  html body .site-header.gdvp-dynamic-header .nav {
    display: block !important;
    padding: 10px 0 4px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  html body .site-header.gdvp-dynamic-header .nav a {
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 44px 10px 0 !important;
    width: 100% !important;
    text-decoration: none !important;
  }
  html body .site-header.gdvp-dynamic-header .mobile-menu-footer {
    display: block !important;
    padding: 14px 0 18px !important;
    margin-top: 6px !important;
    border-top: 1px solid #ffe4f1 !important;
  }
  html body .site-header.gdvp-dynamic-header .mobile-brief-btn,
  html body .site-header.gdvp-dynamic-header a.mobile-brief-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #ec4899, #f472b6) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    box-shadow: 0 14px 26px rgba(236,72,153,.24) !important;
  }
}
@media (min-width: 721px) {
  html body .site-header.gdvp-dynamic-header .mobile-menu-footer {
    display: none !important;
  }
}

/* === Patch 1.3.5: logo theo chiều cao 38px, rộng tự co theo tỉ lệ === */
html body .site-header.gdvp-dynamic-header .brand,
html body .site-header.gdvp-dynamic-header .brand-logo-only,
html body .site-header.gdvp-dynamic-header .brand-logo-only .custom-logo-link{
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
html body .site-header.gdvp-dynamic-header .brand-logo-only img,
html body .site-header.gdvp-dynamic-header .brand-logo-only .custom-logo,
html body .site-header.gdvp-dynamic-header .brand-logo img,
html body .site-header.gdvp-dynamic-header .brand-logo .custom-logo{
  height: 38px !important;
  min-height: 0 !important;
  max-height: 38px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
}
html body .site-header.gdvp-dynamic-header .header-main{
  grid-template-columns: auto minmax(220px,1fr) auto !important;
}
@media (max-width: 720px){
  html body .site-header.gdvp-dynamic-header .header-main{
    grid-template-columns: minmax(0,1fr) auto !important;
  }
  html body .site-header.gdvp-dynamic-header .brand-logo-only img,
  html body .site-header.gdvp-dynamic-header .brand-logo-only .custom-logo,
  html body .site-header.gdvp-dynamic-header .brand-logo img,
  html body .site-header.gdvp-dynamic-header .brand-logo .custom-logo{
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: calc(100vw - 104px) !important;
  }
}