/*
 * WEB366 — Component styles / detail corrections 2026-10-09
 * Reference: mua-ban-phe-lieu-html(5).zip, assets/css/style.css.
 * Replace assets/css/customize.css; do not append older versions.
 *
 * Elementor owns content, links, selected icons, typography, button padding,
 * widget width/alignment, all outer containers and responsive page layout.
 * Class styles are defaults: local Elementor settings remain higher priority.
 * Local color/size overrides must be adjusted with the native controls listed
 * in HUONG-DAN-SUA.txt. This file does not force them through higher specificity.
 * CF7 is a separate markup component; its internal layout is defined below.
 */

/* 01. BUTTON SKINS
 * Apply ONE skin class to a classic Elementor Button widget.
 * The ::after spacer participates in the button's flex layout.
 * The ::before graphic paints that reserved right-hand lane.
 * No text trimming, no guessed padding-right, no clipping the editor widget.
 * Keeping the spacer outside content-wrapper also supports native icon reversal.
 */
.web366-btn-accent,
.web366-btn-primary,
.web366-btn-outline,
.web366-btn-ghost {
    --w366-button-cut: 0.714286em;
    --w366-arrow-width: 3.285714em;
    --w366-arrow-size: 1.285714em;
    --w366-arrow-shift: 0.285714em;
    --w366-button-color: #fff;
    --w366-button-hover-color: var(--w366-button-color);
    --w366-button-surface: transparent;
    --w366-button-hover-surface: var(--w366-button-surface);
    --w366-button-border: transparent;
    --w366-button-shadow: none;
    --w366-button-hover-shadow: var(--w366-button-shadow);
    --w366-arrow-bg: rgb(0 0 0 / 14%);
    --w366-arrow-hover-bg: rgb(0 0 0 / 24%);
    --w366-button-speed: 0.4s;
    --w366-arrow-speed: 0.25s;
    --w366-arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.web366-btn-accent {
    --w366-button-image: linear-gradient(110deg, #f7931e 0%, #f47b20 45%, #e3262c 100%);
}

.web366-btn-primary {
    --w366-button-image: linear-gradient(110deg, #2f74d0 0%, #1f57a8 45%, #0b2552 100%);
}

.web366-btn-outline {
    --w366-button-image: none;
    --w366-button-surface: #fff;
    --w366-button-hover-surface: #f3f6fb;
    --w366-button-color: #1f57a8;
    --w366-button-shadow: inset 0 0 0 1.5px #e3e8f0;
    --w366-button-hover-shadow: inset 0 0 0 1.5px #1f57a8;
    --w366-arrow-bg: #1f57a8;
    --w366-arrow-hover-bg: #0b2552;
}

.web366-btn-ghost {
    --w366-button-image: none;
    --w366-button-surface: rgb(255 255 255 / 12%);
    --w366-button-hover-surface: #fff;
    --w366-button-hover-color: #0b2552;
    --w366-button-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 45%);
    --w366-arrow-bg: rgb(255 255 255 / 18%);
    --w366-arrow-hover-bg: #f47b20;
}

.elementor-widget-button.web366-btn-accent .elementor-button,
.elementor-widget-button.web366-btn-primary .elementor-button,
.elementor-widget-button.web366-btn-outline .elementor-button,
.elementor-widget-button.web366-btn-ghost .elementor-button {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: var(--w366-button-surface);
    background-image: var(--w366-button-image);
    background-size: 200% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    color: var(--w366-button-color);
    fill: var(--w366-button-color);
    border-color: var(--w366-button-border);
    border-radius: 0;
    box-shadow: var(--w366-button-shadow);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--w366-button-cut)), calc(100% - var(--w366-button-cut)) 100%, 0 100%);
    transition: background-position var(--w366-button-speed), background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.elementor-widget-button.web366-btn-accent .elementor-button-content-wrapper,
.elementor-widget-button.web366-btn-primary .elementor-button-content-wrapper,
.elementor-widget-button.web366-btn-outline .elementor-button-content-wrapper,
.elementor-widget-button.web366-btn-ghost .elementor-button-content-wrapper {
    flex: 0 0 auto;
    min-width: max-content;
    align-items: center;
    justify-content: start;
}

