/* Home quote section (patterns/home-quote.php): intro + copyable contacts beside the kit form "bao-gia" in a card.
   The form markup comes from the kit (dn-kit/form); this file gives it Digotech's look: labels inside the fields, field
   icons, website types and budget as chips, a switch, the optional fields folded (assets/js/sections/hm-quote.js).
   Field-specific rules use the kit's field classes (.dn-kit-form__field--<field name>, names from inc/setup-hm-quote.php). */

.hm-quote{
  --hm-quote-h: calc(var(--ctl) + var(--s-2));
  --hm-quote-pad-x: var(--s-3);
  --hm-quote-ic-x: calc(var(--s-3) + var(--icon-m) + var(--s-2));
  --hm-quote-ring: 0 0 0 3px var(--accent-tint);
  --hm-quote-pop: 0 var(--s-4) var(--s-6) var(--shadow);
  --hm-quote-knob: 0 1px 3px var(--shadow);
  --hm-quote-focus: 2px;
  --hm-quote-sw-w: 40px;
  --hm-quote-sw-h: 24px;
  --hm-quote-sw-pad: 2px;
  --hm-quote-pick-h: 300px;
  --hm-quote-lbl-top: 18px;
  --hm-quote-lbl-lift: -10px;
  --hm-quote-lbl-k: .75;
}
.hm-quote__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-col);align-items:start}
.hm-quote__grid > *,.hm-quote__side > *,.hm-quote__contacts > *,.hm-quote__card > *,.hm-quote__foot > *{margin:0}

/* left: intro, sticky beside the long form */
.hm-quote__side{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);position:sticky;top:calc(var(--admin-h) + var(--nav-h) + var(--s-7))}
.hm-quote__title{font-size:var(--t-2xl)}
.hm-quote__title strong{font-weight:inherit;color:var(--accent)}
.hm-quote__lede{color:var(--ink-2)}
.hm-quote__contacts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
/* border-box: the box is width:100% plus padding and a border (it ran 22px past the column, past the screen edge on phones) */
.hm-quote__contacts .dg-copy--box{box-sizing:border-box;min-height:var(--ctl);padding-right:var(--s-2);background:transparent}
/* as in the design: the button right after the value, words only */
.hm-quote__contacts .dg-copy__value{flex:0 1 auto}
.hm-quote__contacts .dg-copy__btn svg{display:none}
.hm-quote__contacts .dg-copy--box .dg-copy__btn{min-height:calc(var(--ctl-s) - var(--s-2));padding:0 var(--s-2);border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-2)}
.hm-quote__contacts .dg-copy--box .dg-copy__btn:is(:hover,:focus-visible){border-color:var(--ink-2)}
/* the Quote page's opening screen (pattern bao-gia-hero): the page heading sits beside the form, with three numbered
   steps and links down to the packages and the comparison */
.hm-quote--hero{padding-top:var(--s-6)}
.hm-quote__price{display:grid;gap:var(--s-1)}
.hm-quote__price > *{margin:0}
.hm-quote__price-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-1) var(--s-4);padding-block:var(--s-2);border-bottom:1px solid var(--rule)}
.hm-quote__price-row > *{margin:0}
.hm-quote__price-k{color:var(--ink-2)}
.hm-quote__price-v{font:700 var(--t-l)/1.1 var(--font-display);color:var(--accent)}
.hm-quote__steps{display:grid;gap:var(--s-3);padding:0;list-style:none;counter-reset:hm-step}
.hm-quote__steps li{display:grid;grid-template-columns:var(--ctl-s) minmax(0,1fr);gap:var(--s-3);align-items:center;margin:0;counter-increment:hm-step}
.hm-quote__steps li::before{content:counter(hm-step);display:grid;place-items:center;width:var(--ctl-s);height:var(--ctl-s);border:1px solid var(--rule);border-radius:var(--r);background:var(--paper-2);font:500 var(--t-xs)/1 var(--font-mono);color:var(--accent)}
.hm-quote__jump{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);font-size:var(--t-s)}
.hm-quote__jump a{color:var(--accent);font-weight:600;text-decoration:none}
.hm-quote__jump a::after{content:" ↓"}
.hm-quote__jump a:hover{text-decoration:underline}

/* right: the card holding the form */
.hm-quote__card{display:grid;gap:var(--s-4);padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--paper)}
/* the form card follows the page while its optional fields are folded (a short card beside a long column leaves no
   empty space); unfolded it is long, so it scrolls with the page (DN 10-03) */
