/* Giaodiengiatot — trang chủ + phần dùng chung (header, footer, thẻ giao diện, CTA). Mockup: astra_jobs/gdgt-home/mockups/home-desktop-v1.png */
@font-face { font-family: 'GD Head'; src: url('../assets/fonts/SVN-Gilory/SVN-GilroyBold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'GD Head'; src: url('../assets/fonts/SVN-Gilory/SVN-GilroySemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'GD Head'; src: url('../assets/fonts/SVN-Gilory/SVN-GilroyHeavy.woff2') format('woff2'); font-weight: 800; font-display: swap; }
:root { --gd-p: #0160e7; --gd-p2: #0a4fc4; --gd-or: #fe4c1c; --gd-ink: #0b1f4d; --gd-tx: #56627a; --gd-mu: #8a94a8; --gd-bd: #e2e9f5; --gd-bg: #f4f7fd; --gd-bg2: #eaf1fe; --gd-navy: #0b1f4d; --gd-r: 12px; }
body, p, li, a, span, input, select, textarea, button, label, td, th, small, .nav > li > a, .button { font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important; }
h1, h2, h3, h4, h5, h6, .gd-h2, .gd-num { font-family: 'GD Head', 'Be Vietnam Pro', sans-serif !important; letter-spacing: -.01em; }
h1 a, h2 a, h3 a, h4 a { font-family: inherit !important; }
body { color: var(--gd-tx); background: #fff; }
.gd-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }
.gd-wrap { max-width: 1310px; margin: 0 auto; padding: 0 30px; }
.gd-sec .col, .gd-footer .col { padding-bottom: 0 !important; }
.gd-sec .col-inner, .gd-footer .col-inner { text-align: left; }
.gd-h2 { font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--gd-ink); margin: 0 0 6px; }
.gd-h2.gd-blue { color: var(--gd-p); }
.gd-sub { font-size: 15.5px; color: var(--gd-tx); margin: 0 0 22px; }
.gd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.gd-head .gd-sub { margin: 0; }
.gd-head h2 { flex: 0 0 auto; width: fit-content; margin: 0; }
.gd-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--gd-p) !important; white-space: nowrap; }
.gd-center { text-align: center; margin-top: 26px; }
.gd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 22px; border-radius: 8px; font-size: 14.5px; font-weight: 600; line-height: 1; border: 1.5px solid transparent; transition: .2s; white-space: nowrap; text-decoration: none !important; }
.gd-btn-p { background: var(--gd-p); color: #fff !important; } .gd-btn-p:hover { background: var(--gd-p2); }
.gd-btn-or { background: var(--gd-or); color: #fff !important; } .gd-btn-or:hover { filter: brightness(.94); }
.gd-btn-o { background: #fff; color: var(--gd-p) !important; border-color: #9cc0f6; } .gd-btn-o:hover { border-color: var(--gd-p); background: #f5f9ff; }
.gd-btn-w { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.85); } .gd-btn-w:hover { background: rgba(255,255,255,.1); }
.gd-btn-lg { height: 48px; padding: 0 34px; font-size: 15px; }
.gd-btn .gd-ic { font-size: 18px; }
.gd-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gd-p); font-weight: 600; font-size: 14px; }