.elementor-widget-button.web366-btn-accent .elementor-button-text,
.elementor-widget-button.web366-btn-primary .elementor-button-text,
.elementor-widget-button.web366-btn-outline .elementor-button-text,
.elementor-widget-button.web366-btn-ghost .elementor-button-text {
    min-width: max-content;
    white-space: nowrap;
}

/* Reserve space even when no icon was selected or native padding is zero. */
.elementor-widget-button.web366-btn-accent .elementor-button::after,
.elementor-widget-button.web366-btn-primary .elementor-button::after,
.elementor-widget-button.web366-btn-outline .elementor-button::after,
.elementor-widget-button.web366-btn-ghost .elementor-button::after {
    content: "";
    flex: 0 0 var(--w366-arrow-width);
    align-self: stretch;
    pointer-events: none;
}

/* Decorative cell: never adds a second icon to the editable label. */
.elementor-widget-button.web366-btn-accent .elementor-button::before,
.elementor-widget-button.web366-btn-primary .elementor-button::before,
.elementor-widget-button.web366-btn-outline .elementor-button::before,
.elementor-widget-button.web366-btn-ghost .elementor-button::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--w366-arrow-width);
    background-color: var(--w366-arrow-bg);
    background-image: var(--w366-arrow-image);
    background-position: center;
    background-size: var(--w366-arrow-size);
    background-repeat: no-repeat;
    pointer-events: none;
    transition: background-position var(--w366-arrow-speed), background-color var(--w366-arrow-speed);
}

.elementor-widget-button.web366-btn-accent .elementor-button-icon,
.elementor-widget-button.web366-btn-primary .elementor-button-icon,
.elementor-widget-button.web366-btn-outline .elementor-button-icon,
.elementor-widget-button.web366-btn-ghost .elementor-button-icon {
    font-size: 1.285714em;
}

.elementor-widget-button.web366-btn-accent .elementor-button-icon svg,
.elementor-widget-button.web366-btn-primary .elementor-button-icon svg,
.elementor-widget-button.web366-btn-outline .elementor-button-icon svg,
.elementor-widget-button.web366-btn-ghost .elementor-button-icon svg {
    display: block;
}

.elementor-widget-button.web366-btn-accent .elementor-button:hover,
.elementor-widget-button.web366-btn-primary .elementor-button:hover,
.elementor-widget-button.web366-btn-outline .elementor-button:hover,
.elementor-widget-button.web366-btn-ghost .elementor-button:hover {
    background-color: var(--w366-button-hover-surface);
    background-position: 100% 0;
    color: var(--w366-button-hover-color);
    fill: var(--w366-button-hover-color);
    box-shadow: var(--w366-button-hover-shadow);
}

.elementor-widget-button.web366-btn-accent .elementor-button:hover::before,
.elementor-widget-button.web366-btn-primary .elementor-button:hover::before,
.elementor-widget-button.web366-btn-outline .elementor-button:hover::before,
.elementor-widget-button.web366-btn-ghost .elementor-button:hover::before {
    background-color: var(--w366-arrow-hover-bg);
    background-position: calc(50% + var(--w366-arrow-shift)) center;
}

.elementor-widget-button.web366-btn-accent .elementor-button:focus-visible,
.elementor-widget-button.web366-btn-primary .elementor-button:focus-visible,
.elementor-widget-button.web366-btn-outline .elementor-button:focus-visible,
.elementor-widget-button.web366-btn-ghost .elementor-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/* 02. ICON LIST CIRCLES
 * Only the icon's internal box. Item spacing/alignment/text stay native.
 * Native Icon Size feeds the circle, instead of fixing a pixel diameter.
 */
.web366-checks {
    --w366-circle-padding: 0.416667;
    --w366-circle-bg: #1f57a8;
    --w366-check-color: #fff;
}

.web366-phone-main {
    --w366-circle-padding: 0.666667;
    --w366-circle-bg: #e3262c;
}

.web366-phone-sub {
    --w366-circle-padding: 0.666667;
    --w366-circle-bg: rgb(255 255 255 / 14%);
}

.web366-commit-icons {
    --w366-circle-padding: 0.552632;
    --w366-circle-bg: #f3f6fb;
}