.hm-quote__card:not(:has(.hm-quote__more[open])){position:sticky;top:calc(var(--admin-h) + var(--nav-h) + var(--s-7))}
/* the fold title: moved into the fold by the script; hidden on the site until then, shown in the editor so it can be edited */
body:not(.editor-styles-wrapper) .hm-quote__more-label{display:none}
.editor-styles-wrapper .hm-quote__more-label{padding:var(--s-2) var(--s-4);border:1px dashed var(--rule);border-radius:var(--r-card);font:600 var(--t-s)/1.3 var(--font-body)}
.hm-quote__more-label em,.hm-quote__more summary em{font-style:normal;font-weight:400;font-size:var(--t-xs);color:var(--ink-3)}

form.hm-quote__form,.hm-quote__more-in{display:flex;flex-wrap:wrap;gap:var(--s-4)}
form.hm-quote__form > *,.hm-quote__more-in > *{flex:1 1 100%}
form.hm-quote__form > .dn-kit-form__field--half,.hm-quote__more-in > .dn-kit-form__field--half{flex:1 1 calc(50% - var(--s-4))}

/* text fields: the label sits inside the field, small, at the top; while the field is empty and not focused it fills the
   field like a placeholder (the script gives text fields placeholder=" "; without the script the label stays small) */
form.hm-quote__form .dn-kit-form__field{position:relative;gap:0}
form.hm-quote__form .dn-kit-form__field:not(:has(> .dn-kit-form__range)) > label{position:absolute;left:var(--hm-quote-pad-x);top:var(--hm-quote-lbl-top);font-size:var(--t-m);font-weight:400;line-height:1;color:var(--ink-2);pointer-events:none;transform-origin:left top;transform:translateY(var(--hm-quote-lbl-lift)) scale(var(--hm-quote-lbl-k));transition:transform var(--dur-m) var(--ease-out),color var(--dur) var(--ease-press)}
form.hm-quote__form .dn-kit-form__field:has(> :is(input,textarea)[placeholder=" "]:placeholder-shown:not(:focus)) > label{transform:none;color:var(--ink-3)}
form.hm-quote__form .dn-kit-form__field:not(:has(> .dn-kit-form__range)):focus-within > label{color:var(--accent)}
form.hm-quote__form .dn-kit-form__req{color:inherit}
form.hm-quote__form .dn-kit-form__field > :is(input,select,textarea){height:var(--hm-quote-h);padding:calc(var(--s-4) + var(--s-1) / 2) var(--hm-quote-pad-x) var(--s-1);border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink);font:400 var(--t-m)/1.4 var(--font-body);
  transition:border-color var(--dur) var(--ease-press),box-shadow var(--dur) var(--ease-press)}
form.hm-quote__form .dn-kit-form__field > textarea{height:auto;min-height:calc(var(--s-9) + var(--s-2));padding-top:var(--s-5);padding-bottom:var(--s-3);resize:vertical}
form.hm-quote__form .dn-kit-form__field > :is(input,select,textarea):focus{outline:none;border-color:var(--accent-fill);box-shadow:var(--hm-quote-ring)}
form.hm-quote__form .dn-kit-form__field > [aria-invalid]{border-color:var(--p4)}
form.hm-quote__form .dn-kit-form__error{margin-top:var(--s-1);font-size:var(--t-xs);color:var(--p4)}
/* select: own chevron, the browser's arrow hidden */
form.hm-quote__form .dn-kit-form__field > select{appearance:none;-webkit-appearance:none;padding-top:calc(var(--s-5) - var(--s-1) / 2);padding-right:calc(var(--s-4) * 2 + var(--icon-s));cursor:pointer}
form.hm-quote__form .dn-kit-form__field:has(> select)::after{content:"";position:absolute;right:var(--s-4);top:calc((var(--hm-quote-h) - var(--icon-s)) / 2);width:var(--icon-s);height:var(--icon-s);background:var(--ink-2);pointer-events:none;-webkit-mask:url(../../../icons/down.svg?ver=c31c17cc) center / contain no-repeat;mask:url(../../../icons/down.svg?ver=c31c17cc) center / contain no-repeat}
@supports (appearance: base-select){
  form.hm-quote__form .dn-kit-form__field > select,form.hm-quote__form .dn-kit-form__field > select::picker(select){appearance:base-select}
  form.hm-quote__form .dn-kit-form__field > select::picker-icon{display:none}
  form.hm-quote__form .dn-kit-form__field > select::picker(select){padding:var(--s-1);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);color:var(--ink);box-shadow:var(--hm-quote-pop);max-height:var(--hm-quote-pick-h);overflow-y:auto}
  form.hm-quote__form .dn-kit-form__field > select option{padding:var(--s-2) var(--s-3);border-radius:var(--r);background:transparent;color:var(--ink)}
  form.hm-quote__form .dn-kit-form__field > select option[value=""]{color:var(--ink-3)}
  form.hm-quote__form .dn-kit-form__field > select option:is(:hover,:focus){background:var(--accent-tint)}
  form.hm-quote__form .dn-kit-form__field > select option:checked{color:var(--accent);font-weight:600}
  form.hm-quote__form .dn-kit-form__field > select option::checkmark{color:var(--accent-fill)}
}

