/* Trang /huong-dan/ – hướng dẫn sử dụng, vệ sinh, bảo quản (2026-11-02). Dùng token và thẻ kính của app.css; chỉ thêm khối infographic.
   Ảnh: chỉ đặt chiều cao, chiều rộng auto (DESIGN.md mục 4.4). Icon nét 1,75 px, một màu. */
.hd{padding-bottom:8px}
:where(.hd) :where(ol,ul){list-style:none;margin:0;padding:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hd-crumb{justify-content:flex-start;padding-top:6px;padding-bottom:0;font-size:12.5px}
.hd-crumb a{display:inline-flex;align-items:center;min-height:44px}
.hd-crumb i,.hd-crumb span{display:inline-flex;align-items:center}
.hd-hero{padding-top:0}
.hd-hero h1{font-size:34px;line-height:1.12}
.hd-pics{display:flex;justify-content:center;align-items:flex-end;gap:18px;margin-top:18px;padding:16px 14px 14px;border-radius:26px;background:radial-gradient(70% 90% at 50% 100%,var(--au1),transparent 70%),var(--glass)}
.hd-pics img{height:92px;width:auto}
.hd-all{margin-top:18px;width:100%;max-width:420px}
.hd-toc{margin-top:22px}
.hd-toc ol{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hd-toc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--red-line);background:rgba(255,255,255,.85);font:700 13px/1.25 var(--f-b);color:var(--ink);text-decoration:none}
.hd-toc em{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font:400 13px/1 var(--f-d);font-style:normal}
.hd-s{padding-top:44px;padding-bottom:0;scroll-margin-top:76px}
.hd-dan{color:var(--mute);margin-top:8px;font-size:15px;max-width:52ch}
.hd-i{width:22px;height:22px;flex:none;display:block}
.hd-i.sm{width:18px;height:18px}
.hd-i.h{width:22px;height:22px}
.hd-ib{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;background:var(--red-soft);color:var(--red);border:1px solid var(--red-line)}
.hd-ib em{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font:700 12px/22px var(--f-b);font-style:normal;text-align:center}
.hd-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:14px 16px;border-radius:20px;font-size:14px;line-height:1.5;color:var(--ink)}
.hd-note>svg{color:var(--red);margin-top:1px}

/* ảnh nhỏ sản phẩm có link */
.hd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hd-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:4px 12px 4px 6px;border-radius:999px;background:#fff;border:1px solid var(--red-line);font:700 12.5px/1.25 var(--f-b);color:var(--ink);text-decoration:none}
.hd-chip img{height:32px;width:auto;flex:none}
.hd .hd-chip span{display:inline;font:inherit;color:inherit;margin:0;min-width:0}

/* Sử dụng */
.hd-fig{margin:16px 0 0;padding:12px 10px;border-radius:26px}
.hd-sac{display:block;width:100%;height:auto;max-width:520px;margin-inline:auto}
.hd-list{display:grid;gap:10px;margin-top:10px}
.hd-list>li{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:22px}
.hd-list b{display:block;font:400 16px/1.3 var(--f-d)}
.hd-list li>div>span{display:block;font-size:14px;color:var(--mute);margin-top:4px}

