/* ==========================================================================
   polish.css — Lớp tinh chỉnh thẩm mỹ (KHÔNG sửa style.css/main.css gốc)
   --------------------------------------------------------------------------
   Chỉ nâng cấp: chiều sâu bóng đổ, chuyển động mượt, hover tinh tế,
   nhịp typography, focus a11y, gradient đẹp hơn. Dùng đúng token + class
   đã có. Load sau cùng (phụ thuộc hagiang-main) nên override an toàn.
   ========================================================================== */

:root {
    /* Bổ sung token mịn hơn — không ghi đè token cũ */
    --ease:        cubic-bezier(.22, .61, .36, 1);
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ring:        0 0 0 3px rgba(255, 107, 0, .25);
    --shadow-soft: 0 6px 18px rgba(26, 60, 52, .07);
    --shadow-lift: 0 22px 48px rgba(26, 60, 52, .16);
}

/* ----------------------- A11Y: focus rõ ràng ------------------------------ */
.hagiang-theme a:focus-visible,
.hagiang-theme button:focus-visible,
.hagiang-theme input:focus-visible,
.hagiang-theme select:focus-visible,
.hagiang-theme textarea:focus-visible,
.hg-button:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: 8px;
}

/* ----------------------- Typography rhythm -------------------------------- */
.hagiang-theme p { text-wrap: pretty; }
.hagiang-theme h1,
.hagiang-theme h2,
.hagiang-theme h3 { text-wrap: balance; letter-spacing: -.01em; }

/* ----------------------- Buttons: shine + lift ---------------------------- */
.hg-button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(255, 107, 0, .26);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.hg-button::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg);
    transition: left .6s var(--ease-out);
}
.hg-button:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(255, 107, 0, .38); }
.hg-button:hover::after { left: 130%; }
.hg-button:active { transform: translateY(-1px) scale(.99); }

/* ----------------------- Cards: chiều sâu + viền mảnh --------------------- */
.hg-tour-card,
.hg-blog-card,
.hg-feedback__card,
.hg-value,
.hg-affiliate-card {
    border: 1px solid rgba(26, 60, 52, .06);
    box-shadow: var(--shadow-soft);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    will-change: transform;
}
.hg-tour-card:hover,
.hg-blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.hg-feedback__card:hover,
.hg-value:hover,
.hg-affiliate-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* Ảnh trong card: zoom mượt hơn + tránh nhảy layout */
.hg-tour-card__media img,
.hg-blog-card__media img,
.hg-tribe__card img { transition: transform .6s var(--ease-out); }

/* Tiêu đề card: bỏ min-height cứng, canh đều bằng line-clamp */
.hg-tour-card__title {
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hg-tour-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tag tour: bóng nhẹ cho nổi trên ảnh */
.hg-tour-card__tag { box-shadow: 0 6px 16px rgba(255, 107, 0, .35); }

/* "View more" gạch chân chạy mượt */
.hg-tour-card__more { position: relative; border-bottom: 0; }
.hg-tour-card__more::after {
    content: "";
    position: absolute; left: 0; bottom: -2px;
    width: 100%; height: 2px;
    background: var(--color-primary);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
}
.hg-tour-card__more:hover::after { transform: scaleX(1); }

/* ----------------------- Hero: gradient ấm + chữ rõ ---------------------- */
.hg-hero::after {
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(255,107,0,.12), transparent 60%),
        linear-gradient(180deg, rgba(11,26,22,.22) 0%, rgba(11,26,22,.62) 100%);
}
.hg-hero__eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 7px 16px;
    border-radius: 999px;
}

/* ----------------------- Section head: gạch nhấn dưới eyebrow ------------- */
.hg-section__head .eyebrow { position: relative; padding-bottom: 4px; }
.hg-section__head .eyebrow::after {
    content: "";
    display: block;
    width: 34px; height: 3px;
    margin: 8px auto 0;
    background: var(--color-primary);
    border-radius: 2px;
}

/* ----------------------- Tribe / Memories: overlay sâu ------------------- */
.hg-tribe__card .meta { background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); }
.hg-tribe__card::after {
    content: "";
    position: absolute; inset: 0;
    box-shadow: inset 0 0 0 0 var(--color-primary);
    transition: box-shadow .3s var(--ease);
    pointer-events: none;
    border-radius: inherit;
}
.hg-tribe__card:hover::after { box-shadow: inset 0 0 0 3px var(--color-primary); }
.hg-memories__row img { transition: transform .4s var(--ease-out), box-shadow .3s var(--ease); }
.hg-memories__row img:hover { box-shadow: var(--shadow-md); }

/* ----------------------- Single tour: tabs + widget --------------------- */
.hg-tour-tabs { gap: 8px; }
.hg-tour-tabs a { transition: color .2s var(--ease), border-color .2s var(--ease); }
.hg-tour-tabs a:hover { color: var(--color-primary); }

.hg-total-widget,
.hg-booking {
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(26, 60, 52, .07);
}

/* Option / bus cards: feedback chạm rõ hơn */
.hg-option-card,
.hg-bus-item { transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.hg-option-card:hover,
.hg-bus-item:hover { transform: translateY(-2px); }
.hg-option-card.is-active,
.hg-bus-item.is-active { box-shadow: 0 6px 18px rgba(255,107,0,.16); }

/* Counter +/- mượt */
.hg-counter button { transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease); }
.hg-counter button:active:not(:disabled) { transform: scale(.9); }

/* Form field focus đồng nhất */
.hg-field input:focus,
.hg-field select:focus,
.hg-field textarea:focus,
.hg-booking__form input:focus,
.hg-booking__form select:focus,
.hg-booking__form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--ring);
}

/* ----------------------- CTA: gradient thương hiệu ---------------------- */
.hg-cta::before {
    background:
        linear-gradient(135deg, rgba(26,60,52,.78), rgba(255,107,0,.42)),
        rgba(0,0,0,.18);
}

/* ----------------------- Footer: link hover trượt ----------------------- */
.hg-footer ul li a { transition: color .2s var(--ease), padding-left .2s var(--ease); }
.hg-footer ul li a:hover { padding-left: 5px; }
.hg-socials a { transition: background .25s var(--ease), transform .25s var(--ease); }
.hg-socials a:hover { transform: translateY(-3px); }

/* ----------------------- Scrollbar (webkit) ----------------------------- */
.hagiang-theme ::-webkit-scrollbar { width: 11px; height: 11px; }
.hagiang-theme ::-webkit-scrollbar-thumb {
    background: #d9d0c0;
    border-radius: 999px;
    border: 3px solid var(--color-bg);
}
.hagiang-theme ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ----------------------- Chuyển động: tôn trọng prefers-reduced ---------- */
@media (prefers-reduced-motion: reduce) {
    .hagiang-theme *,
    .hg-button::after { transition: none !important; animation: none !important; }
}

/* ----------------------- Tinh chỉnh responsive nhỏ ---------------------- */
@media (max-width: 992px) {
    .hg-section { padding: clamp(56px, 9vw, 80px) 0; }
    .hg-section__head { margin-bottom: 36px; }
}
@media (max-width: 600px) {
    .hg-hero { min-height: 78vh; }
    .hg-hero p { font-size: 1.05rem; }
    .hg-button { padding: 13px 26px; font-size: .85rem; }
}