/* field icons (by field name) */
form.hm-quote__form :is(.dn-kit-form__field--ho_ten,.dn-kit-form__field--dien_thoai,.dn-kit-form__field--email,.dn-kit-form__field--mo_ta,.dn-kit-form__field--nganh,.dn-kit-form__field--website_hien_tai,.dn-kit-form__field--quoc_gia){--hm-quote-pad-x:var(--hm-quote-ic-x)}
form.hm-quote__form :is(.dn-kit-form__field--ho_ten,.dn-kit-form__field--dien_thoai,.dn-kit-form__field--email,.dn-kit-form__field--mo_ta,.dn-kit-form__field--nganh,.dn-kit-form__field--website_hien_tai,.dn-kit-form__field--quoc_gia)::before{content:"";position:absolute;left:var(--s-3);top:calc((var(--hm-quote-h) - var(--icon-m)) / 2);width:var(--icon-m);height:var(--icon-m);background:var(--ink-3);pointer-events:none;-webkit-mask:var(--hm-quote-ic) center / contain no-repeat;mask:var(--hm-quote-ic) center / contain no-repeat;transition:background-color var(--dur) var(--ease-press)}
form.hm-quote__form .dn-kit-form__field:focus-within::before{background:var(--accent)}
form.hm-quote__form .dn-kit-form__field--ho_ten{--hm-quote-ic:url(../../../icons/user.svg?ver=3ba49307)}
form.hm-quote__form .dn-kit-form__field--dien_thoai{--hm-quote-ic:url(../../../icons/phone.svg?ver=bbb55d77)}
form.hm-quote__form .dn-kit-form__field--email{--hm-quote-ic:url(../../../icons/mail.svg?ver=82f4d804)}
form.hm-quote__form .dn-kit-form__field--mo_ta{--hm-quote-ic:url(../../../icons/pen.svg?ver=7e3b1c7d)}
form.hm-quote__form .dn-kit-form__field--nganh{--hm-quote-ic:url(../../../icons/brief.svg?ver=4de39208)}
form.hm-quote__form .dn-kit-form__field--website_hien_tai{--hm-quote-ic:url(../../../icons/link.svg?ver=8b82e494)}
form.hm-quote__form .dn-kit-form__field--quoc_gia{--hm-quote-ic:url(../../../icons/globe.svg?ver=f3924da6)}
/* character count under the long text (added by the script) */
.hm-quote__cnt{position:absolute;right:var(--s-3);bottom:calc(var(--t-xs) * 1.5 + var(--s-1) + var(--s-2));font:500 var(--t-2xs)/1 var(--font-mono);color:var(--ink-3);pointer-events:none}
.dn-kit-form__field > .dn-kit-form__error:empty ~ .hm-quote__cnt{bottom:var(--s-2)}

/* website types and budget: chips for every kit form are in base.css; here only the design's question line */
/* the design shows no "*" on the question; its trailing "(...)" is a grey hint (split off by the script) */
form.hm-quote__form .dn-kit-form__choices legend .dn-kit-form__req{display:none}
.hm-quote__hint{font-weight:400;color:var(--ink-3)}

