/* Lớp trang trí theo nhận diện Happy Walkies (Bài 3): nền kem, dải màu bo cong lớn, ảnh khung blob viền trắng,
   nhãn vàng dạng viên thuốc, số tròn vàng, nét vẽ tay (tia sáng, vòng tròn nét đứt, bong bóng tim), dấu chân chó. */
:root{
  --cream2:#FBF6EE;
  --blob1:58% 42% 55% 45% / 52% 58% 42% 48%;
  --blob2:42% 58% 45% 55% / 60% 44% 56% 40%;
  --blob3:50% 50% 62% 38% / 44% 56% 44% 56%;
  --paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='.22' transform='rotate(-20 40 40)'%3E%3Cellipse cx='40' cy='48' rx='10' ry='8.5'/%3E%3Cellipse cx='28' cy='37' rx='4.2' ry='5.4'/%3E%3Cellipse cx='36' cy='29' rx='4.2' ry='5.4'/%3E%3Cellipse cx='45' cy='29' rx='4.2' ry='5.4'/%3E%3Cellipse cx='53' cy='37' rx='4.2' ry='5.4'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.16' transform='rotate(15 90 90)'%3E%3Cellipse cx='92' cy='98' rx='8' ry='7'/%3E%3Cellipse cx='82' cy='89' rx='3.4' ry='4.4'/%3E%3Cellipse cx='89' cy='83' rx='3.4' ry='4.4'/%3E%3Cellipse cx='96' cy='83' rx='3.4' ry='4.4'/%3E%3Cellipse cx='103' cy='89' rx='3.4' ry='4.4'/%3E%3C/g%3E%3C/svg%3E");
  --sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23FFFFFF' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M30 6v12M48 14l-8 9M54 32H42'/%3E%3C/svg%3E");
  --sparkle-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%23FBC13A' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M30 6v12M48 14l-8 9M54 32H42'/%3E%3C/svg%3E");
  --dashed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-dasharray='8 8' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='44'/%3E%3C/svg%3E");
  --heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 6C20 6 6 18 6 34c0 10 6 19 15 24l-3 14 14-9c3 .6 5 .8 8 .8 20 0 34-12 34-29S60 6 40 6z' fill='%23fff' stroke='%23233F5B' stroke-width='4'/%3E%3Cpath d='M40 48s-12-7-12-15a6.5 6.5 0 0 1 12-3.5A6.5 6.5 0 0 1 52 33c0 8-12 15-12 15z' fill='%23233F5B'/%3E%3C/svg%3E");
  --trail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='60' viewBox='0 0 260 60' fill='none'%3E%3Cpath d='M4 50 C 60 10, 120 60, 180 25 S 250 20, 256 8' stroke='%23C3E3F5' stroke-width='4' stroke-dasharray='10 10' stroke-linecap='round'/%3E%3C/svg%3E");
}
body{background:var(--cream2)}
section{position:relative}

/* nhãn vàng dạng viên thuốc (như “Walk your pet better”) */
.eyebrow{display:inline-block;background:var(--yellow);color:var(--navy);border-radius:999px;padding:4px 16px;font-size:14px;letter-spacing:.06em;margin-bottom:12px}
.contact .eyebrow{background:var(--yellow) !important;color:var(--navy) !important}
h2{color:var(--navy)}
h2::after{content:"";display:inline-block;width:34px;height:34px;margin-left:6px;vertical-align:top;background:var(--sparkle-navy) center/contain no-repeat;transform:translateY(-10px)}
.contact h2::after{background-image:var(--sparkle)}

/* dải màu bo cong lớn, nổi trên nền kem */
.bg-cream,.bg-mist,.bg-white,.contact{margin:0 auto 18px;max-width:1280px;width:calc(100% - 24px);border-radius:44px;overflow:hidden}
.bg-cream{background:var(--cream)}
.bg-mist{background:var(--sky)}
.bg-mist .sub{color:var(--navy)}
.bg-white{background:var(--white)}
.bg-mist::before,.contact::before{content:"";position:absolute;inset:0;background:var(--paw) 0 0/180px 180px;pointer-events:none}
.bg-mist > .wrap,.contact > .wrap{position:relative}
.contact{background:var(--navy)}
.contact::after{content:"";position:absolute;right:-30px;bottom:-24px;width:260px;height:180px;background:url(/img/mark-sky.png) center/contain no-repeat;opacity:.18;pointer-events:none}