.web366-checks .elementor-icon-list-icon,
.web366-phone-main .elementor-icon-list-icon,
.web366-phone-sub .elementor-icon-list-icon,
.web366-commit-icons .elementor-icon-list-icon {
    --e-icon-list-icon-margin: 0;
    position: relative;
    isolation: isolate;
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--e-icon-list-icon-size, 1em);
    height: var(--e-icon-list-icon-size, 1em);
    padding: calc(var(--e-icon-list-icon-size, 1em) * var(--w366-circle-padding));
    background: transparent;
}

/* Native Text Indent may add end padding to the wrapper. Paint an exact circle
 * behind the glyph without absorbing that native spacing into an ellipse. */
.web366-checks .elementor-icon-list-icon::before,
.web366-phone-main .elementor-icon-list-icon::before,
.web366-phone-sub .elementor-icon-list-icon::before,
.web366-commit-icons .elementor-icon-list-icon::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: calc(var(--e-icon-list-icon-size, 1em) * (1 + 2 * var(--w366-circle-padding)));
    height: calc(var(--e-icon-list-icon-size, 1em) * (1 + 2 * var(--w366-circle-padding)));
    border-radius: 50%;
    background-color: var(--w366-circle-bg);
    pointer-events: none;
}

.web366-checks .elementor-icon-list-icon svg,
.web366-phone-main .elementor-icon-list-icon svg,
.web366-phone-sub .elementor-icon-list-icon svg,
.web366-commit-icons .elementor-icon-list-icon svg {
    display: block;
}

/* Check color is a skin default. Native Icon Color and Size remain editable.
 * Reference: 12px glyph + 5px on either side = 22px circle.
 */
.web366-checks .elementor-icon-list-icon,
.web366-checks .elementor-icon-list-icon i {
    color: var(--w366-check-color);
}

.web366-checks .elementor-icon-list-icon svg {
    fill: var(--w366-check-color);
}

.web366-phone-main .elementor-icon-list-icon::before {
    animation: web366-component-phone-pulse 2.4s infinite;
}

@keyframes web366-component-phone-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(227 38 44 / 45%); }
    60% { box-shadow: 0 0 0 10px rgb(227 38 44 / 0%); }
}

/* Native Icon / Icon Box: keep the chosen size, padding and icon. */
.web366-icon-center .elementor-icon,
.web366-icon-primary .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.web366-icon-center .elementor-icon svg,
.web366-icon-primary .elementor-icon svg {
    display: block;
}

