/*
 * Thanh Giang — shared quick-filter color system.
 * Structural layout remains in home-v4.css / all-orders.css.
 * This file only unifies visual behavior that must be identical everywhere.
 */

.tg-shared-job-filter .tg-shared-quick-chip{
	transition:
		transform .16s ease,
		box-shadow .16s ease,
		background-color .16s ease,
		border-color .16s ease,
		color .16s ease;
}

.tg-shared-job-filter .tg-shared-quick-chip:hover:not(:disabled){
	transform:translateY(-1px);
}

.tg-shared-job-filter .tg-shared-chip-all{
	background:#fff1f2!important;
	border-color:#fda4af!important;
	color:#be123c!important;
}

.tg-shared-job-filter .tg-shared-chip-all:hover:not(:disabled){
	background:#ffe4e6!important;
	border-color:#fb7185!important;
}

.tg-shared-job-filter .tg-shared-chip-open{
	background:#ecfdf5!important;
	border-color:#6ee7b7!important;
	color:#047857!important;
}

.tg-shared-job-filter .tg-shared-chip-open.is-active{
	background:#10b981!important;
	border-color:#10b981!important;
	color:#fff!important;
	box-shadow:0 5px 14px rgba(16,185,129,.20)!important;
}

.tg-shared-job-filter .tg-shared-country-chip{
	background:var(--tg-chip-bg)!important;
	border-color:var(--tg-chip-border)!important;
	color:var(--tg-chip-text)!important;
}

.tg-shared-job-filter .tg-shared-country-chip:hover:not(:disabled){
	border-color:var(--tg-chip-active)!important;
	box-shadow:0 5px 14px color-mix(in srgb,var(--tg-chip-active) 18%,transparent)!important;
}

.tg-shared-job-filter .tg-shared-country-chip.is-active{
	background:var(--tg-chip-active)!important;
	border-color:var(--tg-chip-active)!important;
	color:#fff!important;
	box-shadow:0 5px 14px color-mix(in srgb,var(--tg-chip-active) 24%,transparent)!important;
}

.tg-shared-job-filter .tg-shared-country-chip.is-active .tg-facet-chip-count{
	color:inherit;
	opacity:.88;
}

