:root{--green:#244f3e;--green2:#386b50;--leaf:#e9f0e9;--mint:#c5d7c8;--cream:#f9f9f5;--paper:#ffffff;--text:#25342b;--muted:#66766d;--line:#e3e9e1;--gold:#b89967;--warn:#fff0d6;--red:#a84141;--line-strong:#abb9af;--muted-strong:#5c6660;--focus:#976000;--danger-strong:#a3271b;--sponsor:#7a5a00;--sponsor-border:#e5c76b;--ink:#10231a;--shadow:0 10px 32px #2238270c;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;color:var(--text)}*{box-sizing:border-box}body{margin:0;background:var(--cream)}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.48;cursor:not-allowed}.shell{min-height:100vh;display:grid;grid-template-columns:254px minmax(0,1fr)}aside{border-right:1px solid var(--line);background:#fff;min-height:100vh;position:sticky;top:0;align-self:start;padding:22px 14px}.brand{display:flex;align-items:center;gap:10px;padding:7px 13px 23px;color:var(--green);font-size:25px;font-weight:800;letter-spacing:-1px}.brandmark{width:38px;height:38px;border:1px solid var(--mint);border-radius:13px;background:var(--leaf);display:grid;place-items:center}.brand small{font-weight:500;font-size:10px;color:var(--muted);letter-spacing:.3px}.group-label{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:1.5px;font-weight:800;padding:21px 12px 8px}.nav{display:flex;gap:13px;align-items:center;width:100%;text-align:left;padding:12px 13px;border-radius:10px;color:var(--muted);background:transparent;font-size:14px;transition:background .18s}.nav:hover,.nav.on{background:var(--leaf);color:var(--green);font-weight:750}.ico{width:20px;height:20px;flex-shrink:0;stroke-width:1.7}.nav .ico{width:20px;height:20px}.sidebar-help{margin:35px 6px 8px;border-radius:14px;background:var(--cream);padding:17px;font-size:12px;line-height:1.7;color:var(--muted)}.main{min-width:0}.top{height:76px;border-bottom:1px solid var(--line);background:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 34px;position:sticky;top:0;z-index:8}.top-user{display:flex;align-items:center;gap:12px;font-size:13px}.avatar{width:34px;height:34px;border-radius:12px;background:var(--line);color:var(--green);display:grid;place-items:center;font-weight:800}.pill{background:var(--leaf);border-radius:30px;padding:5px 10px;color:#3f7652;font-size:11px;font-weight:750}.pill.warn{background:var(--warn);color:#976b28}.pill.red{background:#fceaea;color:var(--red)}.content{max-width:1400px;margin:auto;padding:32px 34px 70px}.overline{font-size:11px;font-weight:800;color:var(--green2);letter-spacing:1.35px;text-transform:uppercase}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.page-head h1{font-size:30px;letter-spacing:-1.1px;margin:8px 0 7px;font-weight:760}.sub{color:var(--muted);line-height:1.65;font-size:14px;margin:0}.btn{background:var(--green);color:#fff;border-radius:11px;padding:11px 17px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43px;transition:.2s}.btn:hover{background:var(--green2)}.btn.outline{background:#fff;color:var(--green);border:1px solid var(--line)}.btn.outline:hover{background:var(--leaf)}.btn.light{background:var(--leaf);color:var(--green)}.btn.tiny{min-height:34px;padding:7px 11px;font-size:12px}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:21px;box-shadow:var(--shadow);min-width:0}.card h2,.card h3{font-size:16px;margin:0 0 15px;letter-spacing:-.2px}.metric{font-size:29px;letter-spacing:-.7px;font-weight:780;margin:18px 0 5px}.metriclabel{display:flex;align-items:center;justify-content:space-between;gap:7px;color:var(--muted);font-size:12px}.metriclabel .ico{background:var(--leaf);box-sizing:content-box;padding:8px;border-radius:10px;color:var(--green)}.muted{color:var(--muted)}.small{font-size:12px}.layout2{display:grid;grid-template-columns:1.15fr .85fr;gap:17px;margin-top:18px}.row{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--leaf);padding:13px 0}.row:last-child{border-bottom:0}.row p{margin:4px 0 0}.row .grow{flex:1;min-width:0}.picture{width:54px;height:54px;flex-shrink:0;border-radius:13px;background:linear-gradient(145deg,var(--leaf),#f4fbf4);display:grid;place-items:center;color:var(--green2)}.feature{background:linear-gradient(110deg,var(--leaf),var(--cream));border:1px solid var(--line);border-radius:17px;padding:24px}.feature h3{font-size:19px;margin:8px 0}.feature p{line-height:1.7;color:var(--muted)}.form{display:grid;gap:14px}.field{display:grid;gap:7px}.field label{font-size:12px;font-weight:750;color:var(--muted-strong)}.field input,.field textarea,.field select,.search{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;min-height:43px;color:var(--text);outline:none}.field input:focus,.field textarea:focus,.field select:focus,.search:focus{border-color:var(--green2);box-shadow:0 0 0 3px var(--leaf)}.field textarea{min-height:90px;resize:vertical}.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.product{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}.product-art{height:168px;display:grid;place-items:center;background:radial-gradient(circle at 40% 40%,var(--cream),var(--line));color:var(--green2)}.product-body{padding:18px}.product-body h3{margin:9px 0;font-size:16px}.price{color:var(--green);font-size:20px;font-weight:800}.product-actions{display:flex;gap:9px;margin-top:14px}.product-actions .btn{flex:1}.split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:18px}.chat{height:390px;overflow-y:auto;border:1px solid var(--line);border-radius:13px;padding:17px;background:#fbfcfa;margin-bottom:15px}.bubble{max-width:90%;padding:13px 15px;border-radius:14px;font-size:14px;line-height:1.7;margin:0 0 13px}.bubble.bot{background:#fff;border:1px solid var(--line);border-top-left-radius:4px}.bubble.user{margin-left:auto;background:var(--green);color:#fff;border-top-right-radius:4px}.composer{display:flex;gap:9px}.composer input{flex:1;min-width:0}.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;background:#fff;text-align:left;font-size:13px}th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:var(--cream);padding:14px;white-space:nowrap}td{padding:15px 14px;border-top:1px solid var(--line);vertical-align:middle;min-width:70px}td .btn{white-space:nowrap}.banner{border:1px solid #efe0bf;padding:13px 15px;border-radius:11px;background:#fff8e8;color:#7f632e;font-size:13px;line-height:1.6;margin-bottom:19px}.notice{font-size:12px;color:var(--muted);line-height:1.6}.empty{padding:30px;text-align:center;color:var(--muted)}.auth-bg{min-height:100vh;background:radial-gradient(circle at 15% 25%,var(--leaf) 0,transparent 36%),var(--cream);display:grid;place-items:center;padding:22px}.auth-box{background:white;box-shadow:0 20px 60px #1d186013;border:1px solid var(--line);border-radius:22px;width:min(430px,100%);padding:35px}.auth-box .brand{justify-content:center;padding:3px 0 18px}.auth-box h1{text-align:center;font-size:23px}.auth-box p{text-align:center}.seg{display:flex;border-radius:11px;background:var(--leaf);padding:4px;gap:4px}.seg button{flex:1;padding:10px;border-radius:8px;background:transparent;color:var(--muted)}.seg button.active{color:var(--green);background:#fff;font-weight:700;box-shadow:0 2px 8px #00000007}.dialog-bg{position:fixed;inset:0;z-index:20;background:#110f2e8c;padding:20px;display:grid;place-items:center}.dialog{width:min(580px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:19px;padding:26px;box-shadow:0 25px 80px #0003}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.dialog-head h2{font-size:20px;margin:0}.icon-button{background:var(--leaf);color:var(--green);border-radius:9px;padding:8px;display:grid;place-items:center}.footer{text-align:center;margin:35px auto;color:var(--muted);font-size:11px}#toast{display:none;position:fixed;z-index:40;bottom:22px;right:24px;max-width:380px;background:var(--ink);color:#fff;box-shadow:0 12px 35px #15133a40;border-radius:12px;padding:15px 19px;font-size:13px}.hamburger{display:none}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.center-loading{text-align:center;padding:100px 10px;color:var(--muted)}@media(max-width:1100px){.shell{grid-template-columns:216px minmax(0,1fr)}.content{padding:26px 24px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:730px){.shell{display:block}.sidebar{display:none;position:fixed;z-index:12;top:0;bottom:0;left:0;width:255px;overflow:auto;box-shadow:18px 0 45px #0002}.sidebar.show{display:block}.hamburger{display:grid}.top{height:64px;padding:0 17px}.top-user .user-label{display:none}.content{padding:25px 14px 45px}.page-head{align-items:flex-start}.page-head h1{font-size:25px}.page-head>.btn{font-size:11px}.layout2,.split{grid-template-columns:1fr}.cards{gap:10px}.card{padding:16px}.product-grid{grid-template-columns:1fr}.product-art{height:130px}.row{gap:10px}.picture{width:44px;height:44px}.info-grid{grid-template-columns:1fr}}
/* V2 journal timeline + private photos */.timeline{border-left:2px solid var(--line);margin:8px 0 18px 6px;padding-left:16px}.tl-item{position:relative;padding:4px 0 14px}.tl-item:before{content:"";position:absolute;left:-22px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--green2)}.tl-date{font-weight:700;font-size:13px;color:var(--green)}.tl-item p{margin:4px 0}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px}.photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--leaf)}.photo-grid img.broken{border:1px dashed var(--line)}.photo-queue{display:grid;gap:8px}.pq-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:6px}.pq-item img{width:56px;height:56px;object-fit:cover;border-radius:8px}.pq-meta{flex:1;min-width:0}.pq-meta progress{width:100%}.pq-err{color:var(--red);font-size:13px}
/* G9 review 27/10/2026: tablet/phone layout fixes */
.pq-file{width:56px;height:56px;flex:none;border-radius:8px;border:1px dashed var(--line);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--red);background:#fbfcfa}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.chat{height:clamp(300px,55vh,520px)}
.top-left{min-width:0;flex-wrap:nowrap}
.top-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-close,.sidebar-backdrop{display:none}
@media(max-width:1100px){.split{grid-template-columns:1fr}}
/* G9 review round 2 */
.brand-stack{display:flex;flex-direction:column;line-height:1.05}
.brand-stack small{margin-top:3px}
.brand-stack .brand-version{font-size:10px;font-weight:500;letter-spacing:0;color:var(--muted)}
.pill{white-space:nowrap}
.btn.upgrade{white-space:nowrap;background:#14171a;color:#fff;border:1px solid #c9a227;box-shadow:0 6px 18px #c9a22740}
.btn.upgrade:hover{background:#000;color:#f3d77a}
.ask-main{display:grid;gap:0;min-width:0}
.ask-main .product-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.sponsored-block{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.sponsored-block h3{margin:0 0 4px}
.product.sponsored{border-color:var(--sponsor-border)}
.product-art{position:relative}
/* E1-08 Family */
.num{font-variant-numeric:tabular-nums}
.family-layout{align-items:start}
.family-layout .row{flex-wrap:wrap}
.family-layout .row>.grow{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
@media(max-width:1100px){.family-layout{grid-template-columns:1fr}}
.refusal{border:1px solid #e9b8a8;background:#fdf1ec;border-radius:12px;padding:14px 16px;display:grid;gap:8px;margin:8px 0}
.refusal strong{color:var(--red)}
.inline-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline-form .field{flex:1 1 220px;margin:0}
.code-box{margin-top:12px;border:1px dashed var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:8px;background:#fbfcfa}
.code-box textarea{font-family:ui-monospace,Consolas,monospace;font-size:13px;width:100%}
.share-panel:empty{display:none}
.share-panel{margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:4px 14px 10px}
.share-row{cursor:pointer;gap:12px;align-items:center}
.share-row input{width:22px;height:22px;flex:none;accent-color:var(--green)}
.linkish{background:none;border:0;padding:0;color:var(--green);text-decoration:underline;cursor:pointer;font:inherit}
.sponsored-label{position:absolute;top:10px;left:10px;background:var(--warn);color:var(--sponsor);border:1px solid var(--sponsor-border);border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}
@media(max-width:730px){
.sidebar-backdrop{display:block;position:fixed;inset:0;z-index:11;background:#110f2e66}
.sidebar .brand{position:relative;padding-right:52px}
.sidebar-close{display:grid;position:absolute;right:0;top:50%;transform:translateY(-50%)}
.top-user{gap:8px}
.plant-row{flex-wrap:wrap}
.plant-row>.grow{flex:1 1 calc(100% - 60px);min-width:0}
.plant-row>.actions{flex-basis:100%;margin-left:54px}
}
@media(max-width:480px){.top-title{display:none}}
/* Care flow (E2-05..E2-09) */
.care-box{margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.care-box:empty{display:none}
.care-box h3{margin:0 0 6px}
.sug{border-top:1px solid var(--line);padding:10px 0;display:grid;gap:4px}
.sug-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between}
.sug p{margin:0}
.sug .actions,.today-row .actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.progress-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0}
.progress-stats div{display:grid;gap:2px;background:var(--leaf);border-radius:10px;padding:10px}
.progress-stats .num{font-size:22px;font-weight:800;color:var(--green)}
.before-after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.before-after figure{margin:0}
.before-after img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
.today-row{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.today-row:first-child{border-top:0}
.today-row .grow{min-width:0}
.today-row p{margin:2px 0}
.today-pic{width:56px;height:56px;flex:none;border-radius:12px;background:var(--leaf);display:grid;place-items:center;overflow:hidden;color:var(--green2)}
.today-pic img{width:100%;height:100%;object-fit:cover}
.hint{color:var(--green)}
.tiny-select{width:auto;min-height:36px;padding:4px 8px;font-size:13px}
.ai-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px;cursor:pointer}
.ai-toggle input{width:20px;height:20px;accent-color:var(--green)}
@media(max-width:600px){.progress-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Hỏi PTADE photos and voice (E2-13) */
.ask-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ask-tools label{cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.ask-queue{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ask-queue:empty{display:none}
.ask-queue .pq-item img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.bubble-photos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bubble-photos img{width:64px;height:64px;object-fit:cover;border-radius:8px}
#askVoice[aria-pressed="true"]{background:var(--warn);border-color:var(--gold)}
/* Plant profile (E2-04) */
.profile-box{margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.profile-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.profile-head h3{margin:0}
.profile-list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:12px 0 0}
.profile-list dt{color:var(--muted)}
.profile-list dd{margin:0}
.profile-more{margin:4px 0 12px}
.profile-more summary{cursor:pointer;font-weight:650;color:var(--green);min-height:44px;display:flex;align-items:center}
@media(max-width:480px){.profile-list{grid-template-columns:1fr}.profile-list dd{margin-bottom:6px}}
/* Plan payments (E1-09) */
.pay-open{margin-bottom:18px;border-color:var(--gold)}
.pay-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.pay-info{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:14px 0}
.pay-info dt{color:var(--muted)}
.pay-info dd{margin:0;overflow-wrap:anywhere}
.pay-code{font-size:17px;font-weight:700;letter-spacing:1px;background:var(--leaf);padding:3px 8px;border-radius:6px}
.pay-row{flex-wrap:wrap;gap:10px}
@media(max-width:480px){.pay-info{grid-template-columns:1fr}.pay-info dd{margin-bottom:6px}}
/* Plants page tiles and tabs (G9 E2-14, 28/10): two tiles per row on phones and tablets, more on wide screens. */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.tab{min-height:44px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--muted);font-weight:650}
.tab.on{background:var(--green);border-color:var(--green);color:#fff}
.tab-note{margin:0 0 14px}
.plant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:1100px){.plant-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}}
.plant-tile{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.plant-tile .pic{aspect-ratio:1/1;width:100%;display:grid;place-items:center;background:linear-gradient(145deg,var(--leaf),var(--cream));color:var(--green2);padding:0}
.plant-tile .pic .ico{width:30%;height:30%;stroke-width:1.2}
.plant-tile .pic img{width:100%;height:100%;object-fit:cover;display:block}
.plant-photo-box{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:16px 0}
.plant-photo{width:100%;max-height:300px;object-fit:cover;border-radius:12px;display:block}
.photo-pick{cursor:pointer;display:inline-flex;align-items:center}
.plant-tile .body{padding:12px 12px 4px;display:grid;gap:5px;min-width:0}
.plant-tile .body strong{overflow-wrap:anywhere}
.plant-tile .body .pill{justify-self:start;white-space:normal}
.plant-tile .body p{margin:0}
.plant-tile .actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 12px;margin-top:auto}
/* E5-01 / E2-15: posts with photos, hashtags, plant journeys, inbox */
.carousel{display:flex;align-items:flex-start;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:10px 0 4px;border-radius:12px}
.carousel .slide{flex:0 0 100%;aspect-ratio:4/3;max-height:420px;scroll-snap-align:start;border-radius:12px;overflow:hidden;background:var(--leaf)}
.carousel .slide img{width:100%;height:100%;object-fit:cover;display:block}
.linkish.tag{text-decoration:none;font-weight:600}
.journey{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
.journey .timeline{margin-bottom:4px}
.journey-pick{display:grid;gap:8px;max-height:46vh;overflow:auto;margin:10px 0}
.journey-entry{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.journey-entry input{margin-top:4px;width:18px;height:18px;flex:none}
.journey-entry .photo-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
.chat-thread{max-height:55vh;overflow:auto;margin-bottom:12px}
.bubble .shared-post{margin-top:8px;color:var(--ink,#1f2a1f)}
.bubble .shared-post .card{margin:0!important;box-shadow:none}
.journey .photo-grid{grid-template-columns:repeat(auto-fill,minmax(96px,120px))}

/* E10-08 weather in the plant journal: severity always has words, touch targets ≥ 44px, no horizontal page scroll. */
.wx-panel{border:1px solid var(--line);border-radius:15px;padding:16px;margin:16px 0;background:var(--paper)}
.wx-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.wx-head h3{margin:0;font-size:16px}
.wx-now{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:10px 0}
.wx-temp{font-size:34px;font-weight:800;color:var(--green);display:flex;flex-direction:column;line-height:1.1}
.wx-facts p{margin:2px 0;font-size:13px}
.wx-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;max-width:100%}
.wx-hour{flex:0 0 auto;min-width:88px;border:1px solid var(--line);border-radius:11px;padding:8px;display:flex;flex-direction:column;gap:2px;background:var(--cream)}
.wx-week summary,.wx-history summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.wx-day{flex-wrap:wrap;gap:6px 12px}
.wx-tools,.wx-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.wx-panel .btn,.wx-panel select,.wx-choice{min-height:44px}
.wx-tools .btn,.wx-actions .btn{flex:0 1 auto}
.wx-actions select{width:auto;min-width:150px}
.wx-alerts{margin-top:12px}
.wx-alert{border:1px solid var(--line);border-left:5px solid var(--mint);border-radius:12px;padding:12px;margin:10px 0;background:#fff}
.wx-alert.sev-watch{border-left-color:#d3a24e}
.wx-alert.sev-action,.wx-alert.sev-urgent{border-left-color:var(--red)}
.wx-alert-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wx-why{background:var(--cream);border-radius:10px;padding:8px 12px;margin:8px 0}
.wx-why ul{margin:4px 0 4px 18px;padding:0;font-size:13px}
.wx-choices{border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin:0}
.wx-choices legend{font-weight:700;font-size:13px;padding:0 4px}
.wx-choice{display:flex;gap:10px;align-items:center;font-size:14px;padding:4px 0}
.wx-choice input{width:20px;height:20px;flex:none}
.wx-results{max-height:240px;overflow:auto}
.wx-quiet{display:flex;gap:12px;flex-wrap:wrap}
.wx-quiet input{min-height:44px}
.wx-badge{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.wx-badge .pill{border:0;cursor:pointer;min-height:28px}
.notif.unread{background:var(--cream)}
.notif .btn{flex:0 0 auto}
@media(max-width:730px){.wx-temp{font-size:28px}.wx-actions .btn,.wx-tools .btn{flex:1 1 140px}.wx-actions select{flex:1 1 140px}}
/* === E7 Sản phẩm: ảnh sản phẩm (E7-01) === */
.pm-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#f4f1e8}
.product-art:has(.pm-card-img){overflow:hidden}
.product-art:has(.pm-card-img) .sponsored-label{z-index:1}
.pm-gallery{margin-bottom:16px}
.pm-main{width:100%;max-height:360px;object-fit:contain;border-radius:12px;background:var(--cream);display:block}
.pm-thumbs{display:flex;gap:8px;overflow-x:auto;padding:8px 0 2px}
.pm-thumb{flex:0 0 auto;width:64px;height:64px;min-width:44px;padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer}
.pm-thumb.on{border-color:var(--green2)}
.pm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pm-review{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pm-review img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.pm-row-img{width:40px;height:40px;object-fit:cover;border-radius:8px;vertical-align:middle;margin-right:8px}
.pm-list{display:grid;gap:10px;margin:12px 0}
.pm-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px}
.pm-item img{width:88px;height:88px;object-fit:cover;border-radius:10px;flex:none}
.pm-item-tools{display:grid;gap:6px;flex:1;min-width:0}
.pm-item-tools select{min-height:44px}
.pm-item-tools .btn{min-height:44px}
@media(max-width:730px){.pm-item img{width:72px;height:72px}}
/* === E10 Thời tiết: cảnh báo chính thức (E10-14) === */
.pill.danger{background:#fde4e1;color:var(--danger-strong)}
.wx-official{border:2px solid #d9534f;border-radius:12px;padding:12px 14px;margin:0 0 12px;background:#fff8f7}
.wx-official h4{margin:0;font-size:17px}
.wx-official-body{white-space:pre-line;font-size:16px;line-height:1.5;margin:8px 0}
.wx-official a{color:var(--danger-strong);font-weight:650;word-break:break-word}
.wx-provinces{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 12px;border:1px solid var(--line);border-radius:12px;padding:10px}
.wx-provinces label{min-height:44px;display:flex;align-items:center;gap:8px}
/* === E3 Cửa hàng: trang gian hàng (E3-01/02/03/11) === */
.link-btn{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--green2);text-decoration:underline;cursor:pointer;min-height:auto}
.shop-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;text-align:left}
.shop-hero a{color:var(--green2);font-weight:600}
.shop-link img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.shop-back{margin-bottom:12px}
.shop-hero{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:20px;padding-bottom:12px}
.shop-preview{padding:0;overflow:hidden}
.shop-preview .shop-hero{border:0;margin:0}
.shop-banner{aspect-ratio:4/1;min-height:96px;background:linear-gradient(120deg,var(--line),var(--cream))}
.shop-banner img{width:100%;height:100%;object-fit:cover;display:block}
.shop-id{display:flex;gap:16px;align-items:flex-end;padding:0 18px;margin-top:-36px}
.shop-id h2{margin:40px 0 4px}
.shop-logo{width:88px;height:88px;flex:none;border-radius:50%;border:4px solid #fff;background:#f4f1e8;display:grid;place-items:center;overflow:hidden;color:var(--green2);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.shop-logo img{width:100%;height:100%;object-fit:cover}
.shop-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:14px;color:var(--muted)}
.shop-facts span{display:inline-flex;align-items:center;gap:6px}
.shop-intro{padding:0 18px;margin:12px 0 4px;white-space:pre-line}
.shop-hero>.small{padding:0 18px;margin:2px 0}
.sp-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
@media(max-width:730px){.shop-id{flex-direction:column;align-items:flex-start;margin-top:-30px}.shop-id h2{margin-top:4px}.shop-logo{width:72px;height:72px}}
/* === E3 Cửa hàng: chat với gian hàng (E3-04/05) === */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shop-actions{margin:-8px 0 20px}
.chat-layout{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:16px;align-items:start}
.chat-list{padding:6px;display:grid;gap:4px;max-height:70vh;overflow:auto}
.chat-item{display:flex;gap:8px;align-items:center;flex-wrap:wrap;text-align:left;width:100%;min-height:56px;padding:10px;border:0;border-radius:10px;background:none;cursor:pointer;font:inherit}
.chat-item.on,.chat-item:hover{background:var(--leaf)}
.chat-last{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.chat-thread{display:flex;flex-direction:column;gap:10px;min-height:320px}
.chat-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}
.chat-msgs{display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow:auto;padding:4px}
.chat-msgs-modal{max-height:45vh;border:1px solid var(--line);border-radius:12px;padding:10px;margin:10px 0}
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:85%}
.chat-msg.mine{align-self:flex-end;align-items:flex-end}
.chat-bubble{background:var(--cream);border-radius:14px;padding:8px 12px}
.chat-msg.mine .chat-bubble{background:var(--line)}
.chat-bubble.flagged{outline:2px solid #d9534f}
.chat-bubble p{margin:2px 0;white-space:pre-line;font-size:16px}
.chat-chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin:0 4px 4px 0;background:#fff;cursor:default}
button.chat-chip{cursor:pointer;min-height:32px}
.chat-seen{align-self:flex-end;margin:0}
.chat-form{display:flex;gap:8px;align-items:flex-end}
.chat-form textarea{flex:1;min-height:56px;font-size:16px}
.chat-form .btn{min-height:48px}
@media(max-width:730px){.chat-layout{grid-template-columns:1fr}.chat-msg{max-width:100%}}
/* === E3 Cửa hàng: Mua ngay, thanh toán (E3-06/07) === */
.buy-actions{display:flex;gap:10px;flex-wrap:wrap}
.buy-actions .btn{flex:1 1 160px}
.pay-choice{border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.pay-choice label{min-height:44px;display:flex;align-items:center;gap:8px}
.pay-info .code{font-size:18px;letter-spacing:1px}
/* === E4 Đơn hàng: dòng thời gian (E4-01) === */
.order-states{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.order-timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line);display:grid;gap:12px}
.order-timeline li{position:relative;display:grid;gap:2px}
.order-timeline li::before{content:"";position:absolute;left:-25px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--green2)}
/* === E3 Cửa hàng: đánh giá sản phẩm (E3-10) === */
.stars{color:#c98a12;letter-spacing:1px}
.rating-line{margin:2px 0 6px}
.pd-reviews{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}
.rv-summary{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.rv-avg{display:grid;justify-items:center;gap:2px;min-width:96px}
.rv-avg strong{font-size:32px;line-height:1}
.rv-bars{flex:1;display:grid;gap:4px;min-width:180px}
.rv-bar{display:grid;grid-template-columns:40px 1fr 28px;gap:8px;align-items:center;font-size:13px}
.rv-track{height:8px;border-radius:4px;background:var(--leaf);overflow:hidden}
.rv-track span{display:block;height:100%;background:#c98a12}
.rv-item{border-top:1px solid var(--line);padding:10px 0;display:grid;gap:4px}
.rv-item p{margin:0}
.rv-photos{display:flex;gap:6px;flex-wrap:wrap}
.rv-photos img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.rv-reply{background:var(--cream);border-radius:10px;padding:8px 10px}
.rv-reply p{margin:2px 0 0}
.rv-stars label{min-height:44px;display:flex;align-items:center;gap:8px}
.rv-admin{display:grid;gap:6px;margin-bottom:12px}
/* === E7 Sản phẩm: giá sale (E7-02) === */
.list-price{color:var(--muted);font-weight:400;font-size:.8em}
.pill.sale{background:#fde4e1;color:var(--danger-strong);font-size:12px}
.sale-fields{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:8px 0}
/* === E3 Cửa hàng: trang chi tiết sản phẩm (E3-09) === */
.pdp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start;margin-bottom:20px}
.pdp-media .pm-gallery{margin:0}
.pdp-media .pm-main{max-height:480px}
.pdp-noimg{aspect-ratio:1/1;max-height:420px;display:grid;place-items:center;align-content:center;gap:8px;background:#f4f1e8;border-radius:12px;color:var(--green2)}
.pdp-info h1{margin:6px 0 4px;font-size:26px;line-height:1.25}
.pdp-stats{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
.pdp-stats p{margin:2px 0}
.pdp-price{background:var(--cream);border-radius:12px;padding:12px 14px;margin:10px 0 14px}
.pdp-now{font-size:28px;color:var(--danger-strong);margin-right:6px}
.pdp-price p{margin:4px 0 0}
.pdp-info fieldset{border:0;padding:0;margin:0;min-width:0}
.pdp-info legend{padding:0;margin-bottom:8px;font-weight:650}
.pdp-chips{display:flex;flex-wrap:wrap;gap:8px}
.pdp-chip{position:relative;display:inline-flex}
.pdp-chip input{position:absolute;opacity:0;width:1px;height:1px}
.pdp-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:15px}
.pdp-chip input:checked+span{border-color:var(--green2);background:var(--leaf);font-weight:650}
.pdp-chip input:focus-visible+span{outline:3px solid #b3aef5;outline-offset:2px}
.pdp-chip.off span{color:var(--muted);background:#f4f4f1;cursor:not-allowed;text-decoration:line-through}
.pdp-qty{display:grid;grid-template-columns:auto 110px 1fr;align-items:center;gap:10px}
.pdp-qty label{margin:0}
.pdp-qty input{min-height:44px}
.pdp-shop{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.pdp-shop .shop-logo{width:64px;height:64px;border-width:2px}
.pdp-shop .actions{margin:0}
.pdp-section{margin-bottom:20px}
.pdp-section h2{margin-top:0}
.pdp-facts{display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:8px 16px;margin:0 0 16px}
.pdp-facts dt{color:var(--muted)}
.pdp-facts dd{margin:0;white-space:pre-line}
.pdp-desc{white-space:pre-line;line-height:1.6}
.pdp-section .pd-reviews{margin:0;border:0;padding:0}
/* === E7 Sản phẩm: mô tả có cấu trúc (E7-07) === */
.pdp-warn{background:#fff6e5;border-left:4px solid #c98a12;border-radius:10px;padding:4px 14px;margin:12px 0}
.pdp-warn h3{display:flex;align-items:center;gap:8px;color:#7a5208}
@media(max-width:900px){.pdp{grid-template-columns:1fr}}
@media(max-width:480px){.pdp-facts{grid-template-columns:1fr}.pdp-facts dd{margin-bottom:6px}.pdp-qty{grid-template-columns:auto 1fr}.pdp-qty span{grid-column:1/-1}.pdp-shop .actions .btn{flex:1 1 100%}}
/* === UI-00: reusable screen foundations === */
.ui-preview-banner { border-left: 4px solid var(--focus); background: var(--warn); color: #614000; }
.ui-fixture-label { font-weight: 700; color: #614000; }
.ui-soon { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ui-soon small, .ui-no-data { color: var(--muted-strong); }
.ui-soon button:disabled { opacity: .7; cursor: not-allowed; }
.ui-no-data { padding: 16px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.ui-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
.ui-tab { flex-shrink: 0; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 24px; background: white; color: var(--green); font: inherit; cursor: pointer; }
.ui-tab.active { background: var(--green); color: white; }
.ui-tab:disabled { opacity: .65; cursor: not-allowed; }
.ui-tab-count { font-weight: 700; }
.ui-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0; }
.ui-filter-bar .field { flex: 1 1 160px; min-width: 0; }
.ui-filter-bar input, .ui-filter-bar select { width: 100%; min-height: 44px; box-sizing: border-box; }
.ui-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 8px; align-items: center; }
.ui-breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--muted-strong); }
.ui-breadcrumb button { min-height: 44px; background: none; border: none; color: var(--green); text-decoration: underline; font: inherit; cursor: pointer; }
.ui-tab:focus-visible, .ui-breadcrumb button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* === UI-01: seller product editor === */
.pe-dialog { width: min(1060px, 96vw); max-width: 1060px; }
.pe-steps { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; color: var(--muted-strong); }
.pe-steps [aria-current="step"] { color: var(--green); font-weight: 700; text-decoration: underline; }
.pe-variant { margin: 14px 0; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; min-width: 0; }
.pe-variant legend { font-weight: 700; padding: 0 6px; }
.pe-variant-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.pe-cell { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pe-cell input { min-width: 0; width: 100%; box-sizing: border-box; min-height: 44px; }
.pe-photos { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0; }
.pe-photo { flex: 0 1 210px; min-width: 0; }
.pe-photo img { width: 100%; height: 150px; object-fit: contain; background: var(--leaf); border-radius: 10px; }
.pe-photo label { display: flex; flex-direction: column; gap: 6px; }
.pe-photo .actions { flex-wrap: wrap; margin-top: 8px; }
.pe-editor select, .pe-editor input[type="file"] { min-height: 44px; max-width: 100%; }
.pe-footer { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; }
.pe-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pe-text { white-space: pre-wrap; overflow-wrap: anywhere; }
#peError[hidden] { display: none; }
@media(max-width:768px) { .pe-variant-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .pe-preview { grid-template-columns: 1fr; } }
@media(max-width:400px) { .pe-variant-grid { grid-template-columns: minmax(0,1fr); } }
/* === UI-02: own-shop product cards === */
.inventory-search { margin: 12px 0 18px; }
.inventory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.inventory-card { min-width: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: white; }
.inventory-art { height: 180px; background: var(--leaf); display: grid; place-items: center; color: var(--green); }
.inventory-art img { width: 100%; height: 180px; object-fit: contain; }
.inventory-body { padding: 16px; overflow-wrap: anywhere; }
.inventory-body h2 { font-size: 18px; margin: 12px 0 6px; }
.inventory-price { color: var(--green); font-weight: 700; }
.inventory-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.inventory-stats dt { color: var(--muted); }
.inventory-stats dd { margin: 5px 0 0; font-weight: 700; }
.inventory-note { padding: 10px; background: var(--warn); border-radius: 8px; font-size: 13px; }
.inventory-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inventory-actions .btn { min-height: 44px; padding: 8px 12px; font-size: 13px; }
@media(max-width:1100px) { .inventory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:500px) { .inventory-grid { gap: 10px; } .inventory-art,.inventory-art img { height: 120px; } .inventory-body { padding: 10px; } .inventory-body h2 { font-size: 16px; } .inventory-stats { gap: 8px; } }
/* === UI-03: variant price audit === */
.ph-dialog { width: min(820px,96vw); max-width: 820px; }
.ph-panel { overflow-wrap: anywhere; }
.ph-timeline { list-style: none; padding: 0 0 0 18px; border-left: 2px solid var(--mint); }
.ph-timeline li { padding: 14px; margin: 16px 0; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; }
.ph-timeline h4 { font-size: 16px; margin: 0 0 10px; }
.ph-timeline p { font-size: 14px; }
.ph-timeline dl { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.ph-timeline dt { font-size: 13px; color: var(--muted); }
.ph-timeline dd { margin: 4px 0; font-weight: 700; }
.ph-panel select, #phBack { min-height: 44px; max-width: 100%; }
/* UI-02 mobile review: keep the create action legible beside long headings. */
@media(max-width:500px) { .inventory-page .page-head { flex-direction: column; gap: 14px; } .inventory-page .page-head > .btn { white-space: nowrap; min-height: 44px; font-size: 14px; } }
/* === UI-04..07: order cards, detail and packing slip === */
.ou-card { margin: 16px 0; }
.ou-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ou-shop { background: none; color: var(--green); padding: 8px 0; min-height: 44px; text-decoration: underline; text-align: left; }
.ou-item { display: flex; gap: 14px; align-items: center; margin: 16px 0; overflow-wrap: anywhere; }
.ou-item img,.ou-art { width: 70px; height: 70px; object-fit: contain; background: var(--leaf); border-radius: 10px; flex-shrink: 0; }
.ou-art { display: grid; place-items: center; color: var(--green); }
.ou-total { text-align: right; }
.ou-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
.ou-actions .btn { min-height: 44px; }
.ou-detail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.ou-detail .card { min-width: 0; overflow-wrap: anywhere; }
.ou-print-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.ou-print-tools select { min-height: 44px; }
.ou-slip { color: #000; background: #fff; overflow-wrap: anywhere; padding: 10px; }
.ou-slip table { width: 100%; border-collapse: collapse; }
.ou-slip th,.ou-slip td { padding: 8px 4px; text-align: left; border-bottom: 1px solid #999; }
@media(max-width:768px) { .ou-detail { grid-template-columns: minmax(0,1fr); } .ou-total { text-align: left; } }
@media print {
 body.ou-printing > :not(#modal) { display: none !important; }
 body.ou-printing #modal { display: block; position: static; padding: 0; background: white; }
 body.ou-printing #modal .dialog { display: block; width: auto; max-width: none; max-height: none; overflow: visible; padding: 0; box-shadow: none; border-radius: 0; }
 body.ou-printing #modal .dialog > :not(#ouSlipHost) { display: none !important; }
 body.ou-printing .ou-slip { padding: 0; font-size: 10pt; }
 body.ou-printing .ou-slip h2 { font-size: 13pt; }
 body.ou-printing .ou-slip tr { break-inside: avoid; }
 body.ou-printing .ou-slip thead { display: table-header-group; }
}
/* === UI-08/09: administrative queues and product review === */
.aq-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 20px 0; }
.aq-card { min-width: 0; overflow-wrap: anywhere; }
.aq-card h2 { font-size: 18px; }
.aq-card .ui-no-data { margin: 10px 0 16px; font-size: 14px; }
.aq-count { font-size: 30px; font-weight: 750; color: var(--green); margin: 14px 0; }
.ar-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.ar-list .card { min-width: 0; overflow-wrap: anywhere; }
.ar-list .btn,.aq-card .btn { min-height: 44px; }
.ar-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 20px 0; }
.ar-layout .card { min-width: 0; margin-bottom: 18px; }
.ar-gallery { display: grid; gap: 18px; }
.ar-gallery figure { margin: 0; }
.ar-gallery img { display: block; max-width: 100%; width: 100%; max-height: 520px; object-fit: contain; background: var(--leaf); }
.ar-gallery figcaption { margin: 8px 0; }
.ar-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ar-checks { border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.ar-checks .wx-choice { min-height: 44px; }
.ar-example { background: var(--warn); padding: 14px; border: 1px dashed var(--focus); border-radius: 10px; }
#adminProductReviewForm select { min-height: 44px; max-width: 100%; }
#arError { color: var(--red); }
@media(max-width:1100px) { .aq-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:768px) { .aq-grid,.ar-list,.ar-layout { grid-template-columns: minmax(0,1fr); } }
/* === UI-12/13: explicitly simulated ads and seller reports === */
/* UI-14/15: live community content and clearly separated previews. */
.cu-feed { max-width:850px; }
.cu-page { max-width:1180px; margin:auto; }
.cu-page .page-head { margin-bottom:24px; }
.cu-layout { display:grid; grid-template-columns:minmax(0,740px) minmax(230px,290px); gap:28px; align-items:start; }
.cu-layout .cu-feed { min-width:0; }
.cu-composer { padding:20px; margin-bottom:18px; }
.cu-compose-row { display:flex; align-items:center; gap:12px; }
.cu-compose-prompt { flex:1; min-width:0; text-align:left; padding:14px 18px; border:1px solid var(--line); border-radius:24px; background:var(--cream); color:var(--muted-strong); font-size:15px; cursor:pointer; }
.cu-compose-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.cu-compose-footer>span { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:13px; }
.cu-compose-footer .btn { white-space:nowrap; min-height:44px; }
.cu-story-section { padding:16px 20px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.cu-page .cu-feed [data-preview-banner] { font-size:12px; padding:8px 12px; line-height:1.5; border-left-width:3px; margin-bottom:10px; }
.cu-page .ui-fixture-label { font-size:11px; font-weight:600; margin:8px 0; color:#89652c; }
.cu-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cu-section-heading h2 { font-size:16px; margin:4px 0; }
.cu-section-heading>span { font-size:11px; color:var(--muted); }
.cu-page .cu-stories { padding:12px 0 0; gap:22px; }
.cu-page .cu-story-button { padding:0; border:0; min-width:84px; gap:7px; font-size:12px; background:none; }
.cu-story-ring { display:grid; place-items:center; width:62px; height:62px; border-radius:50%; border:2px solid var(--green2); outline:3px solid var(--leaf); outline-offset:2px; background:var(--line); }
.cu-page .cu-tabs { display:flex; gap:25px; margin:20px 0; border-bottom:1px solid var(--line); }
.cu-tabs>button { background:none; border:0; border-bottom:3px solid transparent; padding:13px 0; color:var(--muted); font-size:15px; cursor:pointer; min-height:48px; }
.cu-tabs>button[aria-pressed=true] { border-bottom-color:var(--green); color:var(--green); font-weight:700; }
.cu-tabs small { font-size:10px; border-radius:12px; background:var(--leaf); padding:3px 6px; margin-left:4px; }
.cu-empty { color:var(--muted); padding:0 0 15px; font-size:13px; }
.cu-empty strong { font-weight:500; }.cu-empty p { margin:4px 0; }
.cu-page .cu-live-post { border:0; background:#fff; border-radius:18px; border:1px solid var(--line); margin-bottom:18px; padding-bottom:0; overflow:hidden; }
.cu-live-post .post { box-shadow:none; border:0; margin-bottom:0!important; }
.cu-live-post .carousel { margin:16px -26px; border-radius:0; }
.cu-page .cu-post-tools { padding:12px 16px; border-top:1px solid var(--line); font-size:12px; }
.cu-post-tools summary { cursor:pointer; min-height:30px; color:var(--muted); }
.cu-post-tools summary span { float:right; font-size:11px; }
.cu-sample-post { padding:20px; overflow:hidden; }
.cu-author { display:flex; align-items:center; gap:10px; }
.cu-author strong { font-size:14px; }.cu-author p { margin:4px 0 0; font-size:12px; color:var(--muted); }
.cu-sample-chip { margin-left:auto; font-size:10px; padding:5px 8px; border-radius:12px; background:#f3ebd9; color:#85622c; white-space:nowrap; }
.cu-caption { font-size:18px; font-weight:600; margin-bottom:6px; }
.cu-page .cu-photo-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:3px; margin:18px -20px 0; border-radius:0; overflow:hidden; }
.cu-photo-grid .slide { position:relative; aspect-ratio:auto; height:300px; border-radius:0; }
.cu-photo-grid svg { width:100%; height:100%; object-fit:cover; }
.cu-photo-grid .slide>span { position:absolute; bottom:10px; left:10px; font-size:10px; background:#ffffffde; padding:4px 7px; border-radius:5px; }
.cu-sample-actions { display:flex; border-bottom:1px solid var(--line); margin-top:8px; }
.cu-sample-actions button { flex:1; padding:14px 0; border:0; background:none; color:var(--muted); font-size:12px; min-height:44px; }
.cu-sample-note { font-size:11px; color:var(--muted); margin:10px 0; }
.cu-sample-post>.cu-post-tools { margin:0 -20px -20px; }
.cu-video-preview { border:1px solid var(--line); padding:16px; border-radius:14px; margin-top:18px; background:#fff; }
.cu-video-preview>summary { cursor:pointer; font-size:13px; color:var(--green); min-height:26px; }
.cu-video-preview>summary>span { color:var(--muted); font-size:11px; float:right; }
.cu-video-preview .ui-preview { margin-top:16px; }
.cu-sidebar { padding:0; border:0; background:transparent; min-height:0; position:static; }
.cu-sidebar .card { padding:24px; margin-bottom:18px; box-shadow:none; }
.cu-sidebar h2 { font-size:20px; line-height:1.45; }.cu-sidebar p { font-size:14px; line-height:1.8; color:var(--muted); }
.cu-rail-icon { display:inline-grid; place-items:center; width:52px; height:52px; background:var(--line); border-radius:16px; color:var(--green); }
.cu-sidebar .btn { font-size:13px; width:100%; min-height:44px; }
.cu-guidelines h2 { font-size:16px; }.cu-guidelines ul { padding-left:18px; font-size:13px; color:var(--muted); line-height:1.8; }.cu-guidelines li { margin:10px 0; }
@media(max-width:1150px) { .cu-layout { grid-template-columns:minmax(0,1fr); }.cu-sidebar { display:none; }.cu-page { max-width:760px; } }
@media(max-width:500px) { .cu-photo-grid .slide { height:190px; } }
@media(max-width:500px) { .cu-page .page-head h1 { font-size:26px; }.cu-composer { padding:16px; }.cu-compose-prompt { font-size:13px; padding:12px; }.cu-compose-footer>span { font-size:11px; }.cu-story-section { padding:14px; }.cu-section-heading { display:block; }.cu-section-heading>span { display:none; }.cu-page .cu-tabs { gap:20px; }.cu-tabs>button { font-size:14px; }.cu-sample-post { padding:16px; }.cu-page .cu-photo-grid { margin-left:-16px; margin-right:-16px; }.cu-sample-post>.cu-post-tools { margin:0 -16px -16px; }.cu-live-post .carousel { margin-left:-16px; margin-right:-16px; }.cu-author strong { font-size:13px; }.cu-sample-chip { font-size:9px; }.cu-photo-grid .slide>span { font-size:8px; left:5px; bottom:5px; } }
.cu-stories { display:flex; gap:14px; overflow-x:auto; padding:12px 0; }
.cu-story-button { min-width:120px; display:grid; justify-items:center; gap:10px; border:1px solid var(--mint); border-radius:18px; padding:18px; background:#fff; color:var(--green); cursor:pointer; }
.cu-tabs { margin:22px 0; }
.cu-live-post { margin-bottom:24px; border-bottom:1px solid var(--line); padding-bottom:18px; }
.cu-post-tools { padding:0 14px; }
.cu-story-bg { padding:0; }
.cu-story-dialog { width:100%; max-width:none; min-height:100dvh; border-radius:0; margin:0; }
#cuStory { max-width:720px; margin:auto; }
.cu-story-art,.cu-video-poster { display:grid; place-items:center; gap:16px; background:var(--leaf); border-radius:18px; padding:35px 20px; text-align:center; }
.cu-story-art { min-height:40vh; }
.cu-story-progress { display:flex; gap:8px; margin:12px 0; }
.cu-story-progress span { flex:1; height:5px; background:var(--line); }
.cu-story-progress .active { background:var(--green); }
.voucher-checkout { border:1px dashed var(--line-strong); border-radius:14px; padding:14px; margin:14px 0; }
/* UI-10/11: KYC preview and existing shop review. */
.kyc-types { border:0; padding:0; display:grid; gap:12px; }
.kyc-steps { display:flex; flex-wrap:wrap; gap:14px; margin:20px 0; }
.kyc-steps [aria-current] { color:var(--green); font-weight:700; text-decoration:underline; }
.kyc-summary dd { margin:4px 0 16px; overflow-wrap:anywhere; }
#kycPanel { scroll-margin-top:80px; }
.ad-dialog { width: 100%; max-width: 1040px; }
.ad-goals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.ad-goal { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 16px; cursor: pointer; overflow-wrap: anywhere; }
.ad-goal:has(input:checked) { border: 2px solid var(--green); background: var(--leaf); }
.ad-goal span { color: var(--muted); font-size: 14px; }
.ad-goal input { min-height: 24px; align-self: flex-start; }
.ad-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 16px 0; }
.ad-form-grid .field { min-width: 0; }
.ad-form-grid input,.ad-form-grid select { max-width: 100%; min-height: 44px; }
.ad-cost>div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 14px 0; }
.ad-cost dd { margin: 0; font-weight: 700; }
.ad-creative { padding: 18px; margin: 18px 0; border: 1px dashed var(--gold); border-radius: 12px; background: white; }
.ad-error { color: var(--red); }
#reportDatePreview { margin-top: 24px; }
#reportRealMetrics .card { min-width: 0; overflow-wrap: anywhere; }
#reportRealMetrics h3 { font-size: 17px; }
#reportRealMetrics .aq-count { font-size: 25px; }
@media(max-width:768px) { .ad-goals { grid-template-columns: repeat(2,minmax(0,1fr)); } .ad-form-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:400px) { .ad-goals { grid-template-columns: minmax(0,1fr); } .ad-cost>div { flex-direction: column; gap: 8px; } }
/* === E6 Đăng ký bán hàng (KYC) === */
.kyc-docs,.kyc-required{list-style:none;padding:0;margin:8px 0 16px}
.kyc-docs{display:grid;gap:10px}
.kyc-docs li{flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.kyc-docs li:first-child{border-top:0;padding-top:0}
.kyc-docs .grow{min-width:140px}
.kyc-required li{display:flex;align-items:center;gap:8px;min-height:32px}
.kyc-check{border:0;padding:0;margin:0 0 12px}
.kyc-check legend{font-weight:650;margin-bottom:6px}
.kyc-steps .link-btn[disabled]{color:var(--muted);text-decoration:none;cursor:not-allowed}
/* === E4-03 Chi tiết đơn: bảng tiền === */
.ou-money{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:14px 0 6px;border-top:1px solid var(--line);padding-top:12px}
.ou-money dt,.ou-money dd{margin:0}
.ou-money dd{text-align:right}

/* === E8 Quảng cáo === */
.ad-provinces { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 2px 12px; }
.ad-provinces legend { grid-column: 1 / -1; }
.ad-nationwide { grid-column: 1 / -1; font-weight: 700; }
.ad-budget-modes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 12px 0; }
.ad-post .post { margin-top: 6px; }
.sponsored-tag { align-self: flex-start; background: var(--warn); color: var(--sponsor); border: 1px solid var(--sponsor-border); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; }
@media(max-width:480px) { .ad-budget-modes { grid-template-columns: minmax(0,1fr); } }
.ad-quote-box { margin: 12px 0; }
.ad-row { align-items: flex-start; }
.ad-row .actions { margin-top: 8px; }
.ad-spec { margin: 12px 0; }
.ad-spec>div { display: grid; grid-template-columns: minmax(120px,190px) minmax(0,1fr); gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.ad-spec dt { color: var(--muted); }
.ad-spec dd { margin: 0; overflow-wrap: anywhere; }
.ad-metrics { margin: 12px 0; }
.ad-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ad-headline { margin: 0; }
.ad-slot { margin-bottom: 18px; }
.ad-prefs { max-width: 640px; }
@media(max-width:480px) { .ad-spec>div { grid-template-columns: minmax(0,1fr); gap: 2px; } }
/* === E9 Báo cáo === */
.rp-statuses { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-settle dt small { display: block; font-size: 13px; }
.rp-keywords { margin-top: 4px; }
#reportFilter { margin-bottom: 18px; }
#reportFilter .ou-actions { margin-bottom: 8px; }
#reportTiles { margin-bottom: 18px; }
#reportSku,#reportCampaigns,#reportSettlement { margin-top: 18px; }
/* === E11 Trung tâm quản trị === */
.aq-card.aq-waiting { border-color: var(--gold); }
.aq-section { margin-top: 22px; }
/* E5-06 post media, owner decision 01/11/2026 */
.pm-frame { display:block; position:relative; width:100%; max-width:560px; margin:12px auto 6px; padding:0; border:0; border-radius:12px; overflow:hidden; background:var(--leaf); cursor:zoom-in; }
.pm-frame>img, .pm-tile>img { display:block; width:100%; height:100%; object-fit:cover; }
.pm-portrait, .pm-video { aspect-ratio:4/5; }
.pm-square { aspect-ratio:1/1; }
.pm-video { background:var(--ink); cursor:pointer; }
.pm-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#fff; color:var(--green); box-shadow:0 2px 10px #0004; }
.pm-time { position:absolute; right:10px; bottom:10px; padding:3px 8px; border-radius:8px; background:#000a; color:#fff; font-size:12px; }
.pm-grid { display:grid; gap:3px; cursor:default; }
.pm-tile { position:relative; min-width:0; min-height:0; padding:0; border:0; overflow:hidden; background:var(--leaf); cursor:zoom-in; }
.pm-n2 { grid-template-columns:1fr 1fr; }
.pm-n3 { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.pm-n3 .pm-tile:first-child { grid-row:1 / 3; }
.pm-n4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.pm-more { position:absolute; inset:0; display:grid; place-items:center; background:#0007; color:#fff; font-size:32px; font-weight:700; }
.pm-dialog { width:min(520px,calc(100vw - 24px)); }
.pm-player { aspect-ratio:9/19; height:min(78vh,860px); max-width:100%; margin:0 auto; border-radius:14px; overflow:hidden; background:#000; }
.pm-player video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.pm-view { margin:0; }
.pm-view .slide { aspect-ratio:auto; height:min(74vh,760px); max-height:none; background:var(--ink); }
.pm-view .slide img { object-fit:contain; }
.cu-story-photo { aspect-ratio:9/16; max-height:64vh; margin:8px auto; border-radius:12px; overflow:hidden; background:var(--ink); }
.cu-story-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.cu-post-tools .actions { margin-top:8px; }
#shopVoucherSearch { align-items:flex-end; margin-bottom:16px; }
.pm-play::after { content:''; margin-left:5px; border-style:solid; border-width:13px 0 13px 21px; border-color:transparent transparent transparent var(--green); }
.settle-table th, .settle-table td { padding:10px 7px; font-size:13px; vertical-align:top; }
.settle-table th { font-size:11px; letter-spacing:0; white-space:normal; }
.settle-table td:last-child .btn { margin-top:6px; white-space:nowrap; }

/* G9 01/11: with the side menu, a tablet leaves too little room for two columns. */
@media(max-width:1100px){.chat-layout{grid-template-columns:minmax(0,1fr)}.chat-list{max-height:220px}.chat-last{max-width:none}}
.chat-form textarea{flex:1;min-width:0}

/* Secondary greys, table header size and the .tab border were fixed at their source rules (B5, 02/11/2026). */
/* === UI-SYNC (02/11/2026): one style for the same component on every screen. Found by measuring computed styles on all
   menu pages at 360/1440 px (docs/testing/UI_STYLE_SYNC.md). Overrides only; earlier rules stay as they were. === */
/* Page header action: the shared mobile rule shrank it to 11px and it wrapped to 2–3 lines ("Tạo / chiến / dịch").
   The fix the product list already had (inventory-page) now applies everywhere. */
@media(max-width:730px){.page-head>.btn{font-size:13px;white-space:nowrap;flex:0 0 auto}}
@media(max-width:500px){.page-head{flex-direction:column;align-items:stretch;gap:14px}.page-head>.btn{align-self:flex-start;min-height:44px;font-size:14px}}
/* A section title outside a card fell back to the browser default (22.5px), bigger than the page title's sections elsewhere. */
h2{font-size:18px;letter-spacing:-.2px}
/* Chat composer (shop chat, buyer and seller) looked like a raw browser textarea: square, grey border. */
.chat-form textarea{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--text);outline:none;resize:vertical}
.chat-form textarea:focus{border-color:var(--green2);box-shadow:0 0 0 3px var(--leaf)}
/* Conversation names were browser-black instead of the text colour. */
.chat-item{color:var(--text)}
/* Owner decision 02/11/2026 (B1): small buttons are at least 40px tall on phones (34px before). */
@media(max-width:730px){.btn.tiny{min-height:40px}.icon-button{min-width:40px;min-height:40px}}
/* B7: seller application steps — a 4-step progress bar (numbered circles, connector, done ✓) instead of underlined text
   that wrapped on phones with 20px tap targets. Each step is at least 44px tall. */
.kyc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:4px 0 22px}
.kyc-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-height:64px;padding:4px 4px 8px;background:none;border:0;border-radius:12px;color:var(--muted);font:inherit;font-size:13px;font-weight:650;text-align:center;text-decoration:none;cursor:pointer}
.kyc-step:not(:first-child)::before{content:'';position:absolute;top:21px;left:calc(-50% + 24px);right:calc(50% + 24px);height:2px;border-radius:2px;background:var(--line)}
.kyc-step.done::before,.kyc-step[aria-current]::before{background:var(--green2)}
.kyc-step-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--line-strong);background:#fff;color:var(--muted);font-size:14px;font-weight:800}
.kyc-step-t{line-height:1.3}
.kyc-step.done,.kyc-step[aria-current]{color:var(--green);text-decoration:none}
.kyc-step.done .kyc-step-n{background:var(--leaf);border-color:var(--green2);color:var(--green)}
.kyc-step[aria-current]{font-weight:800}
.kyc-step[aria-current] .kyc-step-n{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 0 0 4px var(--leaf)}
.kyc-step:not([disabled]):not([aria-current]):hover{background:var(--cream)}
.kyc-step[disabled]{cursor:not-allowed;opacity:.55}
.kyc-step:focus-visible{outline:3px solid #b3aef5;outline-offset:2px}

/* === CHAT-02b (04/11/2026): friend chat page (friend_chat.js). Two columns from 901px, list then conversation below.
   Bubbles: theirs white on the left, mine light green on the right; touch targets at least 44px; text 16px. */
.dm{--dm-read:#167a4f;display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:16px;height:min(calc(100dvh - 250px),780px);min-height:480px}
.dm>.card{padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dm-list-tools{display:grid;gap:10px;padding:14px;border-bottom:1px solid var(--line)}
.dm-tabs{display:flex;gap:6px}
.dm-tabs button{flex:1;min-height:40px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--muted-strong);font-weight:650}
.dm-tabs button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.dm-net{display:none;padding:8px 14px;background:var(--warn);font-size:13px;color:var(--text)}
.dm-net.show{display:block}
.dm-items{overflow:auto;flex:1;padding:6px}
.dm-item{display:flex;gap:12px;align-items:center;width:100%;min-height:64px;padding:10px;border-radius:12px;background:none;text-align:left;color:var(--text)}
.dm-item:hover{background:var(--cream)}
.dm-item.on{background:var(--leaf)}
.dm-item:focus-visible,.dm-back:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dm-avatar{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--leaf);font-size:17px}
.dm-item-main{display:grid;gap:3px;min-width:0;flex:1}
.dm-item-top,.dm-item-bottom{display:flex;gap:8px;align-items:center;justify-content:space-between;min-width:0}
.dm-item-top strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-last{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:14px}
.dm-last.unread{color:var(--text);font-weight:700}
.dm-badge{flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.dm-more{margin:8px auto;display:block}
.dm-empty{padding:28px 16px;text-align:center}
.dm-empty p{margin:0 0 14px}
.dm-placeholder{margin:auto;text-align:center;color:var(--muted);padding:24px}
.dm-head{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.dm-head-name{display:grid;flex:1;min-width:0}
.dm-head-name strong{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-back{display:none;transform:scaleX(-1)}
.dm-menu{position:relative}
.dm-menu summary{list-style:none}
.dm-menu summary::-webkit-details-marker{display:none}
.dm-menu-pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px;white-space:nowrap;z-index:3}
.dm-menu-pop .linkish{min-height:44px;color:var(--danger-strong)}
.dm-msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:6px;background:var(--cream)}
.dm-older{align-self:center;margin-bottom:6px}
.dm-first{margin:auto;text-align:center}
.dm-day{align-self:center;margin:10px 0 4px}
.dm-day span{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700;color:var(--muted-strong)}
.dm-msg{display:flex;max-width:min(78%,560px)}
.dm-msg.mine{align-self:flex-end}
.dm-bubble{background:var(--paper);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:8px 12px 6px;min-width:84px}
.dm-msg.mine .dm-bubble{background:var(--leaf);border-color:var(--mint);border-radius:16px 4px 16px 16px}
.dm-msg.failed .dm-bubble{border-color:var(--danger-strong)}
.dm-bubble p{margin:0;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.dm-bubble .chat-chip{margin:6px 0 0;min-height:36px}
.dm-recalled{font-style:italic;color:var(--muted)}
.dm-meta{display:flex;gap:4px;align-items:center;justify-content:flex-end;font-size:12px;color:var(--muted-strong);margin-top:2px}
.dm-status{display:inline-flex;align-items:center;gap:4px}
.dm-status.read{color:var(--dm-read);font-weight:700}.dm-status.read .ico{stroke-width:2.4}
.dm-status.failed{color:var(--danger-strong);font-weight:700}
.dm-status.failed .linkish{color:var(--danger-strong);text-decoration:underline;min-height:32px}
.dm-ticks{display:inline-flex}
.dm-ticks .ico+.ico{margin-left:-8px}
.dm-composer{display:flex;gap:8px;align-items:flex-end;padding:10px 14px 4px;border-top:1px solid var(--line);background:var(--paper)}
.dm-composer textarea{flex:1;min-width:0;min-height:46px;max-height:140px;resize:none;font-size:16px;line-height:1.45;background:#fff;border:1px solid var(--line-strong);border-radius:12px;padding:11px 12px;color:var(--text);outline:none}
.dm-composer textarea:focus{border-color:var(--green2);box-shadow:0 0 0 3px var(--leaf)}
.dm-composer .btn{min-height:46px;min-width:72px}
.dm-hint{margin:0;padding:0 14px 10px;background:var(--paper)}
.dm-blocked{margin:10px 14px}
/* CHAT-03a photos: a grid inside the bubble (1 wide, 2 side by side, 3–4+ in a 2×2 grid), picked photos above the composer. */
.dm-msg.has-photos{width:min(78%,360px)}
.dm-msg.has-photos .dm-bubble{width:100%;padding:4px 4px 6px}
.dm-msg.has-photos .dm-bubble p{padding:6px 8px 0}
.dm-msg.has-photos .dm-meta{padding:0 8px}
.dm-photos{display:grid;gap:3px;border-radius:12px;overflow:hidden}
.dm-photos.n2,.dm-photos.n3,.dm-photos.n4{grid-template-columns:1fr 1fr}
.dm-photos.n3 .dm-photo:first-child{grid-column:1/-1}
.dm-photo{display:block;padding:0;border:0;background:var(--leaf);aspect-ratio:1;overflow:hidden;cursor:zoom-in}
.dm-photos.n1 .dm-photo{width:100%;max-height:420px} /* aspect-ratio of the photo is set inline, so its place is kept before it loads */
.dm-photo img{display:block;width:100%;height:100%;object-fit:cover}
.dm-photo:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
span.dm-photo{cursor:default;opacity:.75}
.dm-attach{padding:8px 14px 0;border-top:1px solid var(--line);background:var(--paper)}
.dm-attach-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.dm-attach-item{position:relative;flex:0 0 72px;height:72px;border-radius:10px;overflow:hidden;background:var(--leaf)}
.dm-attach-item img{width:100%;height:100%;object-fit:cover}
.dm-attach-x{position:absolute;top:2px;right:2px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(20,32,26,.72);color:#fff;display:grid;place-items:center}
.dm-attach p{margin:4px 0 0}
.dm-photo-btn{display:grid;place-items:center}
/* CHAT-03b plant card (photo, name, species, what is shared, open button) and journal milestone header; picker dialog. */
.dm-card{display:flex;gap:12px;align-items:flex-start;min-width:min(260px,60vw)}
.dm-card-pic{flex:0 0 72px;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--leaf);display:grid;place-items:center;padding:0;border:0;color:var(--green)}
.dm-card-pic img{width:100%;height:100%;object-fit:cover}
.dm-card-main{display:grid;gap:3px;min-width:0}
.dm-card-main strong{font-size:16px;overflow-wrap:anywhere}
.dm-card-kind{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.04em}
.dm-card-scope{font-size:13px;color:var(--muted-strong)}
.dm-card-main .btn{justify-self:start;margin-top:4px}
.dm-milestone{margin:0 0 6px;font-size:14px;line-height:1.45;color:var(--muted-strong)}
.dm-milestone .ico{vertical-align:-2px;color:var(--green)}
.dm-msg.mine span.dm-card-pic{background:var(--paper)}
.dm-msg.has-photos .dm-milestone{padding:4px 6px 0}
.dm-pick-plants,.dm-pick-logs{display:grid;gap:6px;max-height:50vh;overflow:auto}
.dm-pick-plant,.dm-pick-log{display:flex;gap:12px;align-items:center;width:100%;min-height:56px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-align:left;color:var(--text)}
.dm-pick-plant:hover,.dm-pick-log:hover{background:var(--cream)}
.dm-pick-plant>span{display:grid;gap:2px;min-width:0}
.dm-pick-plant .picture,.dm-pick-plant img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:0 0 48px}
.dm-pick-thumbs{display:flex;gap:4px}
.dm-pick-thumbs img{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--leaf)}
.dm-pick-head{margin:18px 0 6px}
.dm-scope{border:0;padding:0;margin:0 0 8px;display:grid;gap:8px}
.dm-scope legend{font-weight:700;margin-bottom:6px}
.dm-scope .wx-choice{align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:12px}
.dm-scope .wx-choice>span{display:grid;gap:2px}
.dm-scope .wx-choice:has(input:checked){border-color:var(--green2);background:var(--leaf)}
/* CHAT-04a: "⋯" beside one's own message, the options dialog, "Đã sửa" and the edit bar above the composer. */
.dm-msg{position:relative;align-items:center;gap:4px}
.dm-msg.mine{flex-direction:row-reverse}
.dm-msg-more{flex:0 0 32px;width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;opacity:.55}
.dm-msg-more:hover,.dm-msg-more:focus-visible{opacity:1;background:var(--paper)}
.dm-edited{font-style:italic;margin-right:4px}
.dm-actions{display:grid;gap:8px;margin-bottom:10px}
.dm-actions .btn{justify-content:center;min-height:46px}
.btn.outline.dm-danger{color:var(--danger-strong);border-color:var(--danger-strong)}
.dm-editbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line);background:var(--leaf);font-size:14px;font-weight:650;color:var(--green)}
.dm-editbar .linkish{min-height:36px}
/* CHAT-02c: unread friend messages on the menu item, and a dot on the phone menu button. */
.nav .nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:800;display:inline-grid;place-items:center}
.hamburger{position:relative}
.hamburger.has-unread::after{content:"";position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:var(--danger-strong);border:2px solid var(--paper)}
/* CHAT-03c: sending from the plant page. */
.dm-pick-friends{display:grid;gap:6px;max-height:40vh;overflow:auto}
.dm-pick-friends .wx-choice{align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.dm-pick-friends .wx-choice:has(input:checked){border-color:var(--green2);background:var(--leaf)}
.dm-pick-friends .dm-avatar{flex:0 0 34px;width:34px;height:34px;font-size:14px}
.tl-send{display:inline-flex;align-items:center;gap:5px;min-height:40px;margin-top:4px;text-decoration:none;font-weight:650}
.share-send{margin:4px 0 10px}
.dm-section{margin:10px 10px 2px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.dm-emoji-btn{flex:0 0 46px;width:46px;height:46px;font-size:22px;line-height:1}
.dm-emoji-btn[aria-expanded="true"]{background:var(--leaf)}
.dm-emoji{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:2px;max-height:168px;overflow:auto;padding:8px 10px;border-top:1px solid var(--line);background:var(--paper)}
.dm-emoji[hidden]{display:none}
.dm-emoji button{height:44px;border-radius:10px;background:none;font-size:24px;line-height:1}
.dm-emoji button:hover,.dm-emoji button:focus-visible{background:var(--cream);outline:2px solid var(--focus)}
/* Friends page (G9 04/11): the name keeps the line, actions are links under it; links stay 40px tall to tap. */
.friend-row{align-items:flex-start}
.friend-row strong{display:block;overflow-wrap:anywhere}
.friend-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:2px}
.friend-links .linkish{display:inline-flex;align-items:center;gap:5px;min-height:40px;font-weight:650;text-decoration:none}
.friend-links .linkish:hover{text-decoration:underline}
.friend-links .muted-link{color:var(--muted-strong)}
/* Below 900px (phones, and tablets where the menu column still shows) one pane at a time: list, then conversation. */
@media(max-width:900px){
  .dm{grid-template-columns:minmax(0,1fr);height:min(calc(100dvh - 200px),720px);min-height:420px}
  .dm.has-open .dm-list,.dm:not(.has-open) .dm-thread{display:none}
  .dm-back{display:grid}
  .dm-msg{max-width:88%}
}
@media(max-width:420px){
  /* the tool buttons (emoji, photo, plant) get their own row, so the text box and Gửi keep the whole width below */
  .dm-composer{flex-wrap:wrap;gap:6px;padding-left:10px;padding-right:10px}
  .dm-emoji-btn{flex-basis:44px;width:44px;height:40px}
  .dm-composer textarea{flex:1 1 calc(100% - 70px)}
  .dm-composer .btn{min-width:58px;padding-left:12px;padding-right:12px}
}
@media(max-width:730px){
  .content:has(.dm.has-open) .page-head{display:none}
  .dm.has-open{height:min(calc(100dvh - 110px),760px)}
  .dm-hint{display:none}
  .dm-composer{padding-bottom:10px}
}
@media(prefers-reduced-motion:reduce){.dm-msgs{scroll-behavior:auto}}

/* === BRAND-LOGO (04/11/2026): the PTADE logo (web/assets/img/ptade-logo-*.png) replaces the leaf mark. It carries its own green
   background, so the mark loses its border and tint and only keeps the rounded corners. */
.brandmark{border:0;background:none;overflow:hidden;flex:0 0 auto}
.brandmark img{display:block;width:100%;height:100%;object-fit:cover}
.brandmark-lg{width:56px;height:56px;border-radius:16px}

/* === BRAND-THEME (04/11/2026, owner G9 passed 11/11): colours taken from the PTADE logo — indigo #241BB3 for actions,
   links and the selected item, mint for light tints and borders. Only the tokens change, no rule above is edited, so
   removing this block brings the green theme back. Semantic colours (error red, warning, focus, VIP gold, sponsored)
   keep their values. */
:root{--green:#241bb3;--green2:#3d35c9;--leaf:#e6f8e7;--mint:#b4e9b7;--cream:#f7faf7;--text:#22213a;--muted:#5f6378;--muted-strong:#555a6c;--line:#e2e7e5;--line-strong:#a9aebf;--ink:#15133a;--shadow:0 10px 32px #1d18600f}

/* === E5-07 (05/11/2026): comments of a post — list above, write box below. */
.pc-list{max-height:52vh;overflow:auto;margin-bottom:12px}
.pc-items{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pc-item{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.pc-head{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;column-gap:10px}
.pc-who{display:grid;min-width:0}
.pc-who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-avatar{flex:0 0 30px;width:30px;height:30px;font-size:13px}
.pc-remove{min-height:40px;color:var(--danger-strong)}
.pc-body{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.pc-empty{text-align:center;padding:18px 8px}
.pc-form textarea{width:100%;min-height:64px;resize:vertical;font:inherit;font-size:16px;line-height:1.45;background:#fff;border:1px solid var(--line-strong);border-radius:12px;padding:10px 12px;color:var(--text)}
.pc-form textarea:focus{outline:none;border-color:var(--green2);box-shadow:0 0 0 3px var(--leaf)}
.pc-form-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* E5-07 round 2: replies indented under their comment, the "Trả lời" link, the "Đang trả lời" bar. */
.pc-reply{min-height:36px;font-weight:650;text-decoration:none;margin-top:2px}
.pc-replies{list-style:none;margin:8px 0 0;padding:0 0 0 14px;border-left:2px solid var(--mint);display:grid;gap:8px}
.pc-sub{padding:8px 10px;background:var(--cream)}
.pc-sub .pc-avatar{flex-basis:26px;width:26px;height:26px;font-size:12px}
.pc-sub .pc-head{grid-template-columns:26px minmax(0,1fr) auto}
.pc-replybar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px;margin-bottom:6px;border-radius:10px;background:var(--leaf);font-size:14px;color:var(--green)}