/* Gạch Nhập Khẩu Thạch Lâm (gach) — trang trong theo mockup Astra đợt 7 (giới thiệu x1.589, thư viện x1.352, SP x1.739, liên hệ x1.483) */
.gli-page { background: #fff; }
.gli-w { max-width: 1352px; margin: 0 auto; }
@media (max-width: 1399px) { .gli-w { padding-left: 24px; padding-right: 24px; } }
.gli-page img[src=""] { visibility: hidden; }
.gli-g { color: var(--gl-g) !important; font-weight: 600; }
.gli-crumb { display: flex; align-items: center; flex-wrap: wrap; font-size: 15.5px; line-height: 22px; color: #4A504D; padding: 22px 0 6px; }
.gli-crumb a { color: inherit !important; } .gli-crumb i { font-style: normal; margin: 0 10px; color: #8A908D; }
.gli-crumb > img { width: 17px; height: 17px; margin-right: 8px; }
.gli-h1 { color: var(--gl-g) !important; font-size: 52px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -.02em; margin: 6px 0 4px !important; }
.gli-lead { color: #4A504D; font-size: 20px; line-height: 30px; }
.gli-h2 { color: var(--gl-g) !important; font-size: 42px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -.015em; margin: 0 !important; }
.gli-sub { color: #4A504D; font-size: 18px; line-height: 27px; margin-top: 6px; }
.gli-eye { color: var(--gl-g); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px; }
.gli-band { background: var(--gl-stone); padding-bottom: 28px; }
.gli-why { padding: 26px 0 40px; }
.gli-why .gl-h2 { font-size: 42px !important; line-height: 52px !important; }
/* ---------- giới thiệu ---------- */
.gla-band { padding-bottom: 28px; }
.gla-hero { position: relative; height: 405px; overflow: hidden; background: #E4E3DF; }
.gla-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.gla-hero span { position: absolute; left: max(24px, calc(50% - 676px)); bottom: 22px; color: #fff; font-size: 16px; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.gla-story { display: grid; grid-template-columns: minmax(0, 1fr) 667px; gap: 40px; align-items: center; padding: 30px 0 34px; }
.gla-story .gli-h2 { font-size: 44px !important; line-height: 52px !important; margin-bottom: 18px !important; }
.gla-txt p { color: #3E4441; font-size: 17.5px; line-height: 28px; margin: 0 0 14px !important; } .gla-txt p b { color: #1D2321; }
.gla-origins { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.gla-origins span { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 38px; border: 1.5px solid var(--gl-g); border-radius: 6px; color: var(--gl-g); font-size: 17px; font-weight: 600; }
.gla-img { aspect-ratio: 667 / 458; overflow: hidden; background: #E4E3DF; } .gla-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gla-vals { background: var(--gl-stone); padding: 34px 0 34px; }
.gla-vg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.gla-v { background: #fff; border-radius: 6px; padding: 26px 20px 30px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.gla-v img { width: 78px; height: 78px; display: block; margin: 0 auto 12px; }
.gla-v h3 { color: var(--gl-g) !important; font-size: 27px !important; font-weight: 700 !important; line-height: 34px !important; margin: 0 0 10px !important; }
.gla-v div { color: #5B615E; font-size: 18px; line-height: 29px; }
.gla-team { padding: 40px 0 10px; }
.gla-tg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.gla-t { display: block; position: relative; color: #fff !important; }
.gla-t img { width: 100%; height: 240px; object-fit: cover; display: block; }
.gla-t span { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 26px; background: var(--gl-g); font-size: 19px; font-weight: 600; }
.gla-t span i { font-style: normal; font-size: 22px; }
.gla-commit { padding: 40px 0 40px; }
.gla-cg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
.gla-c { text-align: center; padding: 0 16px; } .gla-c + .gla-c { border-left: 1px solid #DADAD6; }
.gla-c img { width: 72px; height: 72px; display: block; margin: 0 auto 14px; }
.gla-c h3 { color: var(--gl-g) !important; font-size: 24px !important; font-weight: 700 !important; line-height: 30px !important; margin: 0 0 8px !important; }
.gla-c div { color: #5B615E; font-size: 17.5px; line-height: 27px; }
.gla-cta { background: var(--gl-g); color: #fff; padding: 34px 0 34px; }
.gla-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.gla-cta h2 { color: #fff !important; font-size: 40px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 0 6px !important; letter-spacing: -.01em; }
.gla-cta span { font-size: 21px; line-height: 30px; color: rgba(255,255,255,.92); }
.gla-cta-r { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 0 0 auto; }
.gla-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 274px; height: 54px; background: #fff; border-radius: 5px; color: var(--gl-g) !important; font-size: 19px; font-weight: 700; }
.gla-cta-btn i { font-style: normal; }
.gla-cta-tel { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; font-size: 31px; font-weight: 700; } .gla-cta-tel img { width: 30px; height: 30px; }
/* ---------- thư viện vật liệu ---------- */
.gls-hero { position: relative; background: var(--gl-stone); min-height: 238px; border-top: 0; overflow: hidden; }
.gls-hero-img { position: absolute; right: 0; top: 0; bottom: 0; width: 48.4%; background: #E4E3DF; }
.gls-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.gls-hero-img::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 120px; background: linear-gradient(90deg, var(--gl-stone), rgba(242,242,240,0)); }
.gls-hero-in { position: relative; padding-bottom: 40px; }
.gls-hero .gli-crumb { font-size: 20px; padding-top: 38px; color: #2E3431; }
.gls-hero .gli-h1 { font-size: 62px !important; color: #08552E !important; margin: 10px 0 8px !important; }
.gls-hero .gli-lead { font-size: 27px; line-height: 36px; color: #2E3431; }
.gls-main { display: grid; grid-template-columns: 382px minmax(0, 1fr); gap: 24px; padding: 26px 0 26px; align-items: start; }
.gls-side { border: 1px solid #E3E3DF; border-radius: 6px; padding: 26px 22px 22px; background: #fff; }
.gls-fbox > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #E3E3DF; cursor: default; }
.gls-fbox > summary::-webkit-details-marker { display: none; }
.gls-ft span { display: inline-flex; align-items: center; gap: 14px; color: var(--gl-g); font-size: 26px; font-weight: 700; }
.gls-ft span img { width: 30px; height: 30px; }
.gls-reset { color: var(--gl-g) !important; font-size: 15px; font-weight: 600; text-decoration: underline !important; }
.gls-grp { padding: 22px 0 20px; border-bottom: 1px solid #E3E3DF; }
.gls-grp:last-of-type { border-bottom: 0; }
.gls-grp h4 { color: #1D2321 !important; font-size: 20px !important; font-weight: 700 !important; margin: 0 0 14px !important; letter-spacing: 0 !important; text-transform: none !important; }
.gls-ck { display: flex !important; align-items: center; gap: 14px; font-size: 17.5px !important; font-weight: 400 !important; color: #3E4441 !important; margin: 0 0 14px !important; cursor: pointer; }
.gls-ck input, .gls-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gls-ck i { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid #9AA09D; border-radius: 3px; position: relative; background: #fff; }
.gls-ck input:checked + i { background: var(--gl-g); border-color: var(--gl-g); }
.gls-ck input:checked + i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gls-ck input:checked ~ * { color: #1D2321; }
.gls-rv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gls-rv input { height: 49px !important; margin: 0 !important; border: 1px solid #CFCFCB !important; border-radius: 4px !important; box-shadow: none !important; font-size: 16px !important; padding: 0 14px !important; }
.gls-apply { display: block; width: 100%; height: 51px; min-height: 0; margin: 16px 0 18px !important; border: 0; border-radius: 4px; background: var(--gl-g); color: #fff; font-size: 18px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.gls-chips { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.gls-chip { margin: 0 !important; cursor: pointer; position: relative; }
.gls-chip span { display: inline-flex; align-items: center; justify-content: center; height: 41px; padding: 0 16px; border: 1px solid #CFCFCB; border-radius: 6px; font-size: 15px; font-weight: 400; color: #2E3431; min-width: 64px; }
.gls-chips-sz .gls-chip span { min-width: 104px; }
.gls-chip input:checked + span { background: var(--gl-g); border-color: var(--gl-g); color: #fff; font-weight: 600; }
.gls-help { display: flex; align-items: center; gap: 16px; margin-top: 8px; padding: 18px 20px; background: #EEF5F0; border-radius: 6px; color: #1D2321 !important; }
.gls-help img { width: 44px; height: 44px; flex: 0 0 auto; }
.gls-help span { font-size: 18px; font-weight: 600; line-height: 26px; } .gls-help b { display: block; color: var(--gl-g); font-size: 21px; font-weight: 700; }
.gls-bar { display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 16px; border: 1px solid #E3E3DF; border-radius: 6px; margin-bottom: 16px; }
.gls-count { font-size: 17.5px; color: #1D2321; }
.gls-sort { margin: 0 0 0 auto !important; }
.gls-sort select { height: 44px !important; margin: 0 !important; border: 1px solid #CFCFCB !important; border-radius: 4px !important; box-shadow: none !important; font-size: 15px !important; padding: 0 34px 0 14px !important; min-width: 210px; }
.gls-view { display: flex; gap: 6px; } .gls-view button { width: 40px; height: 40px; min-height: 0; padding: 4px; margin: 0; border: 0; background: none; opacity: .55; } .gls-view button.on { opacity: 1; } .gls-view img { width: 100%; height: 100%; }
.gli-sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 16px; }
.gli-card[hidden] { display: none !important; }
.gli-card { min-width: 0; background: #fff; border: 1px solid #E3E3DF; }
.gli-cimg { display: block; aspect-ratio: 311 / 304; overflow: hidden; background: #E4E3DF; }
.gli-cimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; } .gli-card:hover .gli-cimg img { transform: scale(1.04); }
.gli-cb { padding: 16px 16px 18px; }
.gli-ccode { font-size: 22px !important; font-weight: 700 !important; line-height: 28px !important; margin: 0 !important; letter-spacing: 0 !important; } .gli-ccode a { color: #1D2321 !important; }
.gli-cname { font-size: 17.5px; color: #4A504D; margin: 4px 0 14px; }
.gli-crow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gli-crow b { color: var(--gl-g); font-size: 21px; font-weight: 700; }
.gli-cbtn { display: inline-flex; align-items: center; gap: 10px; height: 45px; padding: 0 18px; border: 1.5px solid var(--gl-g); border-radius: 4px; color: var(--gl-g) !important; font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.gli-cbtn i { font-style: normal; } .gli-cbtn:hover { background: var(--gl-g); color: #fff !important; }
.gli-sgrid.gli-list { grid-template-columns: minmax(0, 1fr); }
.gli-list .gli-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; }
.gli-list .gli-cimg { aspect-ratio: 1; }
.gli-empty { padding: 40px 0; text-align: center; color: #4A504D; font-size: 17px; }
.gls-pages { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.gls-pages button { width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 1px solid #DADAD6; border-radius: 4px; background: #fff; color: #1D2321; font-size: 22px; line-height: 1; }
.gls-pages button.on { background: var(--gl-g); border-color: var(--gl-g); color: #fff; font-size: 17px; font-weight: 700; }
/* ---------- chi tiết SP ---------- */
.glp-page > .gli-w:first-child .gli-crumb { padding: 26px 0 22px; font-size: 15px; }
.glp-page .gli-crumb a:first-of-type { color: var(--gl-g) !important; }
.glp-top { display: grid; grid-template-columns: 822px minmax(0, 1fr); gap: 46px; padding-bottom: 44px; border-bottom: 1px solid #E3E3DF; }
.glp-main { position: relative; aspect-ratio: 822 / 614; background: #ECECEA; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.glp-main img { width: 74%; aspect-ratio: 2 / 1; object-fit: cover; box-shadow: 0 14px 26px rgba(0,0,0,.18); display: block; }
.glp-main.glp-flat img { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
.glp-zoom { position: absolute; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; }
.glp-zoom img { width: 22px !important; height: 22px; aspect-ratio: auto !important; box-shadow: none !important; }
.glp-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin-top: 17px; }
.glp-thumbs button { aspect-ratio: 1; padding: 0; margin: 0; min-height: 0; border: 2px solid transparent; background: #ECECEA; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.glp-thumbs button.on { border-color: var(--gl-g); }
.glp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glp-thumbs img.glp-tile { width: 82%; height: auto; aspect-ratio: 2 / 1; box-shadow: 0 6px 12px rgba(0,0,0,.16); }
.glp-kick { color: var(--gl-g); font-size: 14.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 4px 0 10px; }
.glp-title { color: #1D2321 !important; font-size: 38px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 14px !important; letter-spacing: -.01em; }
.glp-title b { display: block; color: var(--gl-g); font-size: 54px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.glp-price { display: flex; align-items: baseline; gap: 10px; } .glp-price span { font-size: 20px; font-weight: 700; color: #1D2321; } .glp-price b { color: var(--gl-g); font-size: 34px; font-weight: 800; }
.glp-unit { color: var(--gl-g); font-size: 14.5px; margin: 2px 0 12px; }
.glp-lead { color: #4A504D; font-size: 16.5px; line-height: 26px; padding-bottom: 20px; border-bottom: 1px solid #E3E3DF; margin-bottom: 24px; }
.glp-opt { display: grid; grid-template-columns: 124px auto; align-items: center; margin-bottom: 18px; }
.glp-opt > span { font-size: 17px; font-weight: 700; color: #1D2321; }
.glp-chip { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-width: 162px; height: 46px; padding: 0 18px; border: 1px solid #CFCFCB; border-radius: 5px; color: #4A504D; font-size: 16px; font-weight: 400; }
.glp-chip.on { border: 2px solid var(--gl-g); color: var(--gl-g); font-weight: 700; font-size: 17px; }
.glp-qty { display: inline-flex; justify-self: start; border: 1px solid #CFCFCB; border-radius: 5px; height: 48px; }
.glp-qty button { width: 52px; min-height: 0; height: 46px; margin: 0; padding: 0; background: #fff; border: 0; font-size: 24px; color: #1D2321; }
.glp-qty input { width: 64px !important; height: 46px !important; margin: 0 !important; border: 0 !important; border-left: 1px solid #CFCFCB !important; border-right: 1px solid #CFCFCB !important; box-shadow: none !important; text-align: center; font-size: 18px !important; padding: 0 !important; -moz-appearance: textfield; }
.glp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.glp-act { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; margin: 26px 0 24px; }
.glp-act a { display: flex; align-items: center; justify-content: center; gap: 12px; height: 66px; border-radius: 5px; font-size: 20px; font-weight: 700; }
.glp-buy { background: var(--gl-g); color: #fff !important; } .glp-buy:hover { background: var(--gl-g-d); }
.glp-line { border: 1.5px solid var(--gl-g); color: var(--gl-g) !important; }
.glp-act .glp-line2 { height: 64px; border: 1.5px solid var(--gl-g); color: var(--gl-g) !important; font-size: 17px; }
.glp-line2 img { width: 26px; height: 26px; }
.glp-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 20px; border-top: 1px solid #E3E3DF; }
.glp-badges > div { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 21px; color: #4A504D; padding: 0 10px; } .glp-badges > div + div { border-left: 1px solid #E3E3DF; }
.glp-badges img { width: 40px; height: 40px; flex: 0 0 auto; }
.glp-tabs { display: flex; border-bottom: 1px solid #E3E3DF; margin-top: 26px; }
.glp-tabs button { min-height: 0; height: 64px; margin: 0; padding: 0 44px; border: 0; border-bottom: 4px solid transparent; background: none; color: #4A504D; font-size: 21px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.glp-tabs button.on { color: var(--gl-g); border-bottom-color: var(--gl-g); font-weight: 700; }
.glp-pane[hidden] { display: none; }
.glp-desc { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 40px; padding: 34px 0 34px; align-items: start; }
.glp-desc .gli-h2 { font-size: 37px !important; margin-bottom: 20px !important; }
.glp-desc p { color: #4A504D; font-size: 18px; line-height: 30px; margin: 0 !important; }
.glp-spec { border: 1px solid #E3E3DF; border-radius: 6px; padding: 22px 34px 14px; }
.glp-spec h3 { color: var(--gl-g) !important; font-size: 27px !important; font-weight: 700 !important; margin: 0 0 12px !important; }
.glp-spec dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin: 0; }
.glp-spec dt, .glp-spec dd { margin: 0; padding: 14px 0; border-top: 1px solid #ECECEA; font-size: 16.5px; text-transform: none !important; letter-spacing: 0 !important; color: #4A504D; font-weight: 400; }
.glp-spec dd { padding-left: 34px; border-left: 1px solid #ECECEA; color: #1D2321; }
.glp-spec-w { max-width: 760px; margin: 34px 0; }
.glp-apply { margin: 0 0 30px; } .glp-apply img { width: 100%; height: 527px; object-fit: cover; display: block; }
.glp-apply figcaption { font-size: 15px; color: #4A504D; margin-top: 12px; }
.glp-rv { font-size: 18px; color: #4A504D; padding: 34px 0; }
.glp-relw { background: var(--gl-stone); padding: 40px 0 40px; }
.glp-relh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.glp-relh .gli-h2 { font-size: 36px !important; }
.glp-relh a { color: var(--gl-g) !important; font-size: 20px; font-weight: 500; } .glp-relh a i { font-style: normal; margin-left: 10px; }
.glp-rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.glp-rel .gli-card { border: 0; }
.glp-rel .gli-cimg { aspect-ratio: 317 / 296; }
.glp-rel .gli-cb { padding: 0; }
.gli-crel { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 16px; color: #1D2321 !important; }
.gli-crel b { display: block; font-size: 19px; font-weight: 700; } .gli-crel small { display: block; font-size: 15px; color: #4A504D; margin-top: 2px; }
.gli-crel i { font-style: normal; font-size: 26px; color: var(--gl-g); }
.gli-cta { background: var(--gl-g); color: #fff; padding: 46px 0; }
.gli-cta-in { display: flex; align-items: center; gap: 38px; }
.gli-cta-in > img { width: 92px; height: 92px; flex: 0 0 auto; }
.gli-cta h2 { color: #fff !important; font-size: 35px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 0 6px !important; }
.gli-cta span { font-size: 21px; color: rgba(255,255,255,.92); }
.gli-cta-btn { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 14px; height: 66px; padding: 0 50px; background: #fff; border-radius: 5px; color: var(--gl-g) !important; font-size: 21px; font-weight: 700; }
.gli-cta-btn i { font-style: normal; }
/* ---------- liên hệ ---------- */
.glc-page .gli-band { padding-bottom: 36px; }
.glc-page .gli-h1 { font-size: 48px !important; }
.glc-main { display: grid; grid-template-columns: minmax(0, 1fr) 467px; gap: 0; padding: 36px 0 44px; }
.glc-formw { padding-right: 42px; border-right: 1px solid #E3E3DF; margin-right: 37px; }
.glc-formw .gli-h2 { font-size: 40px !important; }
.glc-formw .gli-sub { margin-bottom: 22px; }
.gli-form label, .gli-form .gli-f { display: block; margin: 0 0 18px !important; font-size: 16px !important; font-weight: 700 !important; color: #1D2321 !important; }
.gli-form label em { color: #E02424; font-style: normal; }
.gli-form .gli-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.gli-form input[type=text], .gli-form input[type=tel], .gli-form input[type=email], .gli-form select, .gli-form textarea { width: 100%; height: 49px !important; margin: 8px 0 0 !important; border: 1px solid #CFCFCB !important; border-radius: 4px !important; box-shadow: none !important; font-size: 16px !important; font-weight: 400 !important; padding: 0 16px !important; background-color: #fff !important; }
.gli-form textarea { height: 104px !important; min-height: 0; padding: 14px 16px !important; }
.gli-form .wpcf7-form-control-wrap { display: block; }
.gli-form input[type=submit], .gli-form .gli-send { display: inline-flex; align-items: center; justify-content: center; width: 226px; height: 56px; min-height: 0; margin: 4px 0 0 !important; border: 0; border-radius: 4px; background: var(--gl-g); color: #fff; font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0; }
.gli-form .wpcf7-spinner { position: absolute; margin: 18px 0 0 12px; }
.glc-h2s { font-size: 31px !important; margin-bottom: 26px !important; }
.glc-card { display: flex; align-items: center; gap: 26px; padding: 18px 20px; border: 1px solid #E3E3DF; border-radius: 6px; margin-bottom: 20px; color: inherit !important; }
.glc-card > div { min-width: 0; }
.glc-ic { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; background: #EEF5F0; display: flex; align-items: center; justify-content: center; }
.glc-ic img { width: 38px; height: 38px; }
.glc-card small { display: block; color: var(--gl-g); font-size: 17px; }
.glc-card b { display: block; color: var(--gl-g); font-size: 25px; font-weight: 800; line-height: 32px; }
.glc-card b.glc-mail { font-size: 21px; overflow-wrap: anywhere; }
.glc-card span { display: block; font-size: 16px; color: #1D2321; }
.glc-card .glc-addr { font-size: 20px; line-height: 30px; color: #1D2321; }
.glc-hours { display: flex; gap: 26px; padding: 6px 0 0 14px; }
.glc-hours img { width: 44px; height: 44px; flex: 0 0 auto; }
.glc-hours h3 { color: var(--gl-g) !important; font-size: 21px !important; font-weight: 700 !important; margin: 4px 0 6px !important; }
.glc-hours span { display: block; font-size: 17px; line-height: 27px; color: #1D2321; }
.glc-show { background: var(--gl-stone); padding: 34px 0; }
.glc-show-in { display: grid; grid-template-columns: 768px minmax(0, 1fr); gap: 40px; align-items: center; }
.glc-show-img { height: 467px; overflow: hidden; background: #E4E3DF; } .glc-show-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glc-show-t .gli-h2 { font-size: 33px !important; margin-bottom: 14px !important; }
.glc-show-t p { color: #4A504D; font-size: 18px; line-height: 28px; margin: 0 0 20px !important; }
.glc-li { display: flex; gap: 22px; margin-bottom: 20px; font-size: 18px; line-height: 27px; color: #1D2321; }
.glc-li img { width: 30px; height: 30px; flex: 0 0 auto; margin-top: 2px; }
.glc-li b { display: block; color: var(--gl-g); font-weight: 700; }
.glc-show-t .glc-note { margin: 4px 0 18px !important; }
.glc-btn { background: var(--gl-g); color: #fff !important; min-height: 58px; padding: 0 34px; } .glc-btn:hover { background: var(--gl-g-d); }
.glc-mapw { padding: 40px 0 0; }
.glc-mapw .gli-h2 { font-size: 36px !important; margin-bottom: 18px !important; }
.glc-map { position: relative; height: 282px; background: #ECECEA; }
.glc-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.glc-pin { position: absolute; left: calc(50% + 24px); top: 30px; background: #fff; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.15); padding: 12px 18px; }
.glc-pin b { display: block; color: var(--gl-g); font-size: 16px; } .glc-pin span { font-size: 14px; color: #4A504D; }
.glc-dir { position: absolute; left: 16px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.15); color: var(--gl-g) !important; font-size: 15.5px; font-weight: 600; }
.glc-dir i { font-style: normal; }
.glc-faqw { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; padding: 26px 0 44px; }
.glc-faq-l { padding-top: 20px; border-right: 1px solid #E3E3DF; }
.glc-faq-l .gli-h2 { font-size: 36px !important; }
.glc-faq details { border-bottom: 1px solid #E3E3DF; }
.glc-faq summary { list-style: none; position: relative; padding: 20px 50px 18px 0; font-size: 18px; font-weight: 700; color: #1D2321; cursor: pointer; }
.glc-faq details[open] summary { color: var(--gl-g); padding-bottom: 8px; }
.glc-faq summary::-webkit-details-marker { display: none; }
.glc-faq summary::after { content: "+"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 300; color: #4A504D; }
.glc-faq details[open] summary::after { content: "−"; }
.glc-faq details > div { padding: 0 50px 18px 0; font-size: 16.5px; line-height: 26px; color: #4A504D; }
/* ---------- công trình / catalogue ---------- */
.glw-list { padding: 40px 0 50px; }
.glg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.glg-it { margin: 0; background: #fff; border: 1px solid #E3E3DF; }
.glg-it img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.glg-it figcaption { padding: 16px 20px 18px; } .glg-it b { display: block; color: var(--gl-g); font-size: 20px; } .glg-it span { font-size: 16px; color: #4A504D; }
.glb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 40px 0 50px; }
.glb-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; border: 1px solid #E3E3DF; border-radius: 6px; color: #1D2321 !important; background: #fff; }
.glb-ci { background: var(--gl-stone); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .glb-ci img { width: 90%; height: 90%; object-fit: contain; }
.glb-cb b { display: block; font-size: 19px; line-height: 26px; } .glb-cb small { display: block; font-size: 15px; color: #4A504D; margin: 6px 0 10px; } .glb-cb em { font-style: normal; color: var(--gl-g); font-weight: 600; }
.glb-one { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 50px; align-items: center; padding: 44px 0 50px; }
.glb-book { background: var(--gl-stone); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .glb-book img { width: 86%; height: 86%; object-fit: contain; }
.glb-txt p, .glb-txt li { font-size: 18px; line-height: 29px; color: #4A504D; }
.glb-btns { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.glb-btn { background: var(--gl-g); color: #fff !important; } .glb-line { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border: 1.5px solid var(--gl-g); border-radius: 4px; color: var(--gl-g) !important; font-weight: 700; font-size: 17px; }
.woocommerce-page .shop-page-title, .product-page-title { display: none !important; }
.wpcf7-form div > p:has(> label ~ label) { display: contents; }
/* ---------- 850-1399 ---------- */
@media (min-width: 850px) and (max-width: 1399px) {
  .gla-story { grid-template-columns: minmax(0, 1fr) minmax(0, 48%); }
  .gls-main { grid-template-columns: 320px minmax(0, 1fr); }
  .glp-top { grid-template-columns: minmax(0, 55%) minmax(0, 1fr); gap: 34px; }
  .glp-desc { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
  .glc-main { grid-template-columns: minmax(0, 1fr) 420px; } .glc-formw { padding-right: 28px; margin-right: 28px; }
  .glc-show-in { grid-template-columns: minmax(0, 55%) minmax(0, 1fr); }
  .gla-cta h2 { font-size: 32px !important; } .gli-cta h2 { font-size: 28px !important; }
  .gli-crow { flex-wrap: wrap; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  .gls-main { grid-template-columns: 270px minmax(0, 1fr); } .gli-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gla-vg, .gla-tg { gap: 14px; } .gla-v div br, .gla-c div br { display: none; }
  .gla-cg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; } .gla-c:nth-child(3) { border-left: 0; }
  .glp-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .glp-act a { font-size: 17px; height: 56px; } .glp-act .glp-line2 { height: 56px; font-size: 15px; }
  .glc-main { grid-template-columns: minmax(0, 1fr); } .glc-formw { padding-right: 0; margin: 0 0 30px; border-right: 0; }
  .glc-faqw { grid-template-columns: 260px minmax(0, 1fr); } .glg-grid, .glb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gli-cta-in { flex-wrap: wrap; } .gli-cta-btn { margin-left: 0; } .gla-cta-in { flex-wrap: wrap; }
  .glb-one { grid-template-columns: 320px minmax(0, 1fr); }
}
/* ---------- mobile ---------- */
@media (max-width: 849px) {
  .gli-w { padding-left: 15px; padding-right: 15px; }
  .gli-h1, .glc-page .gli-h1 { font-size: 34px !important; } .gli-lead { font-size: 16.5px; line-height: 25px; }
  .gli-h2, .gli-why .gl-h2 { font-size: 28px !important; line-height: 36px !important; }
  .gli-sub { font-size: 16px; }
  .gla-hero { height: 230px; } .gla-hero span { font-size: 14px; bottom: 12px; }
  .gla-story { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 0; } .gla-story .gli-h2 { font-size: 30px !important; line-height: 38px !important; }
  .gla-txt p { font-size: 16px; line-height: 26px; } .gla-origins { gap: 10px; } .gla-origins span { height: 42px; padding: 0 20px; font-size: 15px; }
  .gla-vg, .gla-tg { grid-template-columns: minmax(0, 1fr); gap: 14px; } .gla-v div br, .gla-c div br { display: none; }
  .gla-v img { width: 60px; height: 60px; } .gla-v h3 { font-size: 22px !important; } .gla-v div { font-size: 16px; line-height: 25px; }
  .gla-t img { height: 200px; }
  .gla-cg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; } .gla-c:nth-child(3) { border-left: 0; }
  .gla-c img { width: 52px; height: 52px; } .gla-c h3 { font-size: 18px !important; line-height: 24px !important; } .gla-c div { font-size: 14.5px; line-height: 22px; }
  .gla-cta-in, .gli-cta-in { flex-direction: column; align-items: flex-start; gap: 18px; }
  .gla-cta h2, .gli-cta h2 { font-size: 26px !important; } .gla-cta span, .gli-cta span { font-size: 16px; line-height: 24px; }
  .gla-cta-r { align-items: flex-start; } .gla-cta-tel { font-size: 26px; } .gli-cta-in > img { width: 60px; height: 60px; } .gli-cta-btn { margin-left: 0; height: 54px; padding: 0 28px; font-size: 18px; }
  .gls-hero { min-height: 0; padding-top: 200px; }
  .gls-hero-img { left: 0; width: 100%; bottom: auto; height: 200px; } .gls-hero-img::before { display: none; }
  .gls-hero .gli-crumb { font-size: 15px; padding-top: 16px; } .gls-hero .gli-h1 { font-size: 36px !important; } .gls-hero .gli-lead { font-size: 18px; line-height: 26px; } .gls-hero-in { padding-bottom: 22px; }
  .gls-main { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  .gls-side { padding: 14px 16px; } .gls-fbox > summary { cursor: pointer; padding-bottom: 0; border-bottom: 0; } .gls-fbox[open] > summary { padding-bottom: 14px; border-bottom: 1px solid #E3E3DF; }
  .gls-ft span { font-size: 22px; } .gls-ft span::after { content: "▾"; font-size: 15px; }
  .gls-bar { height: auto; flex-wrap: wrap; padding: 10px 12px; } .gls-sort { margin: 0 !important; } .gls-sort select { min-width: 0; }
  .gli-sgrid, .glp-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gli-cb { padding: 12px; } .gli-ccode { font-size: 18px !important; } .gli-cname { font-size: 14.5px; } .gli-crow { flex-wrap: wrap; } .gli-crow b { font-size: 17px; } .gli-cbtn { height: 38px; padding: 0 12px; font-size: 14px; }
  .gli-list .gli-card { grid-template-columns: 120px minmax(0, 1fr); }
  .glp-top { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 30px; }
  .glp-thumbs { gap: 8px; margin-top: 8px; }
  .glp-title { font-size: 28px !important; } .glp-title b { font-size: 40px; } .glp-price b { font-size: 28px; }
  .glp-opt { grid-template-columns: 110px auto; } .glp-chip { min-width: 130px; }
  .glp-act { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .glp-act a { height: 54px; font-size: 17px; } .glp-act .glp-line2 { height: 52px; font-size: 14.5px; gap: 8px; } .glp-line2 img { width: 20px; height: 20px; }
  .glp-badges > div { flex-direction: column; text-align: center; gap: 6px; font-size: 13.5px; } .glp-badges img { width: 34px; height: 34px; }
  .glp-tabs { overflow-x: auto; } .glp-tabs button { padding: 0 18px; height: 52px; font-size: 17px; white-space: nowrap; }
  .glp-desc { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 0; } .glp-desc .gli-h2 { font-size: 26px !important; } .glp-desc p { font-size: 16px; line-height: 26px; }
  .glp-spec { padding: 18px 18px 8px; } .glp-spec dl { grid-template-columns: 120px minmax(0, 1fr); } .glp-spec dd { padding-left: 16px; }
  .glp-apply img { height: 230px; }
  .glp-relh .gli-h2 { font-size: 26px !important; } .glp-relh a { font-size: 16px; }
  .gli-crel { padding: 10px 12px; } .gli-crel b { font-size: 16px; } .gli-crel small { font-size: 13px; }
  .glc-main { grid-template-columns: minmax(0, 1fr); padding: 26px 0 30px; } .glc-formw { padding-right: 0; margin: 0 0 30px; border-right: 0; } .glc-formw .gli-h2 { font-size: 28px !important; }
  .gli-form .gli-f2 { grid-template-columns: minmax(0, 1fr); } .gli-form input[type=submit], .gli-form .gli-send { width: 100%; }
  .gli-form .wpcf7-spinner { right: 12px; }
  .glc-card { gap: 16px; padding: 14px; } .glc-ic { width: 60px; height: 60px; } .glc-ic img { width: 28px; height: 28px; } .glc-card b { font-size: 22px; } .glc-card b.glc-mail { font-size: 17px; } .glc-card .glc-addr { font-size: 16.5px; line-height: 25px; }
  .glc-hours { padding-left: 0; gap: 16px; } .glc-hours span { font-size: 15.5px; }
  .glc-show-in { grid-template-columns: minmax(0, 1fr); gap: 22px; } .glc-show-img { height: 240px; }
  .glc-map { height: 260px; } .glc-pin { left: 12px; top: 12px; } .glc-dir { left: 12px; bottom: 12px; }
  .glc-faqw { grid-template-columns: minmax(0, 1fr); gap: 10px; } .glc-faq-l { border-right: 0; padding-top: 0; } .glc-faq summary { font-size: 16px; }
  .glg-grid, .glb-grid { grid-template-columns: minmax(0, 1fr); } .glb-one { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .glb-card { grid-template-columns: 110px minmax(0, 1fr); }
}
.glc-card span.glc-ic { display: flex; }
.glp-relh .gli-h2 { flex: 0 0 auto; width: fit-content; } .glp-relh a { white-space: nowrap; }
/* ruler:auto BEGIN — tools/astra-bridge/lab/ruler_fix.py, đừng sửa tay */
@media (min-width: 850px) {
  body:not(.home) .gli-crumb img { width: 22px !important; height: 22px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  body:not(.home) .glp-badges img { width: 48px !important; height: 48px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  body:not(.home) .glp-line2 img { width: 30px !important; height: 30px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  body:not(.home) .glp-zoom img { width: 32px !important; height: 32px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
}
@media (max-width: 849px) {
  body:not(.home) .gli-crumb img { width: 17px !important; height: 17px !important; }
  body:not(.home) .glp-badges img { width: 40px !important; height: 40px !important; }
  body:not(.home) .glp-line2 img { width: 26px !important; height: 26px !important; }
  body:not(.home) .glp-zoom img { width: 22px !important; height: 22px !important; }
}
/* ruler:auto END */
/* lề ngang khung .gli-w: luật "padding: a 0 b" của khối cùng phần tử xoá mất lề ở < 1399px -> ép lại (LESSONS) */
@media (max-width: 1399px) { .gli-w { padding-left: 24px !important; padding-right: 24px !important; } }
@media (max-width: 849px) { .gli-w { padding-left: 15px !important; padding-right: 15px !important; } }