/* thanh menu */
.top{background:var(--sky)}
.menu a{color:var(--navy)}
.menu a[aria-current="page"]{background:var(--white);color:var(--navy);box-shadow:0 3px 0 var(--yellow)}

/* trang chủ: phần đầu có dấu chân, vòng tròn nét đứt, tia sáng, bong bóng tim */
.hero{border-radius:0 0 56px 56px;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:var(--paw) 0 0/200px 200px;pointer-events:none}
.hero .wrap{position:relative}
.hero h1{position:relative}
.hero h1::after{content:"";position:absolute;width:46px;height:46px;margin-left:4px;background:var(--sparkle) center/contain no-repeat;transform:translateY(-14px)}
.hero-photo::before{background:var(--white);opacity:.35;border-radius:var(--blob1);inset:6% -8% -6% -8%}
.hero-photo::after{content:"";position:absolute;right:2%;top:6%;width:70px;height:70px;background:var(--heart) center/contain no-repeat;animation:bob 3s ease-in-out infinite}
.hero-text::before{content:"";position:absolute;right:42%;top:18px;width:90px;height:90px;background:var(--dashed) center/contain no-repeat;opacity:.8}
@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}
.tag{box-shadow:0 3px 0 rgba(35,63,91,.15)}
.facts span{background:rgba(255,255,255,.55);border-radius:999px;padding:4px 12px}

/* đầu các trang con */
.page-head{position:relative;border-radius:0 0 48px 48px;overflow:hidden;margin-bottom:18px}
.page-head::before{content:"";position:absolute;inset:0;background:var(--paw) 0 0/200px 200px;pointer-events:none}
.page-head::after{content:"";position:absolute;right:4%;bottom:-18px;width:min(260px,40vw);height:180px;background:url(/img/mark-white.png) center/contain no-repeat;opacity:.55;pointer-events:none}
.page-head .wrap{position:relative}

/* số liệu: thẻ xanh có biểu tượng (như proposal) */
.stat{position:relative;border-radius:28px;padding:26px 14px 22px;box-shadow:0 6px 0 rgba(35,63,91,.12)}
.stat b{color:var(--navy)}
.stat::after{content:"";display:block;width:44px;height:44px;margin:10px auto 0;background:center/contain no-repeat}
.stat:nth-child(1)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='9' width='36' height='32' rx='5'/%3E%3Cpath d='M6 18h36M15 5v8M33 5v8'/%3E%3Cpath d='M17 30l5 5 9-9'/%3E%3C/svg%3E")}
.stat:nth-child(2)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23fff' stroke-width='3.5'%3E%3Cellipse cx='32' cy='42' rx='13' ry='11'/%3E%3Cellipse cx='16' cy='28' rx='5.5' ry='7'/%3E%3Cellipse cx='26' cy='18' rx='5.5' ry='7'/%3E%3Cellipse cx='38' cy='18' rx='5.5' ry='7'/%3E%3Cellipse cx='48' cy='28' rx='5.5' ry='7'/%3E%3C/svg%3E")}
.stat:nth-child(3)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 4l5 4 6-1 2 6 5 4-2 6 2 6-5 4-2 6-6-1-5 4-5-4-6 1-2-6-5-4 2-6-2-6 5-4 2-6 6 1z'/%3E%3Cpath d='M17 24l5 5 9-10'/%3E%3C/svg%3E")}

/* vòng tròn dịch vụ → khung blob viền trắng, nghiêng nhẹ như sticker */
.svc-circle .ring{background:var(--white);padding:7px;border-radius:var(--blob1);box-shadow:0 8px 20px rgba(35,63,91,.14)}
.svc-circle:nth-child(2) .ring{border-radius:var(--blob2)}
.svc-circle:nth-child(3) .ring{border-radius:var(--blob3)}
.svc-circle img,.svc-circle .ico{border-radius:inherit}
.svc-circle:hover .ring{background:var(--yellow);transform:rotate(-3deg) scale(1.04)}
.fromtag{background:var(--yellow)}

