/* Top bar and search suggestions, based on the user's recording. */
.site-header{position:relative;background:linear-gradient(110deg,#2d8c68,#207556);color:#fff;margin:8px 12px 0;border-radius:16px 16px 0 0}
.site-header .container,.catalog-nav .container{width:calc(100% - 40px)}
.masthead{height:134px;gap:20px;position:relative}
.brand-animated{--mark:64px;--word:230px;gap:7px;min-width:0;flex-shrink:0;align-items:center}
.brand-symbol,.brand-wordmark{display:block;flex-shrink:0;background-image:url('/assets/logo-thao-nguyen-ruc-ro.png');background-repeat:no-repeat}
/* Source flower rectangle: x72 y108 w444 h444. Its right edge is before
   the first wordmark pixel at x518, so a letter fragment cannot rotate with it. */
.brand-symbol{width:var(--mark);height:var(--mark);background-size:489.189189% 163.063063%;background-position:4.166667% 38.571429%;transform-origin:50.675676% 49.099099%;backface-visibility:hidden;will-change:transform,opacity;animation:brand-arrive 2.2s .08s cubic-bezier(.4,0,.2,1) backwards,brand-spin 18s 2.28s linear infinite;transition:filter .25s ease}
/* Wordmark rectangle: x512 y156 w1584 h428, kept proportional. */
.brand-wordmark{width:var(--word);height:calc(var(--word)*.27020202);background-size:137.121212% 169.158879%;background-position:87.07483% 52.702703%;animation:brand-name-arrive 1.6s .4s cubic-bezier(.4,0,.2,1) backwards}
.brand-animated:is(:hover,:focus-visible) .brand-symbol{filter:brightness(1.07)}
@keyframes brand-arrive{from{opacity:0;transform:translate3d(0,0,0) rotate(-150deg) scale(.98)}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}}
@keyframes brand-name-arrive{from{opacity:0;transform:translate3d(-5px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes brand-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
footer .footer-brand.brand-animated{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.55fr);align-items:center;gap:6px;width:280px;max-width:100%;margin-bottom:12px;background:none;font-size:0}
.footer-brand .brand-symbol{width:100%;height:auto;aspect-ratio:1}
.footer-brand .brand-wordmark{width:100%;height:auto;aspect-ratio:1584/428}
html[data-theme=neon] footer .footer-brand.brand-animated{width:280px;max-width:100%;grid-template-columns:minmax(0,1fr) minmax(0,3.55fr);gap:6px}
.header-search{position:relative;flex:1;min-width:180px}
.search-form{width:100%;max-width:none;flex:none;background:#fff;height:48px;border:1px solid #ffffffb3;transition:box-shadow .2s ease,border-color .2s ease}
.search-form:hover{border-color:#abd7c4;box-shadow:0 0 0 3px #ffffff1f}
.search-form:focus-within{border-color:#8bbba7;box-shadow:0 0 0 4px #ffffff30}
.search-form button{color:#518d76;width:44px;height:46px;transition:color .2s,background .2s}
.search-form button:is(:hover,:focus-visible){background:#edf6f1;color:#1b7554}
.search-form .icon{width:20px;height:20px}
.search-form input[type=search]{padding:10px 12px 10px 0;color:#263c32;font-size:15px}
.search-form input::placeholder{color:#8b9690;opacity:1}
.search-form input::-webkit-search-cancel-button{display:none}
.search-form .search-clear{width:36px;height:36px;border-radius:50%;margin-right:5px;flex-shrink:0}
.search-clear .icon{width:16px;height:16px}
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-action{display:flex;align-items:center;gap:9px;border:1px solid #ffffff30;border-radius:16px;background:#ffffff0c;padding:11px 12px;white-space:nowrap;color:#fff;transition:background .2s ease,border-color .2s ease}
.header-action>.icon{width:28px;height:28px;color:#c4e2d2;transition:transform .25s ease,color .2s ease}
.header-action b,.header-action small{display:block;color:inherit}
.header-action b{font-size:11px;line-height:1.4;font-weight:700}
.header-action small{font-size:12px;line-height:1.45;color:#d1e6dc}
.header-action:is(:hover,:focus-visible){color:#fff;background:#ffffff20;border-color:#ffffff70}
.header-action:is(:hover,:focus-visible)>.icon{transform:rotate(-8deg);color:#fff}
.header-actions .quote-link{display:flex;width:46px;height:46px;border-radius:14px;background:#ffffff0c;border:1px solid #ffffff35;color:#fff;transition:background .2s,border-color .2s}
.header-actions .quote-link:hover{background:#ffffff25;border-color:#ffffff80;color:#fff}
.header-actions .quote-link span{background:#ffdc3e;color:#1e614a;border:0;right:-6px;top:-8px;min-width:22px;height:22px;line-height:22px;font-weight:700}
.catalog-nav{margin:0 12px;width:calc(100% - 24px)}
.site-header:has(.search-popover:not([hidden])){z-index:72}
.search-backdrop{position:fixed;inset:0;z-index:70;background:#172b2642;cursor:default;animation:search-shade .15s ease}
.search-backdrop[hidden],.search-popover[hidden],.search-recent[hidden],.search-clear[hidden]{display:none!important}
.search-popover{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:2;max-height:min(65dvh,570px);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#4e5360;border:1px solid #e9eeeb;border-radius:18px;padding:20px 17px 0;box-shadow:0 18px 50px #12352626;scrollbar-width:thin;scrollbar-color:#cfd9d3 transparent;animation:search-open .16s ease-out;scroll-padding:16px}
.search-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.search-section-title h2{font-size:12px;line-height:1.5;font-weight:700;color:#8d9299;display:flex;gap:7px;align-items:center;margin:0;letter-spacing:.15px}
.search-section-title .icon{width:15px;height:15px;color:#a1a7a3}
.clear-search-history{color:#909694;font-size:12px;padding:3px 0 3px 10px}
.clear-search-history:is(:hover,:focus-visible){color:#207f5d}
.search-recent{padding-bottom:18px;border-bottom:1px solid #f0f2f1;margin-bottom:18px}
.search-history{display:flex;gap:7px;flex-wrap:wrap}
.search-history button{padding:5px 12px;font-size:13px;line-height:1.5;background:#f5f6f7;color:#737c77;border:1px solid transparent;border-radius:20px;transition:color .18s,background .18s,border-color .18s}
.search-history button:is(:hover,:focus-visible){background:#edf6f1;color:#207f5d;border-color:#b8d8c8}
.search-suggestions{display:grid;gap:3px}
.search-suggestion{display:flex;align-items:center;gap:12px;padding:9px 7px;margin:0 -7px;border-radius:11px;transition:background .18s ease,color .18s ease}
.search-suggestion>img{height:54px;width:54px;border-radius:9px;object-fit:cover;flex-shrink:0}
.search-suggestion>span{min-width:0;flex:1}
.search-suggestion b{font-size:15px;line-height:1.4;display:block;font-weight:400;color:#4e5360;transition:color .18s}
.search-suggestion small{display:block;font-size:12px;line-height:1.45;color:#909592;margin-top:3px}
.search-suggestion>.icon{width:16px;height:16px;color:#a4b3aa;transition:color .18s,transform .18s}
.search-suggestion:is(:hover,:focus-visible){background:#f0f7f3;color:#207f5d;outline-color:#207f5d;outline-offset:-2px}
.search-suggestion:is(:hover,:focus-visible) b,.search-suggestion:is(:hover,:focus-visible)>.icon{color:#207f5d}
.search-suggestion:is(:hover,:focus-visible)>.icon{transform:translateX(3px)}
.search-view-all{display:flex;align-items:center;justify-content:center;gap:9px;position:sticky;bottom:0;margin:12px -17px 0;background:#fff;border-top:1px solid #edf1ee;padding:13px 15px;font-size:13px;font-weight:700;color:#207f5d;transition:background .18s}
.search-view-all:hover{background:#f0f7f3;color:#176648}
.search-view-all .icon{width:16px;height:16px}
.search-no-results{padding:20px 4px;color:#737d77;font-size:14px;line-height:1.6;margin:0}
@keyframes search-open{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes search-shade{from{opacity:0}to{opacity:1}}
@media(min-width:1001px) and (max-width:1179px){.header-zalo{display:none}.brand-animated{--mark:60px;--word:215px}.masthead{gap:16px}}
@media(max-width:1000px){
 .site-header{margin:0;border-radius:0}.site-header .container{width:calc(100% - 32px)}
 .masthead{height:auto;padding:18px 0 17px;display:grid;grid-template-columns:34px minmax(0,1fr) 40px;gap:16px 10px}
 .brand-animated{--mark:50px;--word:184px;gap:5px;justify-self:center}.masthead>.mobile-menu{display:flex;color:#fff;width:34px;height:38px;align-items:center;justify-content:center}
 .header-actions{display:block;justify-self:end;grid-column:3;grid-row:1}.header-action{display:none}.header-actions .quote-link{width:40px;height:40px;border-radius:12px}
 .header-search{grid-column:1/-1;width:100%;min-width:0}.search-form{height:46px;max-width:none}.search-form button{height:44px}.search-form input[type=search]{font-size:15px}
 .search-popover{top:calc(100% + 9px);max-height:min(65dvh,560px);padding:18px 15px 0;border-radius:16px}.search-view-all{margin-left:-15px;margin-right:-15px}
 .catalog-nav{margin:0;width:100%}
}
@media(max-width:400px){.brand-animated{--mark:46px;--word:172px}.masthead{gap:15px 6px}.site-header .container{width:calc(100% - 28px)}}
@media(max-width:360px){.brand-animated{--mark:42px;--word:154px}.search-suggestion{gap:10px}.search-suggestion b{font-size:14px}.search-suggestion small{font-size:11px}}
@media(prefers-reduced-motion:reduce){.brand-symbol,.brand-wordmark,.search-popover,.search-backdrop{animation:none}.brand-symbol,.search-form,.header-action,.header-action>.icon,.quote-link,.search-suggestion,.search-suggestion b,.search-suggestion>.icon,.search-history button,.search-view-all{transition:none}}
/* A diagonal light pass is masked to the real logo lettering. */
.brand-wordmark{position:relative}
.brand-wordmark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mask-image:var(--logo-shine-image,url('/assets/logo-thao-nguyen-ruc-ro.png'));mask-size:var(--logo-shine-size,137.121212% 169.158879%);mask-position:var(--logo-shine-position,87.07483% 52.702703%);mask-repeat:no-repeat;background:linear-gradient(115deg,transparent 42%,#ffffff12 46%,#fff 49%,#ffffff30 51%,transparent 56%);background-size:300% 100%;background-position:150% 0;mix-blend-mode:screen;animation:logo-light-sweep var(--logo-shine-seconds,6s) var(--logo-shine-delay,2.7s) cubic-bezier(.35,0,.25,1) infinite}
@keyframes logo-light-sweep{0%,12%{background-position:150% 0;opacity:0}20%{opacity:var(--logo-shine-opacity,.8)}62%{background-position:-50% 0;opacity:var(--logo-shine-opacity,.8)}72%,100%{background-position:-50% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.brand-wordmark::after{display:none}}