.web366-icon-primary .elementor-icon {
    background-image: linear-gradient(110deg, #2f74d0 0%, #1f57a8 45%, #0b2552 100%);
}

/* 03. SMALL DECORATIONS — no section geometry or page selectors. */
.web366-heading-line {
    position: relative;
}

.web366-heading-line::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -2px;
    width: 100%;
    height: var(--w366-line-thickness, 2px);
    background: linear-gradient(to right,
        var(--w366-line-color, #f47b20) 0 var(--w366-line-length, 40px),
        var(--w366-line-track, #e3e8f0) var(--w366-line-length, 40px) 100%);
    pointer-events: none;
}

.web366-step-halo {
    background-image: linear-gradient(110deg, #f7931e 0%, #f47b20 45%, #e3262c 100%);
    box-shadow: 0 0 0 var(--w366-halo-size, 5px) var(--w366-halo-color, #fff4ea);
}

/* Eyebrow: only the leading dash. It inherits the actual title color.
 * Inline decoration preserves the Heading's native text alignment.
 * Supports classic Heading wrappers and Atomic Heading/Paragraph roots.
 * Do not retain a manually typed dash in the title.
 */
.web366-eyebrow .elementor-heading-title::before,
.web366-eyebrow.e-heading-base::before,
.web366-eyebrow.e-paragraph-base::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: var(--w366-eyebrow-length, 22px);
    height: var(--w366-eyebrow-thickness, 2px);
    margin-inline-end: var(--w366-eyebrow-gap, 10px);
    background-color: currentColor;
    pointer-events: none;
}

/* 01 / 02 / 03 service badges, NOT the 1-5 process halo.
 * Apply to the Heading containing only the number. The editor still owns
 * width, height, line-height, font size/weight and position.
 */
.web366-service-number {
    background-image: linear-gradient(110deg, #f7931e 0%, #f47b20 45%, #e3262c 100%);
}

/* One opt-in class per benefit card, never on the outer Grid.
 * An inset line reproduces the sample's orange lower edge without changing
 * card height, padding or layout when hovered. Clear the saved local
 * Background color once so the skin's normal/hover surfaces can apply.
 */
.web366-benefit-card {
    --w366-benefit-surface: #f3f6fb;
    --w366-benefit-hover-surface: #fff;
    --w366-benefit-edge: #f47b20;
    --w366-benefit-edge-size: 3px;
    --w366-benefit-hover-shadow: 0 2px 10px rgb(11 37 82 / 7%);
    background-color: var(--w366-benefit-surface);
    transition: background-color 0.25s, box-shadow 0.25s;
}

.web366-benefit-card:hover,
.web366-benefit-card:focus-within {
    background-color: var(--w366-benefit-hover-surface);
    box-shadow: inset 0 calc(-1 * var(--w366-benefit-edge-size)) 0 var(--w366-benefit-edge),
        var(--w366-benefit-hover-shadow);
}

/* Sidebar links already use the Button's native right-arrow icon. */
.web366-service-link .elementor-button-icon {
    transition: transform 0.2s, color 0.2s;
}

.web366-service-link .elementor-button:hover .elementor-button-icon {
    color: #f47b20;
    transform: translateX(3px);
}

.web366-service-link .elementor-button-icon svg {
    fill: currentColor;
}

/* 04. CF7 — opt-in on the Shortcode widget, not its section.
 * Both supplied form templates are kept. No mail/validation/field changes.
 * All dimensions below belong to generated form markup, not Elementor layout.
 */
.web366-cf7 {
    --w366-form-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --w366-form-gap: 12px;
    --w366-form-label-size: 13px;
    --w366-form-input-size: 15px;
    --w366-form-input-height: 46px;
    --w366-form-input-padding: 14px;
    --w366-form-input-bg: rgb(255 255 255 / 10%);
    --w366-form-input-border: rgb(255 255 255 / 20%);
    --w366-form-text: #fff;
    --w366-form-label: #c9d6ee;
    --w366-form-placeholder: #9fb2d4;
    --w366-form-focus: #f47b20;
    --w366-form-submit-height: 48px;
    --w366-form-arrow-width: 46px;
    --w366-form-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --w366-form-accent: linear-gradient(110deg, #f7931e 0%, #f47b20 45%, #e3262c 100%);
    --w366-form-cut: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.web366-cf7 .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: var(--w366-form-gap);
    margin: 0;
    font-family: var(--w366-form-font);
}

.web366-cf7 .hidden-fields-container {
    display: none;
}

.web366-cf7 .wpcf7-form p {
    margin: 0;
    padding: 0;
}

.web366-cf7 .web366-quote-form {
    display: flex;
    flex-direction: column;
    gap: var(--w366-form-gap);
}

.web366-cf7 .web366-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--w366-form-gap);
}

.web366-cf7 .web366-form__row > p {
    display: contents;
}

.web366-cf7 .web366-field,
.web366-cf7 .web366-quote-form__field {
    display: block;
    min-width: 0;
    margin: 0;
    color: var(--w366-form-label);
    font: 500 var(--w366-form-label-size)/1.6 var(--w366-form-font);
}

.web366-cf7 .web366-field > span:not(.wpcf7-form-control-wrap),
.web366-cf7 .web366-quote-form__label {
    display: block;
    margin-bottom: 5px;
}

.web366-cf7 .web366-field > br,
.web366-cf7 .web366-quote-form__field > br,
.web366-cf7 .web366-form__row > br,
.web366-cf7 .web366-quote-form > br,
.web366-cf7 .web366-form__submit br,
.web366-cf7 .web366-quote-form__submit br {
    display: none;
}

.web366-cf7 .wpcf7-form-control-wrap {
    display: block;
    min-width: 0;
}

.web366-cf7 input[type="text"],
.web366-cf7 input[type="email"],
.web366-cf7 input[type="tel"],
.web366-cf7 select,
.web366-cf7 textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--w366-form-input-border);
    border-radius: 0;
    background: var(--w366-form-input-bg);
    color: var(--w366-form-text);
    font: 400 var(--w366-form-input-size)/1.6 var(--w366-form-font);
    transition: border-color 0.2s, background-color 0.2s;
}

.web366-cf7 input[type="text"],
.web366-cf7 input[type="email"],
.web366-cf7 input[type="tel"],
.web366-cf7 select {
    height: var(--w366-form-input-height);
    padding: 0 var(--w366-form-input-padding);
}

.web366-cf7 textarea {
    padding: 12px var(--w366-form-input-padding);
    resize: vertical;
}

.web366-cf7 input::placeholder,
.web366-cf7 textarea::placeholder {
    color: var(--w366-form-placeholder);
    opacity: 1;
}

.web366-cf7 select option {
    color: #0f1c33;
    background: #fff;
}

.web366-cf7 input[type="text"]:focus,
.web366-cf7 input[type="email"]:focus,
.web366-cf7 input[type="tel"]:focus,
.web366-cf7 select:focus,
.web366-cf7 textarea:focus {
    border-color: var(--w366-form-focus);
    outline: 2px solid var(--w366-form-focus);
    outline-offset: 2px;
    background: rgb(255 255 255 / 16%);
}

.web366-cf7 input.wpcf7-not-valid,
.web366-cf7 select.wpcf7-not-valid,
.web366-cf7 textarea.wpcf7-not-valid {
    border-color: #ff8a8a;
}

.web366-cf7 .wpcf7-not-valid-tip {
    margin-top: 5px;
    color: #ffb4b4;
    font: 400 13px/1.5 var(--w366-form-font);
}

.web366-cf7 .wpcf7-response-output {
    margin: 0;
    padding: 10px 12px;
    color: var(--w366-form-text);
    font: 400 14px/1.5 var(--w366-form-font);
}

.web366-cf7 .web366-form__submit,
.web366-cf7 .web366-quote-form__submit {
    position: relative;
    margin-top: 6px;
}

.web366-cf7 input[type="submit"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: var(--w366-form-submit-height);
    margin: 0;
    padding: 12px calc(var(--w366-form-arrow-width) + 38px) 12px 22px;
    border: 0;
    border-radius: 0;
    background: var(--w366-form-accent) 0 0 / 200% 100%;
    color: #fff;
    font: 700 14px/1.5 var(--w366-form-font);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    clip-path: var(--w366-form-cut);
    transition: background-position 0.4s;
}

.web366-cf7 .web366-form__submit::after,
.web366-cf7 .web366-quote-form__submit::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--w366-form-arrow-width);
    background: rgb(0 0 0 / 14%) center / 18px no-repeat var(--w366-form-arrow);
    clip-path: var(--w366-form-cut);
    pointer-events: none;
    transition: background-position 0.25s, background-color 0.25s;
}

