/* kyyeu.thuytostudio.com — giao diện theo phong cách congstudio.vn (xanh lá, logo tròn giữa menu, hero rách giấy),
   thông tin Thuý Tô Studio. Ảnh LUÔN hiện đủ tỉ lệ: khung cố định dùng contain + nền mờ cùng ảnh (.khung-mo). */
:root{
  --xanh:#14573d;--xanh2:#1d7a52;--xanh3:#2b9a68;--xanh-nhat:#e8f2ec;--xanh-nen:#eef4f0;
  --nen:#f7f8f5;--chu:#1e2a23;--chu2:#55625a;--vang:#d8b35a;--vang2:#f1d58e;--trang:#fff;--vien:#dbe5de;
  --f:'Josefin Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--f-script:'Dancing Script','Segoe Script',cursive;
  --r:16px;--bong:0 10px 30px rgba(20,60,40,.12);--dau-cao:90px
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--dau-cao) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nen);color:var(--chu);font:400 17px/1.6 var(--f);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
.bo-qua{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:2000}
.bo-qua:focus{left:8px}
.trong{max-width:1230px;margin:0 auto;padding:0 20px}
.trong.hep{max-width:860px}
.trong.hep-vua{max-width:1100px}
.giua{text-align:center}
.khoi{padding:72px 0}
.nho{margin:0 0 6px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--xanh2);font-weight:600}
.nho.giua{text-align:center}
.tieu-de{margin:0 0 12px;text-align:center;color:var(--xanh);font:600 clamp(26px,3.4vw,40px)/1.2 var(--f);text-transform:uppercase;letter-spacing:.02em}
.tieu-de.trai{text-align:left}
.tieu-de.nho-hon{font-size:clamp(20px,2.4vw,28px);margin-top:56px}
.dan{max-width:760px;margin:0 auto 28px;text-align:center;color:var(--chu2);font-size:18px;font-weight:300}
.dan.trai{margin-left:0;text-align:left}
.sang{color:#fff!important}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:999px;border:2px solid transparent;font:600 15px/1.2 var(--f);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.nut:hover{transform:translateY(-2px)}
.nut.to{min-height:54px;padding:14px 34px;font-size:16px}
.nut-vang{background:var(--vang);color:#1b2a20}
.nut-vang:hover{background:var(--vang2)}
.nut-vien{border-color:rgba(255,255,255,.85);color:#fff;background:rgba(0,0,0,.12)}
.nut-vien:hover{background:#fff;color:var(--xanh)}
.nut-xanh-vien{border-color:var(--xanh2);color:var(--xanh);background:transparent}
.nut-xanh-vien:hover{background:var(--xanh);color:#fff}

/* ---------------- ĐẦU TRANG ---------------- */
.dau{position:sticky;top:0;z-index:100;height:var(--dau-cao);background:var(--xanh);box-shadow:0 2px 16px rgba(0,0,0,.15)}
.dau-trong{position:relative;max-width:1230px;height:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center}
.menu{flex:1;display:flex;gap:4px;align-items:center}
.menu-trai{justify-content:flex-start}
.menu-phai{justify-content:flex-end;padding-right:10px}
.menu a{padding:10px 14px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;border-radius:8px;white-space:nowrap}
.menu a:hover{background:rgba(255,255,255,.12)}
.logo{position:absolute;left:50%;top:0;transform:translateX(-50%);width:156px;height:156px;margin-top:-26px;border-radius:50%;background:var(--xanh);display:grid;place-items:center;text-decoration:none;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:2}
.logo::after{content:"";position:absolute;inset:34px 10px 10px;border-radius:50%;border:1px solid rgba(216,179,90,.55);pointer-events:none}
.logo-chu{display:flex;flex-direction:column;align-items:center;line-height:1;padding-top:26px}
.logo-chu b{font:700 25px/1 var(--f);letter-spacing:.08em}
.logo-chu i{font:700 26px/1 var(--f-script);color:var(--vang2);margin-top:-2px}
.logo-chu small{font-size:11px;letter-spacing:.34em;text-transform:uppercase;margin-top:6px;color:#d9eadf}
.dau-phai{position:absolute;right:20px;top:8px;display:flex;align-items:center;gap:10px}
.dau-tel{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:14px;font-weight:600}
.dau-tel svg{width:15px;height:15px;fill:currentColor}
.doi-ngu{display:inline-flex;border:1px solid rgba(255,255,255,.6);border-radius:999px;overflow:hidden;text-decoration:none;font-size:12.5px;font-weight:700}
.doi-ngu span{padding:4px 9px;color:#fff}
.doi-ngu span.dang{background:#fff;color:var(--xanh)}
.menu-phai{padding-top:26px}
.menu-trai{padding-top:26px}
.nut-menu{display:none;width:44px;height:44px;border:0;background:transparent;padding:10px;cursor:pointer}
.nut-menu span{display:block;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:.25s}
.nut-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nut-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.nut-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-dt{position:absolute;left:0;right:0;top:100%;background:var(--xanh);display:flex;flex-direction:column;padding:8px 16px 16px;box-shadow:0 10px 20px rgba(0,0,0,.2)}
.menu-dt a{color:#fff;text-decoration:none;padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.12);font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* ---------------- HERO ---------------- */
.hero{position:relative;max-width:1230px;margin:0 auto;padding:0 20px}
.hero-khung{position:relative;height:min(78vh,720px);min-height:460px;overflow:hidden;background:#0f2a1e;border-radius:0 0 6px 6px}
.hero-lop{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;display:flex;opacity:0;transition:opacity 1.1s ease}
.hero-slide.hien{opacity:1;z-index:1}
.hero-o{position:relative;flex:1;min-width:0;overflow:hidden;cursor:zoom-in;background:#10281d}
.hero-o+.hero-o{border-left:3px solid #0f2a1e}
.hero-o .nen-mo{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);max-width:none;object-fit:cover;filter:blur(26px) brightness(.62) saturate(1.1)}
.hero-o .anh-chinh{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
.hero-khung::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(8,28,18,.78) 0%,rgba(8,28,18,.45) 34%,rgba(8,28,18,0) 62%),linear-gradient(0deg,rgba(8,28,18,.55),rgba(8,28,18,0) 40%)}
.hero-chu{position:absolute;z-index:3;left:6%;top:50%;transform:translateY(-54%);max-width:520px;color:#fff;pointer-events:none}
.hero-chu a{pointer-events:auto}
.hero-script{margin:0 0 6px;font:700 clamp(46px,6.2vw,86px)/1 var(--f-script);color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.45)}
.hero-script small{display:block;font-size:.36em;margin:8px 0 0 .6em;color:var(--vang2)}
.hero-chu h1{margin:14px 0 8px;font:600 clamp(20px,2.3vw,30px)/1.25 var(--f);text-transform:uppercase;letter-spacing:.05em}
.hero-p{margin:0 0 22px;font-size:17px;font-weight:300;line-height:1.55;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.hero-nut{display:flex;flex-wrap:wrap;gap:12px}
.hero-tel{position:absolute;z-index:3;right:28px;bottom:66px;color:#fff;text-decoration:none;font-weight:700;font-size:clamp(16px,1.8vw,22px);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero-mui{position:absolute;z-index:4;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.25);cursor:pointer;display:grid;place-items:center}
.hero-mui::before{content:"";width:12px;height:12px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(45deg);margin-left:4px}
.hero-mui.sau::before{transform:rotate(-135deg);margin:0 4px 0 0}
.hero-mui.truoc{left:14px}.hero-mui.sau{right:14px}
.hero-mui:hover{background:var(--xanh2)}
.hero-cham{position:absolute;z-index:4;left:0;right:0;bottom:40px;display:flex;justify-content:center;gap:8px}
.hero-cham button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.5);cursor:pointer}
.hero-cham button.dang{background:var(--vang);width:26px;border-radius:6px}
.hero-rach{position:relative;z-index:5;height:48px;margin-top:-47px;background:var(--nen);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L30 26 L55 14 L90 24 L120 10 L160 22 L190 16 L230 28 L260 12 L300 22 L340 8 L380 24 L420 16 L455 26 L490 12 L530 20 L570 6 L610 22 L650 14 L690 26 L730 10 L770 20 L810 12 L850 26 L890 16 L930 24 L970 8 L1010 22 L1050 14 L1090 26 L1130 12 L1170 22 L1200 16 L1200 48 L0 48 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L30 26 L55 14 L90 24 L120 10 L160 22 L190 16 L230 28 L260 12 L300 22 L340 8 L380 24 L420 16 L455 26 L490 12 L530 20 L570 6 L610 22 L650 14 L690 26 L730 10 L770 20 L810 12 L850 26 L890 16 L930 24 L970 8 L1010 22 L1050 14 L1090 26 L1130 12 L1170 22 L1200 16 L1200 48 L0 48 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* ---------------- KHUNG ẢNH ĐỦ TỈ LỆ ---------------- */
.khung-mo{position:relative;display:block;overflow:hidden;background:#173c2b}
.khung-mo .nen-mo{position:absolute!important;inset:-20px;width:calc(100% + 40px)!important;height:calc(100% + 40px)!important;max-width:none;object-fit:cover!important;filter:blur(18px) brightness(.72);transform:none!important}
.khung-mo img:not(.nen-mo){position:relative;z-index:1;width:100%;height:100%;object-fit:contain}

/* ---------------- DỊCH VỤ ---------------- */
.dich-vu{padding-top:40px}
.tab-dv{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin:0 0 30px;font-size:17px}
.tab-dv span,.tab-dv a{padding:6px 2px;text-decoration:none;color:var(--chu)}
.tab-dv span.dang{color:var(--xanh);font-weight:600;border-bottom:2px solid var(--xanh)}
.tab-dv a:hover{color:var(--xanh2)}
.tab-dv sup{font-size:11px;margin-left:2px;color:var(--xanh2)}
.luoi-dv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.the-dv{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none;box-shadow:var(--bong);border:3px solid var(--xanh2)}
.the-dv .khung-mo{aspect-ratio:4/5}
.the-dv .khung-mo img:not(.nen-mo){transition:transform .5s}
.the-dv:hover .khung-mo img:not(.nen-mo){transform:scale(1.04)}
.the-dv-chu{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:44px 14px 16px;text-align:center;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:15.5px;background:linear-gradient(0deg,rgba(20,87,61,.96) 30%,rgba(20,87,61,0))}
.so-lieu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px}
.so-lieu>div{padding:6px 28px}
.so-lieu>div+div{border-left:1px solid var(--vien)}
.so-lieu b{display:block;color:var(--xanh);font-size:clamp(30px,3.4vw,42px);font-weight:700;line-height:1.1}
.so-lieu span{display:block;color:var(--xanh2);font-weight:600;margin:4px 0 8px}
.so-lieu p{margin:0;color:var(--chu2);font-size:15.5px;font-weight:300}

/* ---------------- NỔI BẬT + MASONRY ---------------- */
.noi-bat{background:var(--xanh-nen);border-radius:0 90px 0 0;margin:0 0 0 0}
.nb-dau{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.masonry{display:flex;gap:12px;align-items:flex-start}
.m-cot{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.o-anh{position:relative;display:block;width:100%;padding:0;border:0;background:#dfe8e2;border-radius:10px;overflow:hidden;cursor:zoom-in;box-shadow:0 4px 14px rgba(20,60,40,.1)}
.o-anh img{width:100%;height:100%;object-fit:contain;transition:transform .45s,opacity .4s}
.o-anh:hover img{transform:scale(1.035)}
.o-anh .o-dem{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;pointer-events:none}
.o-anh .o-dem span{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:12.5px;font-weight:600}
.o-anh .o-dem svg{width:13px;height:13px;fill:currentColor}
.o-anh .o-dem .t svg{fill:#ff5d8a}
.o-anh .o-nhan{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:999px;background:rgba(20,87,61,.85);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.03em;pointer-events:none;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.giua>.nut{margin-top:26px}

/* ---------------- ALBUM ---------------- */
.loc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 28px}
.loc button{border:1px solid var(--vien);background:#fff;color:var(--chu);padding:9px 18px;border-radius:999px;font-size:15px;cursor:pointer}
.loc button.dang,.loc button:hover{background:var(--xanh);border-color:var(--xanh);color:#fff}
.luoi-album{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.the-ab{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;box-shadow:var(--bong);transition:transform .25s}
.the-ab:hover{transform:translateY(-4px)}
.the-ab .khung-mo{aspect-ratio:4/3}
.the-ab-chu{display:flex;flex-direction:column;gap:4px;padding:14px 16px 18px}
.the-ab-chu small{color:var(--xanh2);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.the-ab-chu b{color:var(--xanh);font-size:18px;font-weight:600;line-height:1.35}
.the-ab-chu em{font-style:normal;color:var(--chu2);font-size:14.5px}

/* ---------------- VIDEO ---------------- */
.video{background:#fff}
.luoi-vd{display:grid;gap:22px}
.vd-ngang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vd-doc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.the-vd{position:relative;display:flex;flex-direction:column;border:0;padding:0;background:#fff;text-align:left;cursor:pointer;border-radius:12px;overflow:hidden;box-shadow:var(--bong);font:inherit;color:inherit}
.the-vd .khung-mo{aspect-ratio:16/9}
.the-vd.doc .khung-mo{aspect-ratio:9/16}
.the-vd .phat{position:absolute;z-index:2;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(20,87,61,.82);border:2px solid #fff;display:grid;place-items:center;transition:transform .2s}
.the-vd .phat::before{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:5px}
.the-vd:hover .phat{transform:scale(1.1);background:var(--xanh2)}
.the-vd .nen{position:absolute;z-index:2;left:8px;top:8px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em}
.the-vd .gio{position:absolute;z-index:2;right:8px;top:8px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:12px}
.the-vd .vd-chu{padding:10px 12px 12px;font-size:15px;font-weight:600;line-height:1.35;color:var(--xanh);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.the-vd .khung-anh{position:relative;display:block}

/* ---------------- BẢNG GIÁ ---------------- */
.bang-gia{background:radial-gradient(1200px 600px at 20% 0,#2c9a69 0,rgba(44,154,105,0) 60%),linear-gradient(160deg,#1d7a52,#10452f);color:#fff}
.bang-gia .dan{color:#d9eee2}
.bg-tab{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:0 0 22px}
.bg-tab button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.bg-tab button b{font:700 22px/1 var(--f-script)}
.bg-tab button span{font-size:13.5px;font-weight:600;color:var(--vang2)}
.bg-tab button.dang,.bg-tab button:hover{background:#fff;color:var(--xanh);border-color:#fff}
.bg-tab button.dang span,.bg-tab button:hover span{color:var(--xanh2)}
.the-gia{position:relative;border-radius:28px;padding:30px 44px 32px;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.28);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.gia-dau{display:grid;grid-template-columns:120px 1fr 190px;align-items:center;gap:14px}
.gia-logo{width:96px;height:96px;border-radius:50%;border:2px solid rgba(255,255,255,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.gia-logo b{font-size:15px;letter-spacing:.08em}
.gia-logo i{font:700 18px/1 var(--f-script);color:var(--vang2)}
.gia-dau h3{margin:0;text-align:center;font:700 clamp(30px,4.2vw,54px)/1.1 var(--f);letter-spacing:.02em}
.gia-dau h3 em{font:700 1.15em/1 var(--f-script);color:#fff}
.gia-nhan{display:block;width:max-content;margin:8px auto 0;padding:4px 14px;border-radius:999px;background:var(--vang);color:#1b2a20;font:700 13px/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase}
.gia-lh{display:flex;flex-direction:column;align-items:flex-end;font-size:14px;font-weight:600;line-height:1.35}
.gia-lh a{color:#fff;text-decoration:none}
.gia-lh span{margin-top:6px;font-weight:400;font-size:13px;opacity:.85}
.gia-so{position:relative;margin:18px auto 22px;max-width:560px;padding:14px 24px;border:2px solid rgba(255,255,255,.75);border-radius:999px;text-align:center}
.gia-so::before,.gia-so::after{content:"";position:absolute;top:50%;width:calc((100vw - 100%) / 2);max-width:300px;height:1px;background:rgba(255,255,255,.5)}
.gia-so::before{right:100%}.gia-so::after{left:100%}
.gia-so b{font-size:clamp(34px,4.4vw,54px);font-weight:700;line-height:1}
.gia-so span{font-size:clamp(20px,2.4vw,30px);font-weight:700;margin-left:4px;text-transform:uppercase}
.gia-so small{display:block;margin-top:6px;font-style:italic;font-size:15px;opacity:.95}
.gia-than{columns:2;column-gap:56px}
.gia-nhom{break-inside:avoid;margin:0 0 16px}
.gia-nhom h4{margin:0 0 4px;font-size:17px;font-weight:700;color:var(--vang2)}
.gia-nhom ul{margin:0;padding:0;list-style:none}
.gia-nhom li{position:relative;padding-left:20px;font-size:16px;line-height:1.55}
.gia-nhom li::before{content:"";position:absolute;left:3px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--vang)}
.gia-luuy{border-top:1px dashed rgba(255,255,255,.4);padding-top:12px}
.gia-luuy li,.gia-luuy p{font-size:14px;font-style:italic;opacity:.9}
.gia-luuy p{margin:6px 0 0}
.gia-chan{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}

/* ---------------- VÌ SAO / QUY TRÌNH ---------------- */
.luoi-vs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
.the-vs{background:#fff;border-radius:var(--r);padding:26px 22px;box-shadow:var(--bong);border-top:4px solid var(--xanh2)}
.the-vs h3{margin:14px 0 8px;color:var(--xanh);font-size:19px;font-weight:600}
.the-vs p{margin:0;color:var(--chu2);font-size:15.5px;font-weight:300}
.bt{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--xanh-nhat)}
.bt::before{content:"";width:28px;height:28px;background:var(--xanh2);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.bt-makeup{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2l4 4-9.5 9.5-4-4zM7 13l4 4-2 2c-1.1 1.1-3.9 1.4-6 1 .5-1 .6-2.3 1-3.5.4-1.3 1-2.3 2-3.5z'/%3E%3C/svg%3E")}
.bt-quay{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h12a2 2 0 0 1 2 2v2.5l4-3v9l-4-3V16a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.bt-in{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 13 4-5 3 4 2-2 5 5V5H5z'/%3E%3C/svg%3E")}
.bt-tre{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-4 12a4.5 4.5 0 0 0 8 0zm.5-5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm7 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'/%3E%3C/svg%3E")}
.quy-trinh{background:var(--xanh-nen)}
.qt{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:qt}
.qt li{position:relative;background:#fff;border-radius:var(--r);padding:26px 18px 20px;box-shadow:var(--bong)}
.qt li>span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--xanh);color:#fff;font-weight:700;font-size:19px}
.qt h3{margin:12px 0 6px;color:var(--xanh);font-size:18px;font-weight:600}
.qt p{margin:0;color:var(--chu2);font-size:15px;font-weight:300}
.truong{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.truong li{background:#fff;border:1px solid var(--vien);border-radius:12px;padding:12px 18px;font-weight:600;color:var(--xanh);font-size:15.5px;box-shadow:0 3px 10px rgba(20,60,40,.06)}

/* ---------------- ĐĂNG KÝ ---------------- */
.dk-khung{display:grid;grid-template-columns:1fr 1.2fr;gap:34px;background:#fff;border-radius:28px;padding:40px;box-shadow:var(--bong)}
.dk-chu p{color:var(--chu2);font-weight:300}
.dk-lh{display:flex;gap:12px;flex-wrap:wrap}
.dk-lh a{display:inline-flex;padding:10px 18px;border-radius:999px;background:var(--xanh-nhat);color:var(--xanh);text-decoration:none;font-weight:700}
.dk-form{display:grid;gap:12px}
.dk-form label{display:grid;gap:5px;font-size:14.5px;font-weight:600;color:var(--xanh)}
.dk-form input,.dk-form select,.dk-form textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--vien);border-radius:12px;background:#fbfcfb;font:400 16px/1.4 var(--f);color:var(--chu)}
.dk-form textarea{resize:vertical;min-height:90px}
.dk-form input:focus,.dk-form select:focus,.dk-form textarea:focus{outline:2px solid var(--xanh3);border-color:transparent;background:#fff}
.dk-hai{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dk-form .bay{position:absolute;left:-5000px;width:1px;height:1px;opacity:0}
.dk-form button[disabled]{opacity:.6;cursor:wait}
.dk-tb{margin:0;font-weight:600;min-height:1.4em}
.dk-tb.ok{color:var(--xanh2)}
.dk-tb.loi{color:#c0392b}
.dk-rieng{margin:0;color:#8a958e;font-size:13px}

/* ---------------- CHÂN TRANG ---------------- */
.chan{margin-top:40px;background:linear-gradient(160deg,#1a6e4a,#0f3f2b);color:#e6f2ea;border-radius:90px 90px 0 0;padding:64px 0 24px}
.chan-luoi{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:40px}
.chan h2{margin:0 0 12px;color:#fff;font-size:18px;letter-spacing:.08em;text-transform:uppercase}
.chan-ten{margin:0 0 12px;font-weight:600;color:var(--vang2)}
.chan-lh{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:16px}
.chan-lh li{position:relative;padding-left:28px}
.chan-lh i{position:absolute;left:0;top:3px;width:18px;height:18px;background:var(--vang2);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.bt-dd{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E")}
.bt-dt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E")}
.bt-gio{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v6l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E")}
.chan-lh a,.chan-dv a{color:#fff}
.chan-mxh{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.chan-mxh a{padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;font-size:14px}
.chan-mxh a:hover{background:#fff;color:var(--xanh)}
.chan-dv{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.chan-dv a{text-decoration:none}
.chan-dv a:hover{text-decoration:underline}
.ban-do{position:relative;height:230px;border-radius:14px;overflow:hidden;background:#244f3b}
.ban-do iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ban-do>a{position:absolute;z-index:2;left:10px;bottom:10px;background:#fff;color:var(--xanh);padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none}
.ban-quyen{text-align:center;margin:36px 0 0;font-size:14px;color:#b8d4c2;padding-bottom:calc(10px + env(safe-area-inset-bottom))}

/* ---------------- NÚT NỔI ---------------- */
.noi-trai{position:fixed;left:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:8px}
.noi-nut{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;background:#fff;border-radius:14px;text-decoration:none;color:var(--chu);box-shadow:0 6px 20px rgba(0,0,0,.18);font-weight:600;font-size:14.5px;line-height:1.15}
.noi-nut i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0068ff;color:#fff;font-style:normal;font-size:11px;font-weight:700}
.noi-tel i{background:var(--xanh2);animation:rung 2.4s infinite}
.noi-tel svg{width:20px;height:20px;fill:#fff}
.noi-nut small{display:block;font-weight:400;color:#6b766f;font-size:12.5px}
@keyframes rung{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}92%{transform:rotate(14deg)}96%{transform:rotate(-8deg)}}
.len-dau{position:fixed;right:18px;bottom:18px;z-index:90;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--xanh);background:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.len-dau::before{content:"";width:12px;height:12px;border:solid var(--xanh);border-width:2px 0 0 2px;transform:rotate(45deg);margin-top:5px}

/* ---------------- TRANG ALBUM ---------------- */
.ab-dau{padding:60px 0 10px;text-align:center}
.ab-dau h1{margin:4px 0 10px;color:var(--xanh);font:600 clamp(26px,3.6vw,42px)/1.2 var(--f);text-transform:uppercase}
.ab-ve{display:inline-block;margin-bottom:14px;color:var(--xanh2);font-weight:600;text-decoration:none}
.ab-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;color:var(--chu2);margin:0}
.ab-anh{padding-top:26px}
.ab-cta{background:linear-gradient(160deg,#1d7a52,#10452f)}
.ab-vd{padding-top:10px}
.ab-khac .luoi-album{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------------- TRÌNH XEM ẢNH / VIDEO (từ web Tô Hiệu, đã chạy thật) ---------------- */
.lb{position:fixed;inset:0;z-index:1000;background:#0b0b0c;display:flex;flex-direction:column;color:#fff;user-select:none;-webkit-user-select:none}
.lb-thanh{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));background:#141416;border-bottom:1px solid #26262a;z-index:3}
.lb-dem{margin-right:auto;margin-left:6px;font-size:14px;color:#cfcfcf;white-space:nowrap}
.lb-zoom{display:flex;gap:2px;background:#232327;border-radius:22px;padding:2px}
.lb-nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:42px;height:42px;padding:0 13px;border:0;border-radius:21px;background:#232327;color:#fff;font:500 14px var(--f);white-space:nowrap;cursor:pointer;text-decoration:none}
.lb-zoom .lb-nut{background:transparent;min-width:40px;height:38px;padding:0 10px}
.lb-nut:hover,.lb-nut:focus-visible{background:var(--xanh2);color:#fff}
.lb-nut svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.lb-muc{font-size:13px;min-width:56px!important}
.lb-thich.da,.lb-thich.da:hover{background:#1877f2}
.lb-tim.da,.lb-tim.da:hover{background:#e0245e}
.lb-thich b,.lb-tim b{font-weight:700}
@keyframes nay{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.lb-thich.nay svg,.lb-tim.nay svg{animation:nay .45s}
.lb-san{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:zoom-in}
.lb.da-phong .lb-san{cursor:grab}
.lb.da-phong .lb-san:active{cursor:grabbing}
.lb-san img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:50% 50%;will-change:transform;-webkit-user-drag:none}
@keyframes xoay{to{transform:rotate(360deg)}}
.lb.dang-tai .lb-san::after{content:"";position:absolute;left:50%;top:50%;margin:-17px 0 0 -17px;width:34px;height:34px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:xoay .8s linear infinite}
.lb-truoc,.lb-sau{position:absolute;top:50%;z-index:3;width:52px;height:52px;margin-top:-6px;border-radius:50%;border:0;background:rgba(20,20,22,.6);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer}
.lb-truoc{left:12px}
.lb-sau{right:12px}
.lb-truoc svg,.lb-sau svg{width:28px;height:28px;fill:currentColor}
.lb-truoc:hover,.lb-sau:hover{background:var(--xanh2)}
.lb-chu{flex:0 0 auto;text-align:center;font-size:13.5px;color:#bdbdbd;padding:8px 16px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
html.khoa-cuon,html.khoa-cuon body{overflow:hidden}
.lb-san-video{cursor:default;touch-action:auto;padding:10px}
.khung-phat{position:relative;width:min(calc(100% - 140px),calc((100vh - 150px) * 16 / 9));aspect-ratio:16/9;background:#000;box-shadow:0 4px 30px rgba(0,0,0,.6)}
.khung-phat.doc{width:min(100%,calc((100vh - 150px) * 9 / 16));aspect-ratio:9/16}
.khung-phat iframe{width:100%;height:100%;border:0;display:block}
/* Che vùng link ra ngoài trong khung phát: thanh tiêu đề YouTube (tên video/kênh) và nút "mở cửa sổ mới" của Drive —
   bấm vào đó sẽ rời web. Nút phát, tua, âm lượng, toàn màn hình ở đáy vẫn dùng được. */
.che{position:absolute;z-index:2;background:transparent}
.che-yt{left:0;right:0;top:0;height:64px}
.che-drive{right:0;top:0;width:72px;height:64px}
.lb-video .lb-chu{font-size:14px;color:#e5e5e5}

/* ---------------- ĐÁP ỨNG ---------------- */
@media (max-width:1100px){
  .menu a{padding:10px 9px;font-size:13.5px}
  .luoi-dv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .luoi-vs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qt li:last-child{grid-column:span 2}
  .vd-ngang{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vd-doc{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bg-tab{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ab-khac .luoi-album{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--dau-cao:64px}
  .menu{display:none}
  .nut-menu{display:block}
  .logo{width:104px;height:104px;margin-top:-22px}
  .logo::after{inset:24px 7px 7px}
  .logo-chu{padding-top:20px}
  .logo-chu b{font-size:17px}.logo-chu i{font-size:18px}.logo-chu small{font-size:8.5px;margin-top:4px}
  .dau-phai{top:50%;transform:translateY(-50%)}
  .dau-tel span{display:none}
  .dau-tel{width:36px;height:36px;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.5)}
  .luoi-album{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dk-khung{grid-template-columns:1fr;padding:26px 20px}
  .chan-luoi{grid-template-columns:1fr 1fr}
  .chan-bd{grid-column:span 2}
  .gia-dau{grid-template-columns:1fr}
  .gia-logo,.gia-lh{display:none}
  .gia-than{columns:1}
  .the-gia{padding:24px 22px 26px}
  .so-lieu{grid-template-columns:1fr;gap:18px}
  .so-lieu>div+div{border-left:0;border-top:1px solid var(--vien);padding-top:18px}
}
@media (max-width:640px){
  body{font-size:16px}
  .khoi{padding:52px 0}
  .trong{padding:0 16px}
  .hero{padding:0}
  .hero-khung{height:auto;aspect-ratio:4/5;min-height:0;max-height:82vh;border-radius:0}
  .hero-khung::after{background:linear-gradient(0deg,rgba(8,28,18,.86) 0%,rgba(8,28,18,.5) 42%,rgba(8,28,18,0) 70%)}
  .hero-chu{left:18px;right:18px;top:auto;bottom:74px;transform:none;max-width:none}
  .hero-script{font-size:46px}
  .hero-chu h1{font-size:18px;margin:8px 0 6px}
  .hero-p{font-size:14.5px;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero-nut .nut{min-height:42px;padding:10px 18px;font-size:13px}
  .hero-tel{display:none}
  .hero-mui{display:none}
  .hero-cham{bottom:34px}
  .hero-rach{height:28px;margin-top:-27px}
  .dich-vu{padding-top:28px}
  .tab-dv{gap:4px 16px;font-size:15px}
  .luoi-dv{gap:12px}
  .the-dv-chu{font-size:13px;padding:34px 8px 12px}
  .noi-bat{border-radius:0 44px 0 0}
  .masonry,.m-cot{gap:8px}
  .luoi-album{grid-template-columns:1fr;gap:16px}
  .ab-khac .luoi-album{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ab-khac .the-ab-chu b{font-size:15px}
  .vd-ngang{grid-template-columns:1fr;gap:12px}
  .vd-doc{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .luoi-vd{gap:14px}
    .the-vd .vd-chu{font-size:13.5px}
  .bg-tab{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .bg-tab button{flex:0 0 auto;min-width:104px;scroll-snap-align:start}
  .gia-so{padding:12px 16px}
  .gia-so::before,.gia-so::after{display:none}
  .gia-nhom li{font-size:15px}
  .luoi-vs,.qt{grid-template-columns:1fr}
  .qt li:last-child{grid-column:auto}
  .dk-hai{grid-template-columns:1fr}
  .chan{border-radius:44px 44px 0 0;padding-bottom:90px}
  .chan-luoi{grid-template-columns:1fr;gap:28px}
  .chan-bd{grid-column:auto}
  .noi-trai{left:10px;bottom:10px;flex-direction:row}
  .noi-nut{padding:5px 12px 5px 5px;font-size:13px}
  .noi-nut i{width:34px;height:34px}
  .noi-zalo span{display:none}
  .noi-zalo{padding-right:5px}
  .len-dau{right:10px;bottom:10px;width:46px;height:46px}
  .lb-nut span{display:none}
  .lb-nut{min-width:40px;height:40px;padding:0 9px}
  .lb-thich,.lb-tim{padding:0 10px}
  .lb-muc{display:none!important}
  .lb-thanh{gap:4px;padding:6px;flex-wrap:wrap}
  .lb-dem{font-size:13px;margin-left:2px}
  .lb-truoc,.lb-sau{width:42px;height:42px;background:rgba(20,20,22,.45)}
  .lb-truoc{left:6px}
  .lb-sau{right:6px}
  .khung-phat{width:min(100%,calc((100vh - 150px) * 16 / 9))}
  .lb-video .lb-truoc,.lb-video .lb-sau{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));margin:0}
  .lb-video .lb-truoc{left:calc(50% - 56px)}
  .lb-video .lb-sau{right:calc(50% - 56px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-slide{transition:none}
  .noi-tel i{animation:none}
}