/* Sơ đồ vệ sinh 3 nhánh */
.hd-tree{margin-top:16px}
.hd-root{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;padding:12px 18px 12px 14px;border-radius:999px;font:700 14.5px/1.35 var(--f-b)}
.hd-root svg{color:var(--red)}
.hd-tree ol{display:grid;gap:10px;margin-top:12px;padding-left:24px;position:relative}
.hd-tree ol::before{content:"";position:absolute;left:10px;top:-12px;bottom:36px;border-left:2px dashed #F2A49C}
.hd-tree li{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:22px}
.hd-tree li::before{content:"";position:absolute;left:-14px;top:35px;width:14px;border-top:2px dashed #F2A49C}
.hd-tree li b{display:block;font:400 16px/1.3 var(--f-d)}
.hd-tree li p{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:14px;color:var(--mute)}
.hd-tree li p svg{color:var(--red);margin-top:2px}
.hd-th{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:flex-end}
.hd-th a{display:grid;place-items:center;min-height:44px;min-width:44px;padding:4px 6px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.hd-th img{height:52px;width:auto}
@media (min-width:720px){
  .hd-root{margin-inline:auto}
  .hd-tree ol{grid-template-columns:repeat(3,1fr);padding-left:0;padding-top:22px}
  .hd-tree ol::before{left:16.6%;right:16.6%;top:0;bottom:auto;border-left:0;border-top:2px dashed #F2A49C}
  .hd-tree li{flex-direction:column}
  .hd-tree li::before{left:50%;top:-22px;width:0;height:22px;border-top:0;border-left:2px dashed #F2A49C}
}

/* Thang IPX */
.hd-ipx{margin-top:16px;padding:4px 16px;border-radius:26px}
.hd-ipx li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.hd-ipx li:last-child{border-bottom:0}
.hd-lv{display:grid;gap:6px;align-content:start}
.hd-lv b{font:400 20px/1 var(--f-d);letter-spacing:-.02em}
.hd-drops{display:flex;gap:1px;color:var(--red)}
.hd-d{width:17px;height:17px;fill:color-mix(in srgb,var(--red) calc(var(--k,.5) * 70%),#fff)}
.hd-ipx p{font-size:14px;line-height:1.5}
.hd-ipx .hd-chips{margin-top:8px}
.hd-ipx0{margin-top:10px;padding:14px 16px;border-radius:22px}
.hd-ipx0>b{display:block;font:700 14px/1.35 var(--f-b)}

/* Bảng gel × chất liệu */
.hd-gelw{margin-top:16px;padding:8px 10px 12px;border-radius:26px}
.hd-gel{width:100%;border-collapse:collapse;table-layout:fixed}
.hd-gel th,.hd-gel td{padding:10px 4px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line)}
.hd-gel thead th{font:700 12.5px/1.25 var(--f-b);vertical-align:bottom}
.hd-gel thead th:first-child{width:40%}
.hd-gel tbody th{text-align:left;font:700 13px/1.3 var(--f-b)}
.hd-gel tbody tr:last-child>*{border-bottom:0}
.hd-m{width:26px;height:26px;display:inline-block;vertical-align:middle}
.m-tick .hd-m{color:var(--red)}
.m-tick .hd-m circle{fill:var(--red-soft)}
.m-x .hd-m{color:#4A4F63}
.m-dash .hd-m{color:#7D8296}
.hd-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;padding:0 4px;font-size:13px;color:var(--ink)}
.hd-leg li{display:flex;align-items:center;gap:6px}
.hd-leg .hd-m{width:20px;height:20px}
.hd-gelnote>div{min-width:0}
.hd-gelnote>div>span{display:block}

/* Sạc pin, cất giữ: dùng thẻ .uses.g2 .use của khối Cách dùng trang sản phẩm */
.hd-uses{margin-top:16px}
.hd .uses.g2 .use small{font-size:12px}
.hd .uses.g2 .use .tx>span{font-size:13px}
.hd-meo .tx>span{color:var(--ink)}
.hd-meo .hd-chips{gap:6px}
.hd-meo .hd-chip{padding-right:10px;font-size:12px}

/* Dòng thời gian */
.hd-tl{display:grid;margin-top:16px}
.hd-tl>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;position:relative;padding-bottom:12px}
.hd-tl>li:last-child{padding-bottom:0}
.hd-tl>li:not(:last-child)::before{content:"";position:absolute;left:21px;top:48px;bottom:4px;border-left:2px dotted #F2A49C}
.hd-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--red-line);color:var(--red)}
.hd-dot em{font:400 18px/1 var(--f-d);font-style:normal}
.hd-tl>li>.glass{padding:12px 14px;border-radius:20px}
.hd-tl>li>.glass>b{display:block;font:400 16px/1.3 var(--f-d)}
.hd-tl>li>.glass>span{display:block;font-size:14px;color:var(--mute);margin-top:2px}
.hd-br{display:grid;gap:8px;margin-top:10px}
.hd-br>div{display:grid;grid-template-columns:18px minmax(0,1fr);gap:4px 8px;align-items:start;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.hd-br b{font:700 13.5px/1.35 var(--f-b)}
.hd-br span{grid-column:2;font-size:13.5px;line-height:1.45;color:var(--ink)}
.hd-br .ok{background:var(--red-soft);border-color:var(--red-line)}
.hd-br .ok svg{color:var(--red);margin-top:1px}
.hd-br .no svg{color:#8A8FA3;margin-top:1px}
@media (min-width:560px){.hd-br{grid-template-columns:1fr 1fr}}

/* Bảo hành 2 cột */
.hd-2c{display:grid;gap:10px;margin-top:16px}
.hd-col{padding:16px;border-radius:24px}
.hd-col h3{display:flex;align-items:center;gap:8px;font:400 18px/1.2 var(--f-d)}
.hd-col ul{display:grid;gap:10px;margin-top:12px}
.hd-col li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.hd-col li svg{margin-top:2px}
.hd-col.ok svg{color:var(--red)}
.hd-col.no svg{color:#4A4F63}
@media (min-width:720px){.hd-2c{grid-template-columns:1fr 1fr;align-items:start}}
.hd-more{margin-top:6px}
.hd-more a,.hd-foot{display:inline-flex;align-items:center;min-height:44px;font:700 14px/1.3 var(--f-b);color:var(--red);text-decoration:none}

/* Máy không lên: 3 bước */
.hd-3b{display:grid;gap:10px;margin-top:16px}
.hd-3b>li{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:22px}
.hd-3b>li>div{min-width:0}
.hd-3b b{display:block;font:400 16px/1.3 var(--f-d)}
.hd-3b>li>div>span{display:block;font-size:14px;color:var(--mute);margin-top:4px}
.hd .hd-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:flex-start}
.hd .hd-acts a{min-height:48px;margin:0}
.ghost.hd-ig{gap:8px}
i.igr{width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat}

/* Cuối trang */
.hd-endb{padding:24px 18px;border-radius:28px;text-align:center}
.hd-endb .h2{margin-top:0}
.hd-endb .hd-dan{margin-inline:auto}
.hd .hd-end .hd-acts{flex-direction:column;align-items:stretch;max-width:420px;margin:16px auto 0}
.hd .hd-end .hd-acts a{width:100%;max-width:none}
.hd-fact{padding-top:28px}