.web366-cf7 input[type="submit"]:hover {
    background-position: 100% 0;
}

.web366-cf7 .web366-form__submit:hover::after,
.web366-cf7 .web366-quote-form__submit:hover::after {
    background-color: rgb(0 0 0 / 24%);
    background-position: calc(50% + 4px) center;
}

.web366-cf7 input[type="submit"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.web366-cf7 .web366-form__submit .wpcf7-spinner,
.web366-cf7 .web366-quote-form__submit .wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: calc(var(--w366-form-arrow-width) + 8px);
    margin: 0;
    transform: translateY(-50%);
}

.web366-cf7 .submitting input[type="submit"] {
    cursor: wait;
}

@media (max-width: 560px) {
    .web366-cf7 .web366-form__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 05. Reduced motion; CF7's progress spinner remains functional. */
@media (prefers-reduced-motion: reduce) {
    .web366-btn-accent,
    .web366-btn-primary,
    .web366-btn-outline,
    .web366-btn-ghost {
        --w366-button-speed: 0s;
        --w366-arrow-speed: 0s;
    }

    .web366-phone-main .elementor-icon-list-icon::before {
        animation: none;
    }

    .web366-benefit-card,
    .web366-service-link .elementor-button-icon {
        transition: none;
    }

    .web366-service-link .elementor-button:hover .elementor-button-icon {
        transform: none;
    }

    .web366-cf7 input,
    .web366-cf7 select,
    .web366-cf7 textarea,
    .web366-cf7 .web366-form__submit::after,
    .web366-cf7 .web366-quote-form__submit::after {
        transition: none;
    }
}