/* ---------- HEADER ---------- */
#header .header-main { height: 66px; border-bottom: 1px solid #edf1f8; }
#header .header-main .header-inner { max-width: 1310px !important; padding-left: 15px; padding-right: 15px; }
#logo img { max-height: 34px !important; width: auto !important; }
#logo { width: auto !important; margin-right: 36px; }
#header .header-nav-main > li { margin: 0 12px; }
#header .header-nav-main > li > a { font-size: 14px !important; font-weight: 500; color: #1d2842; text-transform: none; letter-spacing: 0; white-space: nowrap; padding: 0; }
#header .header-nav-main > li.active > a, #header .header-nav-main > li.current-menu-item > a, #header .header-nav-main > li > a:hover { color: var(--gd-p); }
#header .header-nav-main > li.current-menu-item > a { box-shadow: inset 0 -2px 0 var(--gd-p); padding: 6px 0; }
#header .header-nav-main .icon-angle-down { font-size: 11px; margin-left: 4px; opacity: .8; }
#header .nav-dropdown { border-radius: 10px; border: 1px solid var(--gd-bd); box-shadow: 0 14px 34px rgba(11,31,77,.12); padding: 8px 0; }
#header .nav-dropdown li a { font-size: 14px; text-transform: none; color: #1d2842; padding: 8px 18px; }
#header .nav-dropdown li a:hover { color: var(--gd-p); background: #f4f8ff; }
#header .html_topbar_right, #header li.html.custom { padding: 0; }
.gd-hdr-r { display: flex; align-items: center; gap: 18px; }
.gd-hsearch { position: relative; width: 250px; margin: 0; }
.gd-hsearch input[type=search] { height: 40px; margin: 0; border-radius: 8px; border: 1px solid #e3e8f1; background: #f5f7fb; box-shadow: none; padding: 0 42px 0 14px; font-size: 13.5px; color: var(--gd-ink); }
.gd-hsearch input::placeholder { color: #98a1b3; }
.gd-hsearch button { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; background: none; border: 0; color: #1d2842; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.gd-hcart { position: relative; display: inline-flex; color: #1d2842 !important; font-size: 24px; padding: 4px; }
.gd-cartn { position: absolute; top: -3px; right: -6px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--gd-or); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.gd-cartn.is-0 { width: 9px; min-width: 9px; height: 9px; padding: 0; font-size: 0; top: 1px; right: 0; }
#header .header-button-1 .button, #header .header-button .button { background: var(--gd-p) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; height: 44px; line-height: 44px; padding: 0 24px; font-size: 14.5px; font-weight: 600; text-transform: none; letter-spacing: 0; box-shadow: none; margin: 0; }
#header .header-button-1 .button:hover { background: var(--gd-p2) !important; }
.header-main .mobile-nav .icon-menu, .header-main .mobile-nav i { color: var(--gd-ink) !important; }
.header-main .mobile-nav .button, .header-main .mobile-nav .cart-icon strong { background: transparent !important; }

/* ---------- THẺ GIAO DIỆN ---------- */
.gd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.gd-grid > * { min-width: 0; }
.gd-card { background: #fff; border: 1px solid var(--gd-bd); border-radius: var(--gd-r); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(11,31,77,.05); transition: .25s; }
.gd-card:hover { box-shadow: 0 16px 36px rgba(11,31,77,.12); transform: translateY(-3px); }
.gd-shot { position: relative; display: block; margin: 6px 6px 0; border: 1px solid #edf1f7; border-radius: 8px 8px 4px 4px; overflow: hidden; background: #f3f6fb; }
.gd-bar { display: flex; gap: 4px; align-items: center; height: 17px; padding: 0 8px; background: #f3f6fb; border-bottom: 1px solid #e8edf5; }
.gd-bar i { width: 6px; height: 6px; border-radius: 50%; background: #ff5f57; } .gd-bar i + i { background: #febc2e; } .gd-bar i + i + i { background: #28c840; }
.gd-shot img { display: block; width: 100%; aspect-ratio: 16 / 12.2; object-fit: cover; object-position: top center; transition: object-position 3.5s ease; }
.gd-card:hover .gd-shot img { object-position: bottom center; transition-duration: 6s; }
.gd-badge { position: absolute; left: 10px; top: 25px; z-index: 2; background: var(--gd-or); color: #fff; font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; }
.gd-cbody { padding: 12px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.gd-ccat { font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--gd-mu) !important; margin-bottom: 3px; }
.gd-cname { font-size: 17px; font-weight: 700; color: var(--gd-ink) !important; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-family: 'GD Head', sans-serif !important; }
.gd-cname:hover { color: var(--gd-p) !important; }
.gd-cprice { margin: 4px 0 12px; font-size: 16px; color: var(--gd-p); } .gd-cprice b { font-weight: 700; } .gd-cprice s { font-size: 13px; color: var(--gd-mu); margin-left: 6px; }
.gd-cbtn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.gd-cbtn .gd-btn { height: 40px; padding: 0 8px; font-size: 14px; }
.gd-btn-buy { background: var(--gd-p); color: #fff !important; } .gd-btn-buy:hover { background: var(--gd-p2); }
.gd-card-home .gd-ccat { order: 2; text-transform: none; letter-spacing: 0; font-size: 13px; margin: 0; }
.gd-card-home .gd-cname { order: 1; } .gd-card-home .gd-cprice { order: 3; margin-top: 2px; } .gd-card-home .gd-cbtn { order: 4; }

/* ---------- HERO ---------- */
.section.gd-hero { background: linear-gradient(180deg, #f1f6ff 0%, #eaf2fe 100%); padding: 0 !important; overflow: hidden; }
.gd-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(1,96,231,.07) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.gd-hero-in { display: grid; grid-template-columns: 640px 1fr; gap: 20px; align-items: center; min-height: 400px; padding: 26px 0 30px; position: relative; }
.gd-pill { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--gd-p); background: #dfeafe; border: 1px solid #c5dafd; border-radius: 30px; padding: 5px 14px; margin-bottom: 14px; }
.gd-hero h1 { font-size: 41px; line-height: 1.25; font-weight: 800; color: var(--gd-ink); margin: 0 0 14px; }
.gd-hero h1 em { font-style: normal; color: var(--gd-p); display: block; }
.gd-lead { font-size: 16px; line-height: 1.6; color: #3e4a63; margin: 0 0 24px; }
.gd-bigsearch { display: flex; align-items: stretch; gap: 0; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(11,31,77,.08); max-width: 592px; margin: 0 0 20px; padding: 0; height: 56px; }
.gd-bigsearch input[type=search] { flex: 1; min-width: 0; height: 56px; margin: 0; border: 0; box-shadow: none; background: transparent; padding: 0 18px; font-size: 14.5px; border-radius: 10px 0 0 10px; }
.gd-sel { position: relative; width: 165px; margin: 0; border-left: 1px solid #e7ecf4; display: flex; align-items: center; }
.gd-sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 56px; margin: 0; border: 0; box-shadow: none; background: transparent; padding: 0 30px 0 16px; font-size: 14px; color: var(--gd-ink); }
.gd-sel .gd-ic { position: absolute; right: 12px; pointer-events: none; font-size: 15px; color: var(--gd-tx); }
.gd-bigsearch button { width: 58px; height: 58px; margin: -1px -1px 0 6px; border: 0; border-radius: 9px; background: var(--gd-p); color: #fff; font-size: 23px; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 0; }
.gd-bigsearch button:hover { background: var(--gd-p2); }
.gd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.gd-tags span { color: #3e4a63; margin-right: 2px; }
.gd-tags a { color: var(--gd-p) !important; border: 1px solid #a9c7f7; background: #fff; border-radius: 20px; padding: 4px 12px; font-size: 12.5px; font-weight: 500; }
.gd-tags a:hover { background: var(--gd-p); color: #fff !important; }
.gd-collage { position: relative; height: 385px; margin-right: -30px; }
.gd-cl { position: absolute; display: block; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 40px rgba(11,31,77,.18); border: 1px solid #e3e9f3; }
.gd-cl img { display: block; width: 100%; height: calc(100% - 17px); object-fit: cover; object-position: top; }
.gd-cl1 { left: 12px; top: 22px; width: 240px; height: 205px; transform: rotate(-4deg); z-index: 2; }
.gd-cl2 { left: 222px; top: 105px; width: 215px; height: 175px; transform: rotate(3deg); z-index: 3; }
.gd-cl3 { left: 425px; top: 88px; width: 205px; height: 215px; transform: rotate(4deg); z-index: 2; }
.gd-cl4 { left: 0; top: 232px; width: 200px; height: 150px; transform: rotate(-5deg); z-index: 3; }
.gd-cl5 { left: 180px; top: 262px; width: 190px; height: 118px; transform: rotate(4deg); z-index: 4; }
.gd-float { position: absolute; z-index: 6; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 12px 18px 12px 12px; box-shadow: 0 14px 34px rgba(11,31,77,.14); }
.gd-float p { margin: 0; font-size: 11.5px; color: var(--gd-tx); line-height: 1.4; } .gd-float b { display: block; font-size: 14.5px; color: var(--gd-ink); font-weight: 700; }
.gd-fi { width: 40px; height: 40px; border-radius: 50%; background: var(--gd-p); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; flex: none; }
.gd-fi-or { background: var(--gd-or); }
.gd-fl1 { left: 245px; top: 8px; } .gd-fl2 { left: 360px; top: 300px; }

/* ---------- TRUST ---------- */
.section.gd-trust { background: #fff; padding: 0 !important; border-bottom: 1px solid #eef2f8; }
.gd-trust-in { display: flex; align-items: center; justify-content: space-between; min-height: 94px; gap: 10px; }
.gd-stat { display: flex; align-items: center; gap: 12px; padding: 0 22px; border-right: 1px solid var(--gd-bd); }
.gd-stat:first-child { padding-left: 4px; }
.gd-stat > .gd-ic { font-size: 38px; color: var(--gd-p); stroke-width: 1.6; }
.gd-stat p { margin: 0; white-space: nowrap; font-size: 12.5px; line-height: 1.35; color: var(--gd-tx); } .gd-stat b { display: block; font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--gd-p); font-family: 'GD Head', sans-serif !important; }
.gd-pay { display: flex; gap: 28px; padding-left: 20px; }
.gd-pay span { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: #2a3552; white-space: nowrap; } .gd-pay .gd-ic { font-size: 28px; color: var(--gd-p); }

/* ---------- NGÀNH ---------- */
.section.gd-catsec { background: var(--gd-bg); padding: 40px 0 36px !important; }
.gd-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 22px; }
.gd-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid var(--gd-bd); border-radius: var(--gd-r); padding: 8px 8px 8px 16px; min-height: 96px; box-shadow: 0 3px 12px rgba(11,31,77,.04); transition: .2s; }
.gd-cat:hover { border-color: #9cc0f6; box-shadow: 0 12px 26px rgba(11,31,77,.1); }
.gd-catt { min-width: 0; flex: 1; } .gd-catt b { display: block; white-space: nowrap; letter-spacing: -.015em; font-size: 15px; line-height: 1.3; color: var(--gd-ink); font-weight: 700; font-family: 'GD Head', sans-serif !important; } .gd-catt small { font-size: 13.5px; color: var(--gd-tx); }
.gd-catimg { width: 116px; height: 78px; border-radius: 8px; overflow: hidden; flex: none; background: #e9f0fb; }
.gd-catimg img { width: 100%; height: 100%; object-fit: cover; display: block; } .gd-catimg.is-shot img { object-position: top; }

/* ---------- MỚI NHẤT ---------- */
.section.gd-latest { background: #fff; padding: 44px 0 40px !important; }
.gd-head-tabs { align-items: center; }
.gd-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-right: auto; margin-left: 150px; }
.gd-pills a { font-size: 13px; font-weight: 500; color: #2a3552 !important; border: 1px solid #dfe6f2; border-radius: 8px; padding: 7px 14px; background: #fff; }
.gd-pills a.on, .gd-pills a:hover { background: var(--gd-p); border-color: var(--gd-p); color: #fff !important; }

/* ---------- VÌ SAO ---------- */
.section.gd-why { background: #fff; padding: 20px 0 30px !important; }
.gd-why .gd-h2 { margin-bottom: 16px; }
.gd-why-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.gd-why-big { grid-row: span 2; background: var(--gd-bg); border-radius: var(--gd-r); padding: 26px 22px 22px; }
.gd-why-big h3 { font-size: 27px; color: var(--gd-p); font-weight: 700; margin: 0 0 8px; }
.gd-why-big > p { font-size: 15px; line-height: 1.6; color: var(--gd-tx); max-width: 420px; margin: 0 0 20px; }
.gd-score { display: flex; align-items: flex-end; gap: 36px; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(11,31,77,.07); padding: 22px 24px 18px; }
.gd-ring { width: 118px; height: 118px; border-radius: 50%; background: conic-gradient(#1fb865 0 98%, #e5f5ec 98% 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; flex: none; }
.gd-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.gd-ring b, .gd-ring small { position: relative; } .gd-ring b { font-size: 38px; line-height: 1; color: var(--gd-ink); font-family: 'GD Head', sans-serif !important; } .gd-ring small { font-size: 11px; color: var(--gd-mu); }
.gd-bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; height: 110px; }
.gd-bars span { white-space: nowrap; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: 11px; color: var(--gd-mu); gap: 6px; }
.gd-bars i { width: 26px; height: var(--h); max-height: 78px; background: linear-gradient(180deg, #34c97a, #1fb865); border-radius: 4px 4px 0 0; }
.gd-why-c { position: relative; display: flex; align-items: flex-start; gap: 16px; background: var(--gd-bg); border-radius: var(--gd-r); padding: 24px 22px; overflow: hidden; }
.gd-why-c h3 { font-size: 17px; color: var(--gd-ink); margin: 2px 0 6px; font-weight: 700; } .gd-why-c p { font-size: 13.5px; line-height: 1.6; margin: 0; color: var(--gd-tx); }
.gd-wi { width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--gd-p); font-size: 44px; flex: none; }
.gd-why-dev { flex-wrap: wrap; padding-bottom: 0; }
.gd-why-dev .gd-dev { width: 100%; height: 88px; margin-top: 8px; }
.gd-dev { position: relative; }
.gd-lap { position: absolute; left: 50%; bottom: 0; transform: translateX(-60%); width: 150px; }
.gd-lap-scr { border: 5px solid #1d2336; border-bottom-width: 6px; border-radius: 6px 6px 0 0; height: 80px; overflow: hidden; background: #fff; }
.gd-lap-scr img, .gd-phone-scr img { width: 100%; display: block; }
.gd-lap-base { display: block; height: 6px; margin: 0 -16px; background: #c7ccd6; border-radius: 0 0 6px 6px; }
.gd-phone { position: absolute; left: 50%; bottom: 0; transform: translateX(80%); width: 42px; height: 78px; border: 4px solid #1d2336; border-radius: 8px; overflow: hidden; background: #fff; }
.gd-dev-badge { position: absolute; z-index: 3; }

/* ---------- COMBO ---------- */
.section.gd-combo { background: #fff; padding: 22px 0 18px !important; }
.gd-combos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.gd-cb { position: relative; border: 1px solid var(--gd-bd); border-radius: var(--gd-r); padding: 22px 32px 24px; background: #fff; display: flex; flex-direction: column; }
.gd-cb-hot { border: 2px solid #6ea5f5; box-shadow: 0 16px 36px rgba(1,96,231,.12); }
.gd-cbtag { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); background: var(--gd-p); color: #fff; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 4px 12px; white-space: nowrap; }
.gd-cbh { display: flex; align-items: center; gap: 16px; }
.gd-cbh h3 { font-size: 20px; margin: 0 0 3px; color: var(--gd-ink); font-weight: 700; } .gd-cbh p { margin: 0; font-size: 13px; color: var(--gd-tx); }
.gd-cbi { width: 64px; height: 64px; border-radius: 50%; background: #e3eeff; color: var(--gd-p); font-size: 30px; display: flex; align-items: center; justify-content: center; flex: none; }
.gd-cbi.gd-or { background: #ffeae3; color: var(--gd-or); }
.gd-cbp { display: block; font-size: 30px; color: var(--gd-p); font-weight: 800; margin: 14px 0 12px 80px; font-family: 'GD Head', sans-serif !important; }
.gd-cb ul { list-style: none; margin: 0 0 20px 40px; padding: 0; } .gd-cb li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #3e4a63; margin: 0 0 7px; }
.gd-cb li .gd-ic { color: var(--gd-p); font-size: 17px; stroke-width: 3; }
.gd-cb .gd-btn { margin-top: auto; width: 100%; height: 44px; font-size: 15.5px; }

/* ---------- DỊCH VỤ ---------- */
.section.gd-svc { background: #fff; padding: 26px 0 18px !important; }
.gd-svcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.gd-sv { display: flex; gap: 16px; border: 1px solid var(--gd-bd); border-radius: var(--gd-r); padding: 22px 18px 20px; background: #fff; transition: .2s; }
.gd-sv:hover { border-color: #9cc0f6; box-shadow: 0 12px 28px rgba(11,31,77,.08); }
.gd-svi { width: 58px; height: 58px; border-radius: 50%; background: #eaf2fe; color: var(--gd-p); font-size: 30px; display: flex; align-items: center; justify-content: center; flex: none; }
.gd-sv h3 { font-size: 16px; color: var(--gd-ink); margin: 4px 0 8px; line-height: 1.35; font-weight: 700; } .gd-sv p { font-size: 13px; line-height: 1.55; color: var(--gd-tx); margin: 0 0 12px; }
.gd-svp { display: block; font-size: 14px; color: var(--gd-tx); margin-bottom: 10px; } .gd-svp b { color: var(--gd-p); }

/* ---------- 4 BƯỚC ---------- */
.section.gd-steps-sec { background: #fff; padding: 20px 0 26px !important; }
.gd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.gd-step { position: relative; display: flex; align-items: flex-start; gap: 20px; }
.gd-step > b { width: 62px; height: 62px; border-radius: 50%; background: var(--gd-p); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; flex: none; font-family: 'GD Head', sans-serif !important; box-shadow: 0 8px 20px rgba(1,96,231,.25); }
.gd-step h3 { font-size: 16.5px; color: var(--gd-ink); margin: 6px 0 6px; font-weight: 700; } .gd-step p { font-size: 13.5px; line-height: 1.55; margin: 0; color: var(--gd-tx); max-width: 170px; }
.gd-step:not(:last-child)::after { content: ''; position: absolute; right: -24px; top: 30px; width: 44px; border-top: 2px dashed #9cc0f6; }

/* ---------- KHÁCH HÀNG ---------- */
.section.gd-testi { background: #fff; padding: 26px 0 12px !important; }
.gd-arrows { display: flex; gap: 10px; } .gd-arrows button { width: 44px; height: 40px; min-height: 0; margin: 0; padding: 0; border-radius: 10px; border: 1px solid var(--gd-bd); background: #fff; color: var(--gd-p); font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(11,31,77,.06); }
.gd-testi-in { display: grid; grid-template-columns: 252px 1fr; gap: 26px; }
.gd-rate { background: var(--gd-p); border-radius: 14px; color: #fff; text-align: center; padding: 22px 16px; display: flex; flex-direction: column; justify-content: center; }
.gd-rate b { font-size: 44px; line-height: 1; font-family: 'GD Head', sans-serif !important; } .gd-rate p { color: #e6efff; font-size: 14px; margin: 6px 0 0; }
.gd-stars { color: #ffb400; letter-spacing: 3px; font-size: 16px; }
.gd-rate .gd-stars { font-size: 20px; margin-top: 8px; }
.gd-tq { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 52px) / 3); gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gd-tq::-webkit-scrollbar { display: none; }
.gd-t { scroll-snap-align: start; display: flex; gap: 16px; border: 1px solid var(--gd-bd); border-radius: 14px; padding: 18px 18px 16px; background: #fff; box-shadow: 0 6px 18px rgba(11,31,77,.05); }
.gd-t p { font-size: 13.5px; line-height: 1.6; color: #3e4a63; margin: 6px 0 10px; } .gd-t b { display: block; font-size: 13.5px; color: var(--gd-ink); } .gd-t small { font-size: 12.5px; color: var(--gd-mu); }
.gd-av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.gd-ph-empty { display: block; background: linear-gradient(135deg, #e7eefb, #d5e2f8); }

/* ---------- HỎI ĐÁP ---------- */
.section.gd-faqsec { background: #fff; padding: 18px 0 34px !important; }
.gd-faq2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.gd-faq details { border: 1px solid var(--gd-bd); border-radius: 10px; margin: 0 0 12px; background: #fff; }
.gd-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 22px 13px 24px; font-size: 15px; font-weight: 600; color: var(--gd-ink); }
.gd-faq summary::-webkit-details-marker { display: none; }
.gd-faq summary .gd-ic { font-size: 18px; color: var(--gd-tx); transition: .2s; }
.gd-faq details[open] { background: #f2f7ff; border-color: #d6e5fd; }
.gd-faq details[open] summary { color: var(--gd-p); } .gd-faq details[open] summary .gd-ic { transform: rotate(180deg); color: var(--gd-p); }
.gd-faq details > p, .gd-faq details > div { margin: -4px 24px 14px; font-size: 13.5px; line-height: 1.65; color: var(--gd-tx); }

/* ---------- CTA + FOOTER ---------- */
.gd-cta { background: #0f2a66 radial-gradient(circle at 92% 20%, rgba(1,96,231,.45), transparent 32%), radial-gradient(circle at 3% 110%, rgba(1,96,231,.4), transparent 26%); background-color: #0d2459; color: #fff; }
.gd-cta-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; min-height: 178px; padding-top: 24px; padding-bottom: 24px; }
.gd-cta h2 { color: #fff; font-size: 34px; line-height: 1.3; margin: 0; padding-left: 60px; font-weight: 700; } .gd-cta h2 span { display: block; font-size: 29px; font-weight: 600; }
.gd-cta p { color: #d6e2fb; font-size: 15px; line-height: 1.6; margin: 0 0 16px; max-width: 560px; }
.gd-cta-b { display: flex; gap: 14px; flex-wrap: wrap; } .gd-cta-b .gd-btn { height: 54px; padding: 0 34px; font-size: 16px; }
.section.gd-footer, #footer .section.gd-footer { background: #0b1d49; padding: 42px 0 0 !important; border-top: 0 !important; }
.gd-ft { display: grid; grid-template-columns: 1.35fr 1fr 1.05fr .95fr 1.15fr; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12); }
.gd-ft-brand { padding-right: 20px; border-right: 1px solid rgba(255,255,255,.12); }
.gd-flogo { display: inline-flex; align-items: center; gap: 2px; font-family: 'GD Head', sans-serif !important; font-size: 29px; font-weight: 700; color: #fff !important; margin-bottom: 14px; letter-spacing: -.01em; }
.gd-flogo b { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 36px; border-radius: 4px; background: linear-gradient(135deg, #0160e7 58%, #fe4c1c 58%); color: #fff; font-size: 30px; font-weight: 800; }
.gd-ft-brand p { font-size: 13.5px; line-height: 1.6; color: #c3cfe8; margin: 0 0 8px; } .gd-ft-brand small { font-size: 12.5px; color: #93a4c8; }
.gd-soc { display: flex; gap: 12px; margin-top: 16px; } .gd-soc a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 19px; } .gd-soc a:hover { background: var(--gd-p); }
.gd-ft-col h4 { color: #fff; font-size: 15px; font-weight: 700; margin: 4px 0 14px; }
.gd-ft-col ul { list-style: none; margin: 0; padding: 0; } .gd-ft-col li { margin: 0 0 9px; font-size: 13.5px; color: #c3cfe8; line-height: 1.5; }
#footer .gd-ft-col a, #footer .gd-ft-col li, #footer .gd-ft-col span { color: #c3cfe8 !important; font-size: 13.5px !important; font-weight: 400; line-height: 1.5; } .gd-ft-col a:hover { color: #fff !important; }
.gd-ft-2 { columns: 2; column-gap: 14px; }
.gd-ft-ct li { display: flex; gap: 12px; align-items: flex-start; } .gd-ft-ct .gd-ic { font-size: 18px; color: #fff; margin-top: 2px; }
.gd-ft-bot { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0 22px; font-size: 13px; color: #a9b7d6; }
.gd-ft-bot a { color: #c3cfe8 !important; } .gd-ft-bot i { font-style: normal; margin: 0 14px; opacity: .5; }
.footer-wrapper .absolute-footer, #footer .absolute-footer { display: none !important; }
#footer, .footer-wrapper { border: 0 !important; background: #0b1d49; }
.gd-cta + * { margin-top: 0; }


/* ruler:manual (10-01) — đo BỀ RỘNG dòng tiêu đề so mockup (LESSONS 127): h2 trang chủ nhỏ ~7%, thẻ dịch vụ/lý do ~10% */
@media (min-width: 850px) {
  .gd-sec .gd-h2 { font-size: 32px; }
  .gd-sv h3 { font-size: 17.5px; } .gd-why-c h3 { font-size: 18px; }
}
/* /ruler:manual */

/* ---------- mid-fix ---------- */
/* mid-fix */
@media (min-width: 850px) and (max-width: 1399px) {
  .gd-hero-in { grid-template-columns: 55% 1fr; }
  .gd-hero h1 { font-size: 36px; }
  .gd-collage { transform: scale(.82); transform-origin: left center; }
  .gd-pills { margin-left: 30px; }
  #header .gd-hsearch { width: 200px; }
  #logo { margin-right: 14px; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  .gd-hero-in { grid-template-columns: 1fr; } .gd-hero-r { display: none; }
  .gd-trust-in { flex-wrap: wrap; justify-content: flex-start; padding: 14px 0; } .gd-stat { border: 0; padding: 8px 18px 8px 0; } .gd-pay { width: 100%; padding: 8px 0; }
  .gd-cats, .gd-grid, .gd-svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-why-grid { grid-template-columns: 1fr 1fr; } .gd-why-big { grid-row: auto; grid-column: span 2; }
  .gd-combos { gap: 18px; } .gd-cb { padding: 20px; } .gd-cbp { margin-left: 0; } .gd-cb ul { margin-left: 0; }
  .gd-steps { grid-template-columns: 1fr 1fr; } .gd-step::after { display: none; }
  .gd-testi-in { grid-template-columns: 1fr; } .gd-tq { grid-auto-columns: calc((100% - 26px) / 2); }
  .gd-ft { grid-template-columns: 1fr 1fr 1fr; } .gd-ft-brand { border: 0; grid-column: span 3; }
  .gd-cta-in { grid-template-columns: 1fr; } .gd-cta h2 { padding-left: 0; }
  #header .header-button-1 { display: none !important; }
  #header .header-nav-main > li { margin: 0 8px; }
}
@media (min-width: 850px) and (max-width: 1199px) { html body #header .header-main .flex-right li.html { display: list-item !important; } #header .gd-hsearch { display: none; } }
/* /mid-fix */

/* ---------- MOBILE ---------- */
@media (max-width: 849px) {
  .gd-h2 { font-size: 24px; } .gd-sub { font-size: 14px; margin-bottom: 16px; }
  .gd-head { flex-wrap: wrap; align-items: flex-start; } .gd-head-tabs .gd-pills { order: 3; width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap; } .gd-pills a { white-space: nowrap; }
  .gd-hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 22px 0 28px; } .gd-hero-in > * { min-width: 0; }
  .gd-hero h1 { font-size: 29px; } .gd-lead { font-size: 15px; } .gd-lead br { display: none; }
  .gd-hero-r { order: -1; height: 215px; overflow: hidden; margin: 0 -15px 6px; } .gd-collage { height: 390px; margin: 0; transform: scale(.54); transform-origin: left top; width: 660px; margin-left: 8px; }
  .gd-float { display: none; }
  .gd-bigsearch { flex-wrap: wrap; height: auto; background: transparent; box-shadow: none; gap: 8px; }
  .gd-bigsearch input[type=search] { flex: 1 1 100%; background: #fff; border-radius: 10px; height: 50px; box-shadow: 0 6px 18px rgba(11,31,77,.07); }
  .gd-sel { flex: 1; border: 0; background: #fff; border-radius: 10px; } .gd-sel select { height: 50px; }
  .gd-bigsearch button { width: 54px; height: 50px; margin: 0; }
  .gd-trust-in { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 18px 0; }
  .gd-stat { border: 0; padding: 0; } .gd-stat > .gd-ic { font-size: 30px; } .gd-stat b { font-size: 18px; }
  .gd-pay { grid-column: span 2; padding: 0; gap: 14px; flex-wrap: wrap; } .gd-pay span { font-size: 12.5px; }
  .section.gd-catsec, .section.gd-latest { padding: 30px 0 !important; }
  .gd-cats { grid-template-columns: 1fr 1fr; gap: 12px; } .gd-cat { flex-direction: column-reverse; align-items: stretch; padding: 8px; min-height: 0; } .gd-catimg { width: 100%; height: 86px; } .gd-catt b { font-size: 14.5px; }
  .gd-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .gd-cbody { padding: 10px 10px 12px; } .gd-cname { font-size: 15px; } .gd-cbtn { grid-template-columns: 1fr; gap: 6px; } .gd-cbtn .gd-btn { height: 36px; font-size: 13px; }
  .gd-why-grid { grid-template-columns: 1fr; } .gd-why-big { grid-row: auto; } .gd-why-big h3 { font-size: 22px; }
  .gd-score { gap: 16px; padding: 16px; } .gd-ring { width: 92px; height: 92px; } .gd-ring b { font-size: 28px; } .gd-bars i { width: 16px; }
  .gd-combos, .gd-svcs, .gd-steps { grid-template-columns: 1fr; gap: 18px; } .gd-cb { padding: 22px 20px; } .gd-cbp { margin-left: 0; } .gd-cb ul { margin-left: 0; }
  .gd-step::after { display: none !important; } .gd-step p { max-width: none; }
  .gd-testi-in { grid-template-columns: 1fr; } .gd-tq { grid-auto-columns: 88%; gap: 14px; }
  .gd-faq2 { grid-template-columns: 1fr; } .gd-faq summary { padding: 12px 16px; font-size: 14.5px; } .gd-faq details > p, .gd-faq details > div { margin: -4px 16px 14px; }
  .gd-cta-in { grid-template-columns: 1fr; gap: 16px; padding-top: 30px; padding-bottom: 30px; } .gd-cta h2 { padding: 0; font-size: 26px; } .gd-cta h2 span { font-size: 21px; } .gd-cta-b .gd-btn { height: 48px; padding: 0 20px; flex: 1; }
  .gd-ft { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .gd-ft-brand { grid-column: span 2; border: 0; padding: 0; } .gd-ft-col:first-of-type { grid-column: span 2; } .gd-ft-ct { grid-column: span 2; }
  .gd-ft-bot { flex-direction: column; } .gd-ft-bot i { margin: 0 8px; }
  #logo img { max-height: 30px !important; }
  .gd-why-grid, .gd-combos, .gd-svcs, .gd-steps, .gd-faq2, .gd-testi-in { grid-template-columns: minmax(0, 1fr) !important; } .gd-why-grid > *, .gd-combos > *, .gd-svcs > * { min-width: 0; }
  .gd-bars { gap: 6px; } .gd-bars span { font-size: 9.5px; }
}
/* _midwidth: header Flatsome ở 850-1399px (laptop nhỏ/tablet ngang) — menu dựng theo mockup 1440 tràn phải; dùng chung mọi site */
@media (min-width: 850px) and (max-width: 1399px) {
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 6px !important; margin-right: 6px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 14px !important; }
  #header .header-search-form { max-width: 300px !important; width: 300px !important; margin-left: 20px !important; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  #logo { width: auto !important; max-width: 210px !important; } #logo a { font-size: 21px !important; }
  #header .header-main .flex-right .header-button-1, #header .header-main .flex-right li.html, #header .header-search-form, #top-bar .flex-right { display: none !important; }
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 3px !important; margin-right: 3px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 13px !important; }
  #header .flex-col { min-width: 0; } #header .header-inner, #header .header-bottom .container { overflow: hidden; }
}
.col-inner a[href^="mailto"], .col-inner a[href^="tel"] { overflow-wrap: anywhere; }

/* ===== 10-01 sửa theo phản hồi người dùng ===== */
/* (1) header dính khi cuộn: giữ 1 dòng, logo nhỏ như header thường */
.header-wrapper.stuck #logo img, .stuck #logo img, #header.has-sticky .stuck #logo img { max-height: 34px !important; width: auto !important; }
.stuck #logo { width: auto !important; }
#header .header-nav-main { flex-wrap: nowrap !important; }
#header .header-main .flex-col { min-width: 0; }
.stuck .header-main { height: 66px !important; }
.stuck .header-main .header-inner { min-height: 0 !important; }
@media (min-width: 1025px) and (max-width: 1280px) { #header .gd-hsearch { width: 190px; } #header .header-nav-main > li { margin: 0 8px; } #logo { margin-right: 18px; } }
@media (min-width: 850px) and (max-width: 1100px) { #header .header-nav-main > li { margin: 0 6px; } #header .header-nav-main > li > a { font-size: 13.5px !important; } }

/* (2) MEGA MENU */
#header .gd-mm > .nav-dropdown { padding: 14px !important; border-radius: 14px !important; border: 1px solid #e3eaf5 !important; box-shadow: 0 22px 50px rgba(11,31,77,.14) !important; background: #fff !important; }
#header .gd-mm > .nav-dropdown li { margin: 0 !important; border: 0 !important; padding: 0 !important; }
#header .gd-mm > .nav-dropdown li > a { display: flex !important; align-items: center !important; gap: 12px !important; padding: 9px 12px !important; border-radius: 10px !important; font-size: 14px !important; line-height: 1.3 !important; white-space: nowrap !important; color: var(--gd-ink) !important; background: none !important; border: 0 !important; margin: 0 !important; }
#header .gd-mm > .nav-dropdown li > a::before, #header .gd-mm > .nav-dropdown li > a::after { content: none !important; display: none !important; }
#header .gd-mm > .nav-dropdown li > a:hover, #header .gd-mm > .nav-dropdown li.current-menu-item > a { background: #f2f7ff !important; }
#header .gd-mm > .nav-dropdown li > a:hover .gd-mm-t b { color: var(--gd-p); }
.gd-mm-i { width: 38px; height: 38px; border-radius: 10px; background: #eef4fe; color: var(--gd-p); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 20px; transition: .2s; }
#header .gd-mm > .nav-dropdown li > a:hover .gd-mm-i { background: var(--gd-p); color: #fff; }
.gd-mm-t { display: flex; flex-direction: column; min-width: 0; } .gd-mm-t b { font-size: 14px; font-weight: 600; color: var(--gd-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } .gd-mm-t small { font-size: 12px; color: var(--gd-mu); font-weight: 400; line-height: 1.35; }
@media (min-width: 850px) {
  #header .gd-mm-kho > .nav-dropdown { display: grid !important; grid-template-columns: repeat(3, 214px) 236px; grid-auto-rows: auto; column-gap: 4px; row-gap: 2px; width: max-content !important; min-width: 0 !important; left: -20px; }
  #header .gd-mm-kho > .nav-dropdown > li.gd-mm-all { grid-column: 1 / 4; margin-bottom: 6px !important; padding-bottom: 8px !important; border-bottom: 1px solid #edf1f7 !important; }
  #header .gd-mm-kho > .nav-dropdown > li.gd-mm-all > a { background: #f2f7ff !important; } #header .gd-mm-kho li.gd-mm-all .gd-mm-i { background: var(--gd-p); color: #fff; } #header .gd-mm-kho li.gd-mm-all .gd-mm-t b { color: var(--gd-p); font-size: 15px; }
  #header .gd-mm-kho > .nav-dropdown > li.gd-mm-cta { grid-column: 4; grid-row: 1 / span 6; margin-left: 10px !important; }
  #header .gd-mm-kho > .nav-dropdown > li.gd-mm-cta > a { height: 100%; align-items: flex-start !important; white-space: normal !important; background: linear-gradient(160deg, #0d2459, #0a3c9c) !important; color: #fff !important; padding: 20px 18px !important; border-radius: 12px !important; }
  #header .gd-mm-svc > .nav-dropdown { width: 360px !important; min-width: 0 !important; }
}
.gd-mm-ctab { display: flex; flex-direction: column; gap: 8px; } .gd-mm-ctab b { font-size: 17px; line-height: 1.3; color: #fff; font-family: 'GD Head', sans-serif !important; } .gd-mm-ctab small { font-size: 13px; line-height: 1.5; color: #c9d6f2; }
.gd-mm-ctab em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; background: #fff; color: var(--gd-p); font-weight: 600; font-size: 13.5px; border-radius: 8px; padding: 8px 14px; width: fit-content; }
/* mobile: menu Flatsome chuẩn, icon SVG nhỏ, ẩn thẻ CTA */
.off-canvas .gd-mm-cta, .mobile-sidebar .gd-mm-cta, .nav-sidebar .gd-mm-cta { display: none !important; }
.nav-sidebar .gd-mm-i, .off-canvas .gd-mm-i { width: 28px; height: 28px; font-size: 16px; border-radius: 8px; margin-right: 10px; }
.nav-sidebar .sub-menu li a, .off-canvas .sub-menu li a { display: flex !important; align-items: center; }
.nav-sidebar .sub-menu li a::before, .off-canvas .sub-menu li a::before { content: none !important; }
.nav-sidebar .gd-mm-t small, .off-canvas .gd-mm-t small { font-size: 11.5px; }

/* (3) lưới ngành trang chủ: thẻ cao đều, chữ không tràn, "76 mẫu", hover viền xanh */
.gd-cats { grid-auto-rows: 1fr; }
.gd-cat { min-height: 92px; padding: 10px 10px 10px 18px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.gd-cat:hover { border-color: var(--gd-p); box-shadow: 0 12px 26px rgba(1,96,231,.12); transform: translateY(-2px); }
.gd-catt b { white-space: normal !important; font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gd-catt small { display: block; margin-top: 4px; font-size: 13px; color: var(--gd-mu); }
.gd-cat:hover .gd-catt b { color: var(--gd-p); }
.gd-catimg { width: 108px; height: 72px; }

/* (4) thông báo WooCommerce */
.woocommerce-message.message-wrapper, .woocommerce-info.message-wrapper, .woocommerce-error.message-wrapper, .woocommerce-notices-wrapper > .woocommerce-message, .woocommerce-notices-wrapper > .woocommerce-info, .woocommerce-notices-wrapper > .woocommerce-error { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 0 18px !important; box-shadow: none !important; list-style: none !important; }
.message-wrapper .message-container, ul.woocommerce-error > li { position: relative; display: flex !important; align-items: center; gap: 14px; flex-wrap: wrap; max-width: none !important; width: 100% !important; margin: 0 !important; padding: 14px 16px 14px 62px !important; border-radius: 12px; font-size: 15px !important; font-weight: 500; line-height: 1.5; text-align: left !important; border: 1px solid; }
.woocommerce-message .message-container { background: #ecfaf2; border-color: #bfe9d1; color: #135c37 !important; }
.woocommerce-info .message-container, .woocommerce-info.message-wrapper:not(:has(.message-container)) { background: #eef4fe; border-color: #cbdcfb; color: #133a7c !important; }
ul.woocommerce-error > li, .woocommerce-error .message-container { background: #fdeeee; border-color: #f6c9c9; color: #8a1f1f !important; }
ul.woocommerce-error > li .message-container { background: none; border: 0; padding: 0 !important; color: inherit !important; }
.message-wrapper .message-container > i, .message-wrapper .message-container > .message-icon, ul.woocommerce-error > li .message-icon { display: none !important; }
.message-wrapper .message-container::before, ul.woocommerce-error > li::before { content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: #1fb865 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat; }
.woocommerce-info .message-container::before { background: var(--gd-p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E") center/16px no-repeat; }
ul.woocommerce-error > li::before, .woocommerce-error .message-container::before { background: #e5484d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/16px no-repeat; }
ul.woocommerce-error > li .message-container::before { display: none; }
.message-container .gd-ntxt { flex: 1 1 260px; }
.message-container a:not(.button) { color: inherit !important; text-decoration: underline; font-weight: 600; }
.message-container .button, .message-container .wc-forward { order: 2; margin: 0 !important; height: 38px; min-height: 0; line-height: 36px; padding: 0 16px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; background: var(--gd-p) !important; color: #fff !important; border: 1px solid var(--gd-p) !important; box-shadow: none !important; float: none !important; }
.message-container .button.gd-nb-o { background: #fff !important; color: var(--gd-p) !important; }
.message-container .added-to-cart { display: none; }
@media (max-width: 849px) { .message-wrapper .message-container, ul.woocommerce-error > li { flex-direction: column; align-items: flex-start; padding: 14px 14px 14px 56px !important; } .message-wrapper .message-container::before, ul.woocommerce-error > li::before { top: 22px; transform: none; } .message-container .button { width: 100%; text-align: center; } }
.gd-float { width: max-content; max-width: 320px; } .gd-float b { white-space: nowrap; }
@media (max-width: 849px) { .gd-catimg { width: 100% !important; height: 86px !important; } .gd-cat { min-height: 0; padding: 8px; } }
.message-wrapper:focus, .message-wrapper:focus-visible, .woocommerce-error:focus, .woocommerce-message:focus, .woocommerce-info:focus { outline: none !important; box-shadow: none !important; }
html body .message-container a.button.wc-forward, html body .message-container a.button { display: inline-flex !important; align-items: center; justify-content: center; }
@media (max-width: 849px) { .message-container .gd-ntxt { flex: 0 0 auto !important; width: 100%; } }