@supports not (color:color-mix(in srgb,#000 10%,transparent)){
	.tg-shared-job-filter .tg-shared-country-chip:hover:not(:disabled),
	.tg-shared-job-filter .tg-shared-country-chip.is-active{
		box-shadow:0 5px 14px rgba(15,45,78,.12)!important;
	}
}


/* Archive/search structural layout — moved from archive renderer to shared asset. */
.tg-archive-v4-filter-shell{width:min(1240px,calc(100% - 40px));margin:24px auto 28px;font-family:Roboto,Arial,Helvetica,sans-serif}.tg-archive-v4-filter-shell *{box-sizing:border-box}.tg-archive-v4-filter{position:relative;padding:18px;border:1px solid #dbe8f7;border-top:4px solid transparent;border-radius:18px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#0757c7,#7c3aed,#ef233c,#ffb703) border-box;box-shadow:0 18px 48px rgba(18,55,99,.13)}.tg-archive-v4-filter .tg-v2-filter-grid{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(155px,1fr)) auto;gap:10px;align-items:end}.tg-archive-v4-filter .tg-v2-field{display:block;min-width:0;margin:0}.tg-archive-v4-filter .tg-v2-field>span{display:block;margin:0 0 6px;color:#53627a;font-size:13px;font-weight:600}.tg-archive-v4-filter input,.tg-archive-v4-filter select{width:100%;height:46px;margin:0;padding:0 12px;color:#1f2937;background:#fff;border:1px solid #d9e2ee;border-radius:10px;outline:0;font-size:15px}.tg-archive-v4-filter input:focus,.tg-archive-v4-filter select:focus{border-color:#76a8ea;box-shadow:0 0 0 3px rgba(7,87,199,.08)}.tg-archive-v4-filter .tg-v2-input-wrap{position:relative}.tg-archive-v4-filter .tg-v2-input-wrap input{padding-right:38px}.tg-archive-v4-filter .tg-v2-search-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#6e7d92;font-size:21px;pointer-events:none}.tg-archive-v4-filter .tg-v2-search-button{height:46px;padding:0 22px;border:0;border-radius:10px;color:#fff;background:linear-gradient(135deg,#ef233c,#f97316);font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:0 10px 24px rgba(239,35,60,.24)}.tg-archive-v4-filter .tg-v2-quick-row{display:flex;gap:10px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid #edf1f6}.tg-archive-v4-filter .tg-v2-quick-label{color:#6b7789;font-size:13px;font-weight:700;white-space:nowrap}.tg-archive-v4-filter .tg-v2-quick-chips{display:flex;flex:1;gap:8px;flex-wrap:wrap}.tg-archive-v4-filter .tg-v2-chip,.tg-archive-v4-filter .tg-v2-advanced-toggle,.tg-archive-v4-filter .tg-v2-clear-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border:1px solid #dce5f0;background:#fff;color:#41516a;border-radius:9px;padding:7px 13px;font-size:13px;line-height:1.1;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(15,45,78,.04)}.tg-archive-v4-filter .tg-v2-chip:hover{color:#0757c7;background:#eef6ff;border-color:#9cc8ff}.tg-archive-v4-filter .tg-v2-chip.is-active{color:#fff;background:#10b981;border-color:#10b981}.tg-archive-v4-filter .tg-v2-dot{display:inline-block;width:6px;height:6px;background:#087f5b;border-radius:50%}.tg-archive-v4-filter .tg-v2-chip-flag{font-size:18px;line-height:1}.tg-archive-v4-filter .tg-v2-advanced-toggle{margin-left:auto;color:#0757c7;background:#eef6ff;border-color:#9cc8ff}.tg-archive-v4-filter .tg-v2-advanced-toggle:after{content:"";width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}.tg-archive-v4-filter .tg-v2-advanced-toggle[aria-expanded="true"]:after{margin-top:4px;transform:rotate(225deg)}.tg-archive-v4-filter .tg-v2-clear-button{color:#7a4b00;background:linear-gradient(135deg,#ffd75a,#ffb703);border-color:#e0a100}.tg-archive-v4-filter .tg-v2-advanced-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px -4px -4px;padding:18px;border:1px solid #e0e8f3;border-radius:14px;background:linear-gradient(135deg,#f6fbff,#fbf9ff,#fffdf5)}.tg-archive-v4-filter .tg-v2-advanced-filters[hidden]{display:none!important}@media(max-width:1100px){.tg-archive-v4-filter .tg-v2-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tg-archive-v4-filter .tg-v2-field-keyword,.tg-archive-v4-filter .tg-v2-search-button{grid-column:1/-1}.tg-archive-v4-filter .tg-v2-advanced-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:767px){.tg-archive-v4-filter-shell{width:min(100% - 24px,1240px);margin:16px auto 22px}.tg-archive-v4-filter{padding:11px;border-radius:13px}.tg-archive-v4-filter .tg-v2-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tg-archive-v4-filter .tg-v2-field-keyword,.tg-archive-v4-filter .tg-v2-search-button{grid-column:1/-1}.tg-archive-v4-filter input,.tg-archive-v4-filter select{height:40px;padding:0 8px;font-size:14px;border-radius:8px}.tg-archive-v4-filter .tg-v2-field>span{font-size:12px;margin-bottom:4px}.tg-archive-v4-filter .tg-v2-search-button{height:41px;border-radius:8px}.tg-archive-v4-filter .tg-v2-quick-row{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:8px;margin-top:10px;padding-top:10px}.tg-archive-v4-filter .tg-v2-quick-label{display:none}.tg-archive-v4-filter .tg-v2-quick-chips{grid-column:1/-1;grid-row:1;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.tg-archive-v4-filter .tg-v2-quick-chips::-webkit-scrollbar{display:none}.tg-archive-v4-filter .tg-v2-chip{flex:0 0 auto;padding:6px 9px;font-size:10px}.tg-archive-v4-filter .tg-v2-advanced-toggle{grid-column:1;grid-row:2;width:100%;height:34px;min-height:34px;margin:0;padding:0 10px;border-radius:8px;font-size:10px}.tg-archive-v4-filter .tg-v2-clear-button{grid-column:2;grid-row:2;width:104px;min-width:104px;max-width:104px;height:34px;min-height:34px;margin:0;padding:0 8px;border-radius:8px;font-size:10px}.tg-archive-v4-filter .tg-v2-advanced-filters{grid-template-columns:1fr;margin:10px 0 0;padding:12px;gap:9px}}@media(max-width:370px){.tg-archive-v4-filter .tg-v2-filter-grid{grid-template-columns:1fr}.tg-archive-v4-filter .tg-v2-field-keyword,.tg-archive-v4-filter .tg-v2-search-button{grid-column:1}.tg-archive-v4-filter .tg-v2-quick-row{grid-template-columns:minmax(0,1fr) 98px}.tg-archive-v4-filter .tg-v2-clear-button{width:98px;min-width:98px;max-width:98px}}

/* Facet state styles: static CSS avoids creating a <style> node at runtime. */
form[data-tg-facets="1"] option:disabled{color:#a6afbd;background:#f4f6f8}
form[data-tg-facets="1"] button.is-disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.35)}
form[data-tg-facets="1"] .is-facet-hidden{display:none!important}
.tg-facet-chip-count{font-variant-numeric:tabular-nums;opacity:.82}


/* TG filter AJAX status — prominent viewport-centred feedback for auto-filter pages. */
.tg-shared-job-filter .tg-filter-loading-notice{
    position:fixed!important;
    z-index:999999!important;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-width:min(360px,calc(100vw - 36px));
    min-height:74px;
    padding:16px 22px;
    border:1px solid rgba(7,87,199,.18);
    border-radius:18px;
    background:rgba(255,255,255,.98);
    color:#0757c7;
    box-shadow:0 22px 70px rgba(18,55,99,.30),0 0 0 9999px rgba(8,24,48,.10);
    font-size:16px;
    font-weight:850;
    line-height:1.25;
    text-align:center;
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,-50%) scale(.94);
    pointer-events:none;
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
    backdrop-filter:blur(10px);
}
.tg-shared-job-filter .tg-filter-loading-notice.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}
.tg-shared-job-filter .tg-filter-loading-spinner{
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:50%;
    border:3px solid rgba(7,87,199,.16);
    border-top-color:#0757c7;
    border-right-color:#ef233c;
    animation:tgFilterLoadingSpin .68s linear infinite;
}
@keyframes tgFilterLoadingSpin{to{transform:rotate(360deg)}}
@media(max-width:767px){
    .tg-shared-job-filter .tg-filter-loading-notice{
        min-width:min(320px,calc(100vw - 28px));
        min-height:68px;
        padding:14px 18px;
        border-radius:16px;
        font-size:14px;
        gap:12px;
    }
    .tg-shared-job-filter .tg-filter-loading-spinner{
        width:27px;
        height:27px;
        flex-basis:27px;
    }
}
@media(prefers-reduced-motion:reduce){
    .tg-shared-job-filter .tg-filter-loading-spinner{animation:none}
    .tg-shared-job-filter .tg-filter-loading-notice{transition:none}
}