/* Khung hoạt hình minh hoạ cho 6 việc trên trang workshop (ladipage/5m-ai-automation-workshop.html).
   Mỗi khung là một màn hình thu nhỏ tự chạy lặp 8 giây như ảnh GIF, chỉ chạy khi thẻ đã lọt vào màn hình
   (thẻ có class .da do bộ quan sát cuộn của trang gắn). Kiểu tĩnh (không animation) chính là cảnh cuối,
   nên máy bật "giảm chuyển động" vẫn thấy đủ nội dung. Clip quay màn hình thật sẽ thay các khung này. */

.mh{--mh-t:8s;position:relative;margin:2px 0 0;border:1px solid #E7DDC7;border-radius:12px;background:#fff;overflow:hidden;font-size:12px;line-height:1.35;color:#2A2A2A;box-shadow:0 6px 18px rgba(74,52,10,.08)}
.mh *{box-sizing:border-box}
.mh-thanh{display:flex;align-items:center;gap:6px;padding:7px 10px;background:#F6F1E6;border-bottom:1px solid #EADFC6;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#6B6B6B}
.mh-thanh i{width:7px;height:7px;border-radius:50%;background:#D9CDB3}
.mh-thanh b{margin-left:4px;font-weight:600;color:#4A4A4A}
.mh-thanh em{margin-left:auto;font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #D9CDB3;border-radius:999px;padding:1px 7px}
.mh-than{padding:12px}

/* Chạy chỉ khi thẻ đã hiện */
.mh [class*="mh-a"],.mh [class*="mh-x"],.mh .mh-go,.mh .mh-bam,.mh .mh-quet,.mh .mh-cu,.mh .mh-moi,.mh .mh-cham3 span,.mh .mh-duong,.mh .mh-cot{animation-duration:var(--mh-t);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-play-state:paused}
li.da .mh *{animation-play-state:running}

/* Hiện lần lượt: a1 → a6 vào ở các mốc 6%, 18%, 30%, 42%, 54%, 66%; giữ tới 92% rồi mờ để lặp lại */
.mh-a1{animation-name:mh-a1}.mh-a2{animation-name:mh-a2}.mh-a3{animation-name:mh-a3}
.mh-a4{animation-name:mh-a4}.mh-a5{animation-name:mh-a5}.mh-a6{animation-name:mh-a6}
@keyframes mh-a1{0%,6%{opacity:0;transform:translateY(6px)}12%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mh-a2{0%,18%{opacity:0;transform:translateY(6px)}24%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mh-a3{0%,30%{opacity:0;transform:translateY(6px)}36%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mh-a4{0%,42%{opacity:0;transform:translateY(6px)}48%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mh-a5{0%,54%{opacity:0;transform:translateY(6px)}60%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mh-a6{0%,66%{opacity:0;transform:translateY(6px)}72%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Số đổi giữa chừng: .mh-cu (số trước) nhường chỗ cho .mh-moi (số sau) ở mốc 50% */
.mh-so{display:inline-grid}
.mh-so>*{grid-area:1/1}
.mh-cu{opacity:0;animation-name:mh-cu}
.mh-moi{animation-name:mh-moi}
@keyframes mh-cu{0%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes mh-moi{0%,48%{opacity:0;transform:translateY(4px)}54%,100%{opacity:1;transform:none;color:#2F7A4B}}

/* 01 Ads */
.mh-bang{width:100%;border-collapse:collapse;font-size:11.5px}
.mh-bang th{text-align:left;font-weight:600;color:#6B6B6B;padding:0 0 6px;border-bottom:1px solid #EFE6D3}
.mh-bang td{padding:8px 0;border-bottom:1px solid #F3ECDD}
.mh-bang td:not(:first-child),.mh-bang th:not(:first-child){text-align:right}
.mh-chay{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2F7A4B;margin-right:6px;box-shadow:0 0 0 3px rgba(47,122,75,.15)}
.mh-nguon{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.mh-the{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;background:#EEF7F1;color:#2F7A4B;border:1px solid rgba(47,122,75,.25)}
.mh-the--vang{background:#F7EFD9;color:#86621A;border-color:rgba(212,166,58,.5)}
.mh-the--xam{background:#F2F2F2;color:#4A4A4A;border-color:#E2E2E2}
.mh-the--xanh{background:#EAF1FB;color:#2456A6;border-color:#CFDDF3}
.mh-dong-log{margin-top:10px;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:#4A4A4A;background:#FAF7F0;border-radius:8px;padding:7px 9px}

/* 02 Trang bán: khung điện thoại */
.mh-dt{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}
.mh-may{position:relative;width:150px;height:226px;border:6px solid #1A1A1A;border-radius:22px;background:#FAF7F0;padding:14px 10px 10px;display:flex;flex-direction:column;gap:7px}
.mh-may::before{content:"";position:absolute;top:4px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:#1A1A1A}
.mh-o{height:24px;border:1.5px solid #CFC6B4;border-radius:6px;background:#fff;padding:4px 6px;font-size:10.5px;white-space:nowrap;overflow:hidden}
.mh-go{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap;border-right:1.5px solid #111;max-width:100%}
.mh-go--1{width:9ch;animation-name:mh-go1;animation-timing-function:steps(9,end)}
.mh-go--2{width:10ch;animation-name:mh-go2;animation-timing-function:steps(10,end)}
@keyframes mh-go1{0%,4%{width:0}16%,100%{width:9ch}}
@keyframes mh-go2{0%,18%{width:0}30%,100%{width:10ch}}
.mh-bam{height:24px;border-radius:6px;background:#D4A63A;color:#fff;font-weight:800;font-size:10.5px;display:grid;place-items:center;animation-name:mh-bam}
@keyframes mh-bam{0%,33%{transform:none}35%{transform:scale(.92);background:#B88C26}38%,100%{transform:none}}
.mh-qr{display:block;align-self:center;width:62px;height:62px;border-radius:6px;background:#fff;padding:4px;outline:1px solid #E2D6BC}
.mh-da-tra{border-radius:6px;background:#EEF7F1;color:#2F7A4B;font-weight:700;font-size:10.5px;text-align:center;padding:5px}
.mh-ghi{font-size:12px;color:#4A4A4A;display:flex;flex-direction:column;gap:8px}
.mh-ghi span{display:flex;gap:8px;align-items:center}
.mh-ghi b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#F7EFD9;color:#86621A;font-size:10px}

/* 03 CRM */
.mh-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mh-ds li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px;border:1px solid #EFE6D3;border-radius:8px;background:#FFFDF8}
.mh-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:11px;color:#fff;background:#B88C26}
.mh-ds .ten{font-weight:600;font-size:12px}
.mh-ds .phu{display:block;font-size:10.5px;color:#6B6B6B}
.mh-ds .nhan{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}

/* 04 AI chăm sóc: chat + luồng n8n */
.mh-hai{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.mh-chat{display:flex;flex-direction:column;gap:7px;background:#EEF3FA;border-radius:10px;padding:10px}
.mh-bk{align-self:flex-end;max-width:85%;background:#2456A6;color:#fff;border-radius:12px 12px 3px 12px;padding:6px 9px}
.mh-ai{align-self:flex-start;max-width:90%;background:#fff;border:1px solid #D9E3F2;border-radius:12px 12px 12px 3px;padding:6px 9px}
.mh-ai small{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;color:#86621A;font-weight:600}
.mh-ai u{color:#2456A6;overflow-wrap:anywhere}
.mh-qr-tin{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:#4A4A4A}
.mh-qr-tin .mh-qr{width:84px;height:84px;outline:0}
.mh-cham3{align-self:flex-start;display:none;gap:3px;background:#fff;border-radius:10px;padding:7px 9px}
li.da .mh-cham3{display:inline-flex;animation:mh-cham-ao var(--mh-t) infinite}
@keyframes mh-cham-ao{0%,22%{opacity:0;height:0;padding:0 9px}24%,40%{opacity:1;height:auto;padding:7px 9px}42%,100%{opacity:0;height:0;padding:0 9px}}
.mh-cham3 span{width:5px;height:5px;border-radius:50%;background:#8AA0C4;animation-name:mh-nhay;animation-duration:.9s!important}
.mh-cham3 span:nth-child(2){animation-delay:.15s}.mh-cham3 span:nth-child(3){animation-delay:.3s}
@keyframes mh-nhay{0%,100%{transform:none;opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.mh-luong{display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.mh-nut{flex:1;min-width:0;text-align:center;padding:7px 4px;border:1.5px solid #E2D6BC;border-radius:8px;background:#fff;font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-noi{flex:none;width:10px;height:2px;background:#D9CDB3}
.mh-luong .mh-nut[class*="mh-x"]{border-color:#2F7A4B;background:#EEF7F1;color:#2F7A4B}
.mh-x1{animation-name:mh-x1}.mh-x2{animation-name:mh-x2}.mh-x3{animation-name:mh-x3}.mh-x4{animation-name:mh-x4}
@keyframes mh-x1{0%,10%{border-color:#E2D6BC;background:#fff;color:#2A2A2A}14%,92%{border-color:#2F7A4B;background:#EEF7F1;color:#2F7A4B}}
@keyframes mh-x2{0%,24%{border-color:#E2D6BC;background:#fff;color:#2A2A2A}28%,92%{border-color:#2F7A4B;background:#EEF7F1;color:#2F7A4B}}
@keyframes mh-x3{0%,38%{border-color:#E2D6BC;background:#fff;color:#2A2A2A}42%,92%{border-color:#2F7A4B;background:#EEF7F1;color:#2F7A4B}}
@keyframes mh-x4{0%,46%{border-color:#E2D6BC;background:#fff;color:#2A2A2A}50%,92%{border-color:#2F7A4B;background:#EEF7F1;color:#2F7A4B}}

/* 05 Check-in */
.mh-ci{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:center}
.mh-khung-quet{position:relative;width:110px;height:110px;border-radius:12px;background:#1A1A1A;display:grid;place-items:center;overflow:hidden}
.mh-khung-quet .mh-qr{width:70px;height:70px;outline:0}
.mh-quet{position:absolute;left:8px;right:8px;top:8px;height:2px;background:#E8892A;box-shadow:0 0 10px 2px rgba(232,137,42,.8);opacity:0;animation-name:mh-quet}
@keyframes mh-quet{0%,6%{top:10px;opacity:1}20%{top:96px;opacity:1}34%{top:10px;opacity:1}40%,100%{top:10px;opacity:0}}
.mh-ok{position:absolute;inset:0;display:grid;place-items:center;background:rgba(47,122,75,.88);color:#fff;font-size:34px;font-weight:800}
.mh-den{font-size:12px;color:#4A4A4A;display:flex;flex-direction:column;gap:6px}
.mh-den strong{font-family:"Montserrat",sans-serif;font-size:26px;line-height:1;color:#111}

/* 06 Dashboard */
.mh-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
.mh-kpi div{background:#FAF7F0;border-radius:8px;padding:6px 8px}
.mh-kpi span{display:block;font-size:10px;color:#6B6B6B}
.mh-kpi b{font-family:"Montserrat",sans-serif;font-size:15px}
.mh-bieu{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px;align-items:end}
.mh-bieu svg{display:block;width:100%;height:auto}
.mh-duong{fill:none;stroke:#B88C26;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation-name:mh-ve}
@keyframes mh-ve{0%,6%{stroke-dashoffset:1}40%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.mh-cot-nhom{display:flex;align-items:flex-end;gap:5px;height:64px}
.mh-cot{flex:1;border-radius:4px 4px 0 0;background:#D4A63A;transform-origin:bottom;animation-name:mh-cot}
.mh-cot:nth-child(2){animation-name:mh-cot2}.mh-cot:nth-child(3){animation-name:mh-cot3}.mh-cot:nth-child(4){animation-name:mh-cot4;background:#E8892A}
@keyframes mh-cot{0%,10%{transform:scaleY(0)}24%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes mh-cot2{0%,16%{transform:scaleY(0)}30%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes mh-cot3{0%,22%{transform:scaleY(0)}36%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes mh-cot4{0%,28%{transform:scaleY(0)}42%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}

@media (min-width:640px){
  .mh-hai{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
}
/* Điện thoại: khung điện thoại và hướng dẫn xếp dọc cho đủ chỗ trong thẻ hẹp */
@media (max-width:559px){
  .mh-dt{grid-template-columns:minmax(0,1fr)}
  .mh-dt .mh-may{margin:0 auto}
  .mh-dt .mh-ghi{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 12px;font-size:11px}
}
@media (max-width:379px){
  .mh-ci{grid-template-columns:minmax(0,1fr)}
  .mh-khung-quet{margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .mh *,.mh *::before,.mh *::after{animation:none!important}
  li.da .mh-cham3{display:none}
}