/* "business abroad" switch; the country field shows only when it is on */
form.hm-quote__form .dn-kit-form__check{gap:var(--s-3);font-size:var(--t-s)}
form.hm-quote__form .dn-kit-form__check label{font-weight:400;cursor:pointer}
form.hm-quote__form .dn-kit-form__check--switch input{width:var(--hm-quote-sw-w);height:var(--hm-quote-sw-h);border:1px solid var(--rule);background:var(--paper-3);transition:background-color var(--dur-m) var(--ease-out),border-color var(--dur-m) var(--ease-out)}
form.hm-quote__form .dn-kit-form__check--switch input::before{inset-block:var(--hm-quote-sw-pad);inset-inline-start:var(--hm-quote-sw-pad);border:0;background:var(--card);box-shadow:var(--hm-quote-knob);transition:transform var(--dur-m) var(--ease-out)}
form.hm-quote__form .dn-kit-form__check--switch input:checked{border-color:var(--accent-fill);background:var(--accent-fill)}
form.hm-quote__form .dn-kit-form__check--switch input:checked::before{transform:translateX(calc(var(--hm-quote-sw-w) - var(--hm-quote-sw-h)))}
form.hm-quote__form .dn-kit-form__check--switch input:focus-visible{outline:var(--hm-quote-focus) solid var(--accent);outline-offset:var(--hm-quote-focus)}
form.hm-quote__form:not(:has(.dn-kit-form__field--o_nuoc_ngoai input:checked)) .dn-kit-form__field--quoc_gia{display:none}

/* the optional fields folded under "more details" (built by the script) */
.hm-quote__more{border:1px dashed var(--rule);border-radius:var(--r-card)}
.hm-quote__more summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--ctl);padding:0 var(--s-4);font:600 var(--t-s)/1.3 var(--font-body);cursor:pointer;list-style:none}
.hm-quote__more summary::-webkit-details-marker{display:none}
.hm-quote__more summary::after{content:"";flex:none;width:var(--s-4);height:var(--s-4);background:var(--ink-2);-webkit-mask:url(../../../icons/down.svg?ver=c31c17cc) center / contain no-repeat;mask:url(../../../icons/down.svg?ver=c31c17cc) center / contain no-repeat;transition:transform var(--dur-m) var(--ease-out)}
.hm-quote__more[open] summary::after{transform:rotate(180deg)}
.hm-quote__more-in{padding:0 var(--s-4) var(--s-4)}

/* send button with the mail icon; status line; after sending, only the thank-you shows */
form.hm-quote__form .dn-kit-form__actions{display:flex;justify-content:flex-end}
form.hm-quote__form .dn-kit-form__actions .wp-element-button::before{content:"";width:var(--icon-m);height:var(--icon-m);background:currentColor;-webkit-mask:url(../../../icons/mail.svg?ver=82f4d804) center / contain no-repeat;mask:url(../../../icons/mail.svg?ver=82f4d804) center / contain no-repeat}
form.hm-quote__form .dn-kit-form__status{font-size:var(--t-s);color:var(--ink-2)}
form.hm-quote__form .dn-kit-form__status:empty{display:none}
form.hm-quote__form.is-sent > :not(.dn-kit-form__status){display:none}
form.hm-quote__form.is-sent .dn-kit-form__status{display:grid;justify-items:center;gap:var(--s-4);padding:var(--s-8) var(--s-5);text-align:center;font:700 var(--t-xl)/1.3 var(--font-display);color:var(--ink)}
form.hm-quote__form.is-sent .dn-kit-form__status::before{content:"";width:var(--s-8);height:var(--s-8);background:var(--accent-fill);-webkit-mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat;mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat}

/* privacy line, send button, Zalo link: one row inside the form (moved there by the script; without it, under the form) */
.hm-quote__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4)}
.hm-quote__privacy{max-width:36ch;font-size:var(--t-xs);color:var(--ink-3)}
.hm-quote__alt{font-size:var(--t-s);font-weight:600}
/* the Zalo link reads its number from Thông tin doanh nghiệp (a Button bound to dg_zalo): a plain text link, not a button */
.hm-quote__alt{margin:0}
.hm-quote__alt .wp-block-button__link{min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;transform:none}
.hm-quote__alt a{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--accent);text-decoration:none}
.hm-quote__alt a::before{content:"";width:var(--s-4);height:var(--s-4);background:currentColor;-webkit-mask:url(../../../icons/zalo.svg?ver=8a580079) center / contain no-repeat;mask:url(../../../icons/zalo.svg?ver=8a580079) center / contain no-repeat}

@media (max-width: 991px){
  .hm-quote__grid{grid-template-columns:minmax(0,1fr)}
  .hm-quote__card:not(:has(.hm-quote__more[open])){position:static}
  .hm-quote__side{position:static}
}
@media (max-width: 767px){
  form.hm-quote__form > .dn-kit-form__field--half,.hm-quote__more-in > .dn-kit-form__field--half{flex-basis:100%}
}
@media (prefers-reduced-motion: reduce){
  form.hm-quote__form .dn-kit-form__check--switch input,form.hm-quote__form .dn-kit-form__check--switch input::before,.hm-quote__more summary::after,form.hm-quote__form .dn-kit-form__field > label{transition:none}
}