/* Kho Pha Chế Sao Vàng — trang trong (cửa hàng, chi tiết, công thức, liên hệ) theo mockup Astra (10-08) */
.svi-wrap { max-width: 1320px; margin: 0 auto; padding: 0 15px; position: relative; }
.svi-h1 { color: #1F1E1F !important; font-size: 50px !important; font-weight: 700 !important; line-height: 1.15 !important; margin: 0 0 8px !important; letter-spacing: -.5px; }
.svi-h2 { color: #1F1E1F !important; font-size: 32px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 0 8px !important; }
.svi-hsub { color: #333; font-size: 21px; } .svi-sub { color: #555; font-size: 16px; margin-bottom: 16px; } .svi-mt { margin-top: 36px !important; }
.svi-crumb { color: #777; font-size: 14.5px; margin-bottom: 10px; } .svi-crumb a { color: #777 !important; } .svi-crumb span { margin: 0 8px; }
.svi-eb { color: #EA6A12; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.svi-badge { display: inline-block; background: #FFD12E; color: #1F1E1F; font-size: 14px; font-weight: 700; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; margin-bottom: 12px; }
.svi-ico { display: inline-block; width: 24px; height: 24px; background: center / contain no-repeat; flex: 0 0 auto; }
.svi-btn-d { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; background: #1F1E1F !important; color: #fff !important; border: 0; border-radius: 4px; font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0; }
.svi-btn-y { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; background: #FFD12E; color: #1F1E1F !important; border-radius: 4px; font-size: 18px; font-weight: 700; }
.svi-lk, .svi-more { color: #EA6A12 !important; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.svi-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; } .svi-head .svi-h2 { margin: 0 !important; }
.svi-sec { background: #fff; padding: 30px 0 40px; }
/* cửa hàng */
.svi-hero { background: #F6F5F2; padding: 22px 0 22px; } .svi-hero .svi-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.svi-whole { color: #EA6A12 !important; font-size: 21px; font-weight: 700; }
.svi-shop-w { background: #fff; padding: 20px 0 40px; } .svi-shop { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
.svi-filter { border: 1px solid #ECEAE5; border-radius: 4px; padding: 20px 20px 22px; } .svi-filter h3 { color: #1F1E1F; font-size: 21px; font-weight: 700; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #ECEAE5; } .svi-filter h4 { color: #1F1E1F; font-size: 18px; font-weight: 700; margin: 6px 0 12px; }
.svi-filter ul { list-style: none; margin: 0 0 16px !important; padding: 0 0 16px; border-bottom: 1px solid #ECEAE5; } .svi-filter li { margin: 0 0 11px !important; } .svi-filter li a { display: flex; align-items: center; gap: 12px; color: #333 !important; font-size: 16px; } .svi-filter li a i { width: 18px; height: 18px; border: 1.5px solid #BDBDBD; border-radius: 2px; flex: 0 0 auto; } .svi-filter li a.is-on { font-weight: 700; color: #1F1E1F !important; } .svi-filter li a.is-on i { background: #FFD12E; border-color: #E8B800; }
.svi-fnote { color: #555; font-size: 15px; }
.svi-help { display: flex; gap: 14px; margin-top: 16px; background: #FFF4CC; border-radius: 4px; padding: 20px; } .svi-help .svi-ico { width: 40px; height: 40px; } .svi-help b { display: block; color: #1F1E1F; font-size: 18px; } .svi-help div { color: #444; font-size: 14.5px; line-height: 1.5; } .svi-help span { display: block; color: #1F1E1F; font-size: 24px; font-weight: 700; margin-top: 8px; }
.svi-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: #555; font-size: 15px; } .svi-bar .woocommerce-ordering { margin: 0; } .svi-bar select { margin: 0; height: 38px; font-size: 14px; box-shadow: none; }
.svi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .svi-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .svi-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svi-pag ul { display: flex; justify-content: center; gap: 10px; list-style: none; margin: 24px 0 0 !important; padding: 0; } .svi-pag li { margin: 0 !important; } .svi-pag a, .svi-pag span { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid #DDD; border-radius: 4px; color: #1F1E1F !important; } .svi-pag .current { background: #FFD12E; border-color: #FFD12E; }
/* chi tiết */
.svi-pcrumb { color: #777; font-size: 14.5px; padding-top: 16px; padding-bottom: 14px; } .svi-pcrumb a { color: #777 !important; } .svi-pcrumb span { margin: 0 8px; }
.svi-psec { background: #fff; padding-bottom: 20px; } .svi-prod { display: grid; grid-template-columns: 650px minmax(0, 1fr); gap: 44px; align-items: start; }
.svi-gal { background: #F6F5F2; border-radius: 6px; aspect-ratio: 650 / 545; display: flex; align-items: center; justify-content: center; overflow: hidden; } .svi-gal img { max-width: 100%; max-height: 100%; width: auto; height: auto; mix-blend-mode: multiply; }
.svi-ptitle { color: #1F1E1F !important; font-size: 44px !important; font-weight: 700 !important; line-height: 1.18 !important; margin: 0 0 14px !important; }
.svi-pprice b { color: #1F1E1F; font-size: 36px; font-weight: 700; } .svi-pprice del { color: #999; font-size: 20px; margin-left: 12px; } .svi-pprice { margin-bottom: 12px; }
.svi-short { color: #333; font-size: 17px; line-height: 1.55; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid #ECEAE5; }
.svi-row { display: grid; grid-template-columns: 185px 1fr; align-items: center; margin-bottom: 16px; color: #333; font-size: 17px; } .svi-chip { justify-self: start; border: 2px solid #FFD12E; border-radius: 4px; padding: 6px 18px; font-weight: 700; font-size: 15px; }
.svi-qty { display: inline-flex; border: 1px solid #DDD; height: 42px; justify-self: start; } .svi-qty button { width: 40px; margin: 0; padding: 0; border: 0; background: #fff; font-size: 18px; min-height: 0; color: #1F1E1F; } .svi-qty input { width: 48px; height: 40px; margin: 0; border: 0; border-left: 1px solid #DDD; border-right: 1px solid #DDD; text-align: center; box-shadow: none; }
.svi-cart { margin: 0; } .svi-pbtn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; } .svi-pbtn > * { width: 100%; }
.svi-pbtn .single_add_to_cart_button::before, .svi-pbtn .single_add_to_cart_button::after { content: none !important; }
.svi-advice { text-align: center; color: #444; font-size: 15px; padding: 14px 0 18px; border-bottom: 1px solid #ECEAE5; } .svi-advice b { color: #EA6A12; }
.svi-pben { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 18px; } .svi-pben span { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #333; font-size: 15px; border-left: 1px solid #ECEAE5; } .svi-pben span:first-child { border: 0; } .svi-pben img { width: 40px; height: 40px; }
.svi-tabs { margin-top: 30px; } .svi-tabh { display: flex; } .svi-tab { margin: 0; padding: 0 40px 14px; background: none; border: 0; border-bottom: 3px solid transparent; color: #555; font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: 0; min-height: 0; cursor: pointer; } .svi-tab.is-on { color: #1F1E1F; border-bottom-color: #FFD12E; }
.svi-tbox { border: 1px solid #ECEAE5; border-radius: 4px; padding: 26px 20px 24px; } .svi-pane { display: none; } .svi-pane.is-on { display: block; }
.svi-desc { display: grid; grid-template-columns: 670px minmax(0, 1fr); gap: 46px; } .svi-desc h2 { color: #1F1E1F; font-size: 30px; font-weight: 700; margin: 0 0 8px; } .svi-dlead { color: #333; font-size: 17px; line-height: 1.6; margin: 0 0 16px; }
.svi-dimg img { width: 100%; aspect-ratio: 670 / 275; object-fit: cover; display: block; border-radius: 4px; }
.svi-dspec dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 10px; margin: 30px 0 20px; } .svi-dspec dt { color: #1F1E1F; font-weight: 700; font-size: 15px; text-transform: none; letter-spacing: 0; } .svi-dspec dd { margin: 0; color: #444; font-size: 15px; }
.svi-full { color: #444; font-size: 15px; line-height: 1.65; max-height: 330px; overflow: auto; padding-right: 6px; } .svi-full strong { color: #1F1E1F; }
.svi-rec { display: grid; grid-template-columns: 525px minmax(0, 1fr); gap: 30px; align-items: center; background: #FFF6DD; border-radius: 6px; overflow: hidden; margin-top: 30px; } .svi-rec-img { aspect-ratio: 525 / 260; background: center / cover no-repeat; } .svi-rec h3 { color: #1F1E1F; font-size: 30px; font-weight: 700; margin: 0 0 10px; } .svi-rec p { color: #444; font-size: 16px; margin: 0 0 14px; } .svi-rec > div:last-child { padding-right: 30px; }
.svi-spec { max-width: 720px; } .svi-norev { color: #555; font-size: 16px; }
/* bài công thức */
.svi-post { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; padding-top: 18px; padding-bottom: 20px; align-items: start; }
.svi-ptl { color: #1F1E1F !important; font-size: 52px !important; font-weight: 700 !important; line-height: 1.15 !important; margin: 0 0 10px !important; } .svi-meta { color: #555; font-size: 15px; margin-bottom: 14px; } .svi-meta span { color: #FFC20E; margin: 0 8px; }
.svi-plead { color: #333; font-size: 20px; line-height: 1.5; margin-bottom: 18px; } .svi-pthumb img { width: 100%; aspect-ratio: 930 / 350; object-fit: cover; border-radius: 6px; display: block; }
.svi-content { color: #333; font-size: 16.5px; line-height: 1.65; padding-top: 18px; } .svi-content h2 { color: #1F1E1F; font-size: 30px; font-weight: 700; margin: 28px 0 14px; }
.svi-toc { background: #FFF4CC; border-radius: 6px; padding: 18px 24px; } .svi-toc b { display: block; color: #1F1E1F; font-size: 17px; margin-bottom: 8px; } .svi-toc ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; margin: 0; padding-left: 18px; color: #EA6A12; } .svi-toc li { margin: 0; } .svi-toc a { color: #EA6A12 !important; text-decoration: underline; }
.svi-ing { display: grid; grid-template-columns: 1fr 1fr; background: #FFF4CC; border-radius: 6px; padding: 22px 28px; gap: 50px; } .svi-ing > div + div { border-left: 1px solid #F0D98A; padding-left: 40px; } .svi-ing b { display: block; color: #1F1E1F; font-size: 18px; margin-bottom: 8px; } .svi-ing table { width: 100%; margin: 0; } .svi-ing td { padding: 7px 0; border: 0; border-bottom: 1px solid #F0E3B5; font-size: 16px; } .svi-ing td:last-child { text-align: right; }
.svi-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } .svi-steps figure { margin: 0; } .svi-sn { display: flex; gap: 18px; margin-bottom: 14px; min-height: 110px; } .svi-sn em { font-style: normal; color: #EA6A12; font-size: 30px; font-weight: 700; line-height: 1; } .svi-sn b { display: block; color: #1F1E1F; font-size: 18px; margin-bottom: 4px; } .svi-sn div { color: #555; font-size: 15px; line-height: 1.55; }
.svi-steps img { width: 100%; aspect-ratio: 800 / 540; object-fit: cover; display: block; border-radius: 4px; } .svi-steps figcaption { color: #333; font-size: 14px; padding-top: 6px; }
.svi-tip { background: #FFF4CC; border-left: 4px solid #FFC20E; padding: 18px 24px; margin: 26px 0; color: #444; font-size: 15.5px; } .svi-tip b { display: block; color: #1F1E1F; font-size: 17px; }
.svi-ybox { background: #FFD12E; border-radius: 6px; padding: 24px 24px 22px; margin-bottom: 22px; } .svi-ybox h3 { color: #1F1E1F; font-size: 30px; font-weight: 700; line-height: 1.2; margin: 0 0 10px; } .svi-ybox p { color: #333; font-size: 16px; margin: 0 0 16px; } .svi-ybox .svi-btn-d { height: 48px; font-size: 16px; } .svi-yph { display: flex; align-items: center; gap: 12px; color: #1F1E1F; font-size: 24px; font-weight: 700; margin-top: 16px; } .svi-yph .svi-ico { width: 28px; height: 28px; }
.svi-box { border: 1px solid #ECEAE5; border-radius: 6px; padding: 18px 20px; margin-bottom: 22px; } .svi-box h3 { color: #1F1E1F; font-size: 21px; font-weight: 700; margin: 0 0 10px; }
.svi-mini { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid #ECEAE5; } .svi-mini span { display: block; aspect-ratio: 4 / 3; background: center / cover no-repeat; border-radius: 4px; } .svi-mini b { color: #1F1E1F; font-weight: 400; font-size: 15.5px; }
.svi-cl { list-style: none; margin: 0 !important; padding: 0; } .svi-cl li { margin: 0 !important; border-top: 1px solid #ECEAE5; } .svi-cl a { display: flex; justify-content: space-between; padding: 12px 0; color: #333 !important; font-size: 15.5px; } .svi-cl a::after { content: "›"; color: #777; }
.svi-rps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .svi-rp { display: block; border: 1px solid #ECEAE5; border-radius: 4px; overflow: hidden; padding-bottom: 14px; } .svi-rp span { display: block; aspect-ratio: 16 / 7; background: center / cover no-repeat; } .svi-rp b { display: block; color: #1F1E1F; font-size: 17px; font-weight: 700; margin: 12px 16px 6px; } .svi-rp em { font-style: normal; color: #EA6A12; font-size: 15px; font-weight: 700; margin: 0 16px; text-decoration: underline; }
/* liên hệ */
.section.svi-hero-s { padding: 0 !important; } .svi-hin { padding: 24px 0 10px; }
.section.svi-ct-sec { padding: 10px 0 30px !important; } .svi-ct { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.svi-ctf { background: #fff; border: 1px solid #ECEAE5; border-radius: 6px; padding: 26px 30px; } .svi-ctf h2 { color: #1F1E1F; font-size: 34px; font-weight: 700; margin: 0 0 4px; }
form.svi-cf7, .svi-cf7 .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; } .svi-cf7 .svi-full { grid-column: 1 / -1; } .svi-cf7 .svi-f { margin-bottom: 14px; } .svi-cf7 .svi-lb { display: block; color: #1F1E1F; font-size: 15px; margin-bottom: 6px; } .svi-cf7 .svi-lb em { color: #E53935; font-style: normal; }
.svi-cf7 input[type=text], .svi-cf7 input[type=tel], .svi-cf7 input[type=email], .svi-cf7 select, .svi-cf7 textarea { width: 100%; height: 44px; margin: 0 !important; border: 1px solid #DDD !important; border-radius: 4px !important; box-shadow: none !important; font-size: 15px !important; padding: 0 14px !important; } .svi-cf7 textarea { height: 104px; padding-top: 10px !important; }
.svi-cf7 input[type=submit] { grid-column: 1 / -1; justify-self: start; height: 46px; padding: 0 34px !important; margin: 0 !important; border: 0; border-radius: 4px; background: #1F1E1F !important; color: #fff; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.svi-cf7 .wpcf7-response-output { grid-column: 1 / -1; } .svi-cf7 .wpcf7-spinner { position: absolute; } .svi-cf7 br { display: none; } .svi-cf7 p { margin: 0; display: contents; }
.svi-note { display: flex; gap: 8px; align-items: center; color: #555; font-size: 14px; margin-top: 12px; } .svi-note .svi-ico { width: 16px; height: 16px; }
.svi-ci { display: flex; gap: 24px; align-items: center; background: #fff; border: 1px solid #ECEAE5; border-radius: 6px; padding: 20px 22px; margin-bottom: 14px; } .svi-ci > span { flex: 0 0 72px; height: 72px; border-radius: 50%; background: #FFF4CC; display: flex; align-items: center; justify-content: center; } .svi-ci > span img { width: 36px; height: 36px; }
.svi-ci em { display: block; font-style: normal; color: #333; font-size: 16px; } .svi-ci-b { color: #1F1E1F !important; font-size: 30px; font-weight: 700; } .svi-ci-m { color: #1F1E1F !important; font-size: 19px; font-weight: 700; white-space: nowrap; } .svi-ci b { color: #1F1E1F; font-size: 18px; font-weight: 500; }
.svi-ci-y { background: #FFF4CC; border-color: #FFF4CC; } .svi-ci-y > span { background: #FFE58A; } .svi-ci-h { display: block; font-size: 21px !important; font-weight: 700 !important; margin-bottom: 6px; } .svi-hrs { display: grid; grid-template-columns: auto auto; gap: 4px 22px; color: #1F1E1F; font-size: 17px; }
.section.svi-map-sec { padding: 30px 0 16px !important; } .svi-map iframe { width: 100%; height: 260px; border: 0; border-radius: 6px; display: block; }
.section.svi-ws-sec { padding: 14px 0 20px !important; } .svi-ws { display: grid; grid-template-columns: minmax(0, 1fr) 760px; gap: 30px; background: #FFF6DD; border-radius: 6px; padding: 26px 30px; align-items: center; } .svi-ws-l .svi-h2 { font-size: 38px !important; } .svi-ws-f { background: #fff; border-radius: 6px; padding: 18px 22px; }
.svi-ticks { list-style: none; margin: 14px 0 0 !important; padding: 0; } .svi-ticks li { display: flex; gap: 14px; align-items: center; color: #333; font-size: 17px; margin: 0 0 12px !important; } .svi-ticks i { width: 26px; height: 26px; border-radius: 50%; background: #FFC20E url(icons/tick-w.png) center / 14px no-repeat; flex: 0 0 auto; }
.section.svi-faq-sec { padding: 20px 0 40px !important; } .svi-faq { border: 1px solid #ECEAE5; border-radius: 6px; } .svi-fq { border-top: 1px solid #ECEAE5; } .svi-fq:first-child { border: 0; }
.svi-fq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 16px 20px; color: #1F1E1F; font-size: 18px; font-weight: 500; } .svi-fq summary::-webkit-details-marker { display: none; } .svi-fq summary::before { content: "+"; display: flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; } .svi-fq[open] summary::before { content: "–"; background: #FFD12E; }
.svi-fq > div { padding: 0 20px 16px 64px; color: #555; font-size: 15.5px; }
footer li, .svi-ci * { min-width: 0; }
@media (max-width: 1240px) { .svi-prod, .svi-desc { grid-template-columns: 1fr 1fr; } .svi-ct { grid-template-columns: 1fr 360px; } .svi-ws { grid-template-columns: 1fr 1fr; } .svi-ci-m { font-size: 16px; } .svi-rec { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1023px) { .svi-shop { grid-template-columns: 1fr; } .svi-grid, .svi-grid4, .svi-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svi-post { grid-template-columns: 1fr; } .svi-ct, .svi-ws { grid-template-columns: 1fr; } }
@media (max-width: 849px) {
  .svi-h1 { font-size: 34px !important; } .svi-h2, .svi-ws-l .svi-h2 { font-size: 25px !important; } .svi-ptitle, .svi-ptl { font-size: 30px !important; } .svi-hsub { font-size: 17px; } .svi-hero .svi-wrap { flex-direction: column; align-items: flex-start; }
  .svi-prod, .svi-desc, .svi-rec, .svi-steps, .svi-ing, .svi-rps, form.svi-cf7, .svi-cf7 .wpcf7-form, .svi-toc ul { grid-template-columns: 1fr; } .svi-ing > div + div { border: 0; padding: 0; } .svi-rec > div:last-child { padding: 0 18px 18px; }
  .svi-pbtn { grid-template-columns: 1fr; } .svi-row { grid-template-columns: 140px 1fr; } .svi-tab { padding: 0 14px 12px; font-size: 16px; } .svi-tbox { padding: 18px 14px; }
  .svi-ci-m { white-space: normal; overflow-wrap: anywhere; } .svi-ci > span { flex-basis: 56px; height: 56px; } .svi-head { flex-direction: column; align-items: flex-start; gap: 6px; } .svi-sn { min-height: 0; }
}
@media (max-width: 1023px) { .svi-filter ul { display: flex; flex-wrap: wrap; gap: 8px 16px; } .svi-filter li { margin: 0 !important; } .svi-filter h4:nth-of-type(2), .svi-fnote, .svi-help { display: none; } }