/* thẻ dịch vụ (trang Dịch vụ) */
.svc-card{border:0;box-shadow:0 8px 24px rgba(35,63,91,.08);border-radius:34px;position:relative;overflow:hidden}
.svc-card::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:var(--mist)}
.svc-card > *{position:relative;z-index:1}
.svc-card img,.svc-card .ico{border-radius:var(--blob1);border:6px solid var(--white);box-shadow:0 6px 16px rgba(35,63,91,.15)}
.svc-card:nth-child(even) img{border-radius:var(--blob2)}
.svc-card .go{color:var(--navy);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:4px}

/* trang chi tiết dịch vụ */
.svc-hero{border-radius:0 0 56px 56px;position:relative;overflow:hidden}
.svc-hero::before{content:"";position:absolute;inset:0;background:var(--paw) 0 0/200px 200px;pointer-events:none}
.svc-hero .wrap{position:relative}
.svc-hero .circle{border-radius:var(--blob1);box-shadow:0 12px 30px rgba(35,63,91,.2)}
.price-from{box-shadow:0 4px 0 var(--yellow)}
.gallery img{border:6px solid var(--white);box-shadow:0 6px 18px rgba(35,63,91,.12);border-radius:var(--blob3)}
.gallery img:nth-child(2){border-radius:var(--blob1);transform:rotate(1.5deg)}
.gallery img:nth-child(3){border-radius:var(--blob2);transform:rotate(-1.5deg)}
.dbox{border:0;border-radius:32px;box-shadow:0 8px 24px rgba(35,63,91,.07);position:relative}
.dbox h2{display:inline-block;background:var(--mist);border-radius:999px;padding:4px 16px;font-size:20px}
.dbox h2::after{display:none}
.dbox:nth-child(2) h2{background:#FFF1CC}
.dbox:nth-child(3) h2{background:var(--pale)}
.detail-grid{counter-reset:box}

/* lời khen: dấu ngoặc lớn, ảnh bé tròn */
.review{border:0;border-radius:30px;box-shadow:0 8px 22px rgba(35,63,91,.1);position:relative;padding-top:30px}
.review::before{content:"“";position:absolute;right:20px;top:-6px;font-family:var(--display);font-size:96px;line-height:1;color:var(--sky)}
.review .who{display:flex;align-items:center;gap:10px}
.review .av{width:44px;height:44px;border-radius:var(--blob1);object-fit:cover;border:3px solid var(--sky);flex:none}
.bg-mist .rv-head,.bg-mist .rv-links a{color:var(--navy)}
.rv-head .stars{text-shadow:0 1px 0 rgba(35,63,91,.25)}

/* ảnh tin nhắn: khung như màn hình điện thoại */
.feel{border:7px solid var(--navy);border-radius:30px;box-shadow:0 10px 26px rgba(35,63,91,.25)}
.feel:nth-child(odd){transform:rotate(-1.5deg)}
.feel:nth-child(even){transform:rotate(1.5deg)}
.hscroll{padding:10px 4px 18px}

/* các bé: ảnh khung blob, viền trắng, nghiêng nhẹ */
.client{text-align:center}
.client img{border-radius:var(--blob1);border:6px solid var(--white);box-shadow:0 8px 20px rgba(35,63,91,.12);transition:transform .2s}
.client:nth-child(3n+2) img{border-radius:var(--blob2)}
.client:nth-child(3n) img{border-radius:var(--blob3)}
.client:hover img{transform:rotate(-3deg) scale(1.03)}
.client small{display:inline-block;background:var(--mist);border-radius:999px;padding:2px 10px;margin-top:2px}

/* giống chó: khung vòm, viền màu luân phiên */
.breed img{box-shadow:0 8px 20px rgba(35,63,91,.15)}
.breed:nth-child(3n+1) img{border-color:var(--white)}
.breed:nth-child(3n+2) img{border-color:var(--yellow)}
.breed:nth-child(3n) img{border-color:var(--navy)}
.breed b{display:inline-block;background:var(--white);border-radius:999px;padding:3px 12px}

/* khu vực: vòng màu luân phiên như các “blob” thương hiệu */
.area .dot{border-radius:var(--blob1);box-shadow:0 8px 18px rgba(35,63,91,.12)}
.area:nth-child(2) .dot{background:var(--yellow);border-radius:var(--blob2)}
.area:nth-child(3) .dot{background:var(--pale);border-radius:var(--blob3)}
.area:nth-child(4) .dot{background:var(--navy);color:var(--white)}

/* vì sao chọn: số tròn vàng */
.why-grid{counter-reset:why}
.why-item{border:0;border-radius:28px;box-shadow:0 6px 18px rgba(35,63,91,.07);position:relative;padding-top:58px}
.why-item::before{counter-increment:why;content:counter(why);position:absolute;left:20px;top:14px;width:36px;height:36px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px}

/* giới thiệu & kinh nghiệm */
.intro-text p:first-child{font-size:20px;font-weight:600}
.exp li{background:var(--yellow);border:0}
.exp li:nth-child(even){background:var(--white)}

/* nút */
.btn{transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{box-shadow:0 4px 0 #142a40}
.msg-btns .btn{box-shadow:0 4px 0 #3c9ad6}
.more{background:var(--white);border-radius:999px;padding:8px 18px;text-decoration:none;box-shadow:0 3px 0 var(--yellow)}

/* chân trang: đường dấu chân nét đứt */
footer{background:var(--navy);position:relative;border-radius:44px 44px 0 0;margin-top:30px}
footer::before{content:"";position:absolute;left:24px;top:-40px;width:260px;height:60px;background:var(--trail) center/contain no-repeat}

@media (max-width:820px){
  .bg-cream,.bg-mist,.bg-white,.contact{width:calc(100% - 16px);border-radius:32px}
  .hero{border-radius:0 0 40px 40px}
  .hero-text::before{display:none}
  .hero-photo::after{width:54px;height:54px}
  .svc-hero .circle{border-radius:var(--blob1)}
  h2::after{width:26px;height:26px}
  .gallery img:nth-child(n){transform:none}
}

/* form “Nhận tư vấn miễn phí” */
.lead{max-width:820px;margin:0 auto;display:grid;gap:22px}
.lead fieldset{border:0;margin:0;padding:24px;background:var(--white);border-radius:30px;box-shadow:0 8px 24px rgba(35,63,91,.07);display:grid;gap:14px;min-width:0}
.lead legend{float:left;width:100%;display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:22px;margin-bottom:4px;padding:0}
html.en .lead legend{font-weight:600}
.lead legend .num{flex:none;width:36px;height:36px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:19px}
.lead label{display:grid;gap:6px;font-weight:700;font-size:14px}
.lead input:not([type=radio]):not([type=checkbox]),.lead select,.lead textarea{font:16px var(--body);color:var(--navy);background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:12px 14px;width:100%;min-height:48px}
.lead input:focus,.lead select:focus,.lead textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px rgba(110,197,255,.25)}
.lead .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead .q{font-weight:700;font-size:14px;margin-bottom:-6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex !important;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip > span{display:inline-block;border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 16px;font-weight:600;font-size:15px;transition:all .15s}
.chip:hover > span{border-color:var(--sky)}
.chip input:checked + span{background:var(--navy);border-color:var(--navy);color:var(--white)}
.chip input:focus-visible + span{outline:3px solid var(--sky);outline-offset:2px}
.lead .hint{margin:0;color:var(--muted);font-size:13px;font-weight:500}
.dog{border:2px dashed var(--pale);border-radius:22px;padding:16px;display:grid;gap:12px;background:var(--cream2)}
.dog + .dog{margin-top:12px}
.dog-head{display:flex;justify-content:space-between;align-items:center}
.dog-head b{font-family:var(--display);font-size:18px}
.dog-del{border:0;background:none;color:#C2412D;font:700 14px var(--body);cursor:pointer}
.add-dog{justify-self:start;min-height:44px;padding:9px 18px}
.check{display:flex !important;align-items:center;gap:10px;background:#FFF6DD;border:2px solid var(--yellow);border-radius:16px;padding:12px 14px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--navy);flex:none}
.trap{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-err{margin:0;color:#C2412D;font-weight:700}
.lead-err:empty{display:none}
.send{justify-self:center;font-size:18px;min-height:58px;padding:16px 40px}
.send:disabled{opacity:.6;cursor:wait}
.lead-done{max-width:620px;margin:0 auto;text-align:center;background:var(--white);border-radius:32px;padding:36px 24px;box-shadow:0 8px 24px rgba(35,63,91,.08)}
.lead-done .big{font-size:56px}
.lead-done h2::after{display:none}
.lead-done p{font-size:18px;margin:0 0 20px}
.btn.consult{background:var(--yellow);color:var(--navy);font-size:18px;min-height:56px;box-shadow:0 4px 0 #d79e1a}
.consult-row{margin-bottom:14px}
.bar .btn{flex:1}
@media (max-width:820px){ .lead .row2{grid-template-columns:1fr} .lead fieldset{padding:18px} }

/* form gọn: 1 khung, 2 cột (điện thoại 1 cột) */
.page-head.slim{padding:34px 0 30px}
.page-head.slim h1{font-size:clamp(28px,4.5vw,42px)}
.form-sec{padding:0 0 40px;margin-top:-6px}
.lead{max-width:860px;background:var(--white);border-radius:32px;padding:26px 26px 22px;box-shadow:0 10px 30px rgba(35,63,91,.1);gap:14px}
.lead .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.lead .wide{grid-column:1 / -1}
.lead .dogline{display:grid;grid-template-columns:1fr 110px;gap:8px}
.lead .q{margin-bottom:8px}
.lead .chip > span{padding:7px 14px;font-size:14px}
.lead input:not([type=radio]):not([type=checkbox]),.lead select{min-height:46px;padding:10px 14px}
.lead .send{width:100%;max-width:360px}
.lead .hint{text-align:center}
@media (max-width:820px){
  .lead{padding:18px 16px;border-radius:26px}
  .lead .grid2{grid-template-columns:1fr;gap:12px}
  .lead .send{max-width:none}
}

/* thư viện ảnh */
.gal-sec{padding:6px 0 40px}
.gal-filter{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;-webkit-overflow-scrolling:touch}
.gal-filter button{flex:none;border:2px solid var(--line);background:var(--white);color:var(--navy);border-radius:999px;padding:8px 16px;font:700 15px var(--body);cursor:pointer}
.gal-filter button small{display:inline-block;background:var(--mist);border-radius:999px;padding:0 7px;margin-left:4px;font-size:12px}
.gal-filter button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.gal-filter button[aria-selected="true"] small{background:var(--yellow);color:var(--navy)}
.gal-grid{columns:4 220px;column-gap:14px}
.gal-item{display:block;break-inside:avoid;margin:0 0 14px;padding:0;border:6px solid var(--white);border-radius:24px;overflow:hidden;cursor:zoom-in;background:var(--white);box-shadow:0 6px 18px rgba(35,63,91,.1);width:100%;transition:transform .2s}
.gal-item:hover{transform:rotate(-1.2deg) scale(1.02)}
.gal-item img{width:100%;aspect-ratio:1;object-fit:cover;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(19,34,50,.92);display:grid;place-items:center;padding:56px 12px}
.lightbox img{max-width:min(92vw,900px);max-height:84vh;border-radius:18px;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.lightbox button{position:absolute;border:0;background:var(--white);color:var(--navy);width:46px;height:46px;border-radius:50%;font:800 26px var(--body);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.lb-close{top:12px;right:12px;font-size:20px !important}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}
.gal-teaser{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal-teaser img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:20px;border:5px solid var(--white);box-shadow:0 6px 16px rgba(35,63,91,.12);-webkit-user-drag:none}
@media (max-width:820px){ .gal-grid{columns:2;column-gap:10px} .gal-item{margin-bottom:10px;border-width:4px;border-radius:18px} .gal-teaser{grid-template-columns:repeat(2,1fr)} }