/* ===== PORTFOLIO — phong cách A "Cinema": nền đen, tiêu đề Arimo lớn, phim nhựa =====
   Dùng chung cho index.html (trang chủ) và design.html (trang từng mục Design). */
/* Màu, font và cỡ chữ đổi được trong Trình chỉnh sửa → tab "Giao diện" (giao-dien.js ghi đè các biến này).
   Giá trị dưới đây là bộ màu mặc định "Cinema". */
:root {
  --bg: #0a0909;
  --bg-rgb: 10, 9, 9;
  --ink: #eee8e1;
  --ink-rgb: 238, 232, 225;
  --ink2: #d6cfc7;      /* chữ phụ, sáng vừa */
  --mute: #8d867f;
  --line: rgba(var(--ink-rgb), .14);
  --card: var(--card);      /* ô nền tối hơn/sáng hơn nền một chút */
  --strip: #000;        /* dải phim */
  --sprocket: var(--sprocket);  /* lỗ dải phim */
  --accent: #ff3b5c;
  --ts: 1;              /* hệ số cỡ tiêu đề */
  --tw: 700;            /* độ đậm tiêu đề */
  --tls: 1;
  /* cỡ tiêu đề chung của mọi trang con (Video, Design, About, từng mục Design) */
  --page-title: calc(clamp(48px, 7.4vw, 116px) * var(--ts));             /* hệ số khoảng cách chữ tiêu đề (font có chân thì nới ra) */
  --title: 'Arimo', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Be Vietnam Pro', system-ui, sans-serif;
  --mono: 'Arimo', 'Helvetica Neue', Arial, sans-serif; /* nhãn nhỏ in hoa: chữ không chân, nét đậm */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.lock { overflow: hidden; }
body { background: var(--bg); color: var(--ink); font: 300 16px/1.6 var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; width: 100%; }
[hidden] { display: none !important; }
.mono { font: 700 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* hạt phim phủ toàn trang */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(4) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0) } 25% { transform: translate(-3%, 2%) } 50% { transform: translate(2%, -3%) } 75% { transform: translate(-2%, -1%) } }

/* ---------- hiệu ứng nền (tab Giao diện → Hiệu ứng nền) ---------- */
.cosmos { display: none; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
[data-fx="gradient"] .cosmos, [data-fx="vutru"] .cosmos { display: block;
  background: radial-gradient(70% 55% at 88% 0%, rgba(var(--g2-rgb), .75), transparent 70%),
              radial-gradient(60% 50% at 0% 100%, rgba(var(--g2-rgb), .5), transparent 70%),
              radial-gradient(40% 35% at 55% 45%, rgba(var(--acc-rgb), .07), transparent 70%); }
.cosmos i, .cosmos b { display: none; }
/* toàn bộ sao: độ sáng chọn trong Giao diện (--sao) × mờ dần khi cuộn (--fade) */
.cosmos .sky { position: absolute; inset: 0; opacity: calc(var(--sao, .5) * var(--fade, 1)); transition: opacity .5s; }
[data-fx="vutru"] .cosmos i { display: block; position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; animation: twinkle 4s ease-in-out infinite alternate; }
[data-fx="vutru"] .cosmos .s2 { animation-duration: 6s; animation-delay: -2s; }
[data-fx="vutru"] .cosmos .s3 { animation-duration: 3.2s; animation-delay: -1s; }
@keyframes twinkle { from { opacity: .35 } to { opacity: 1 } }
/* ngôi sao 4 cánh lấp lánh như trong portfolio PDF */
[data-fx="vutru"] .cosmos b { display: block; position: absolute; width: 22px; height: 22px; transform: scale(var(--z));
  background: radial-gradient(circle, rgba(var(--ink-rgb), 1) 0 8%, rgba(var(--ink-rgb), .0) 9%),
              linear-gradient(rgba(var(--ink-rgb), 0), rgba(var(--ink-rgb), .95) 50%, rgba(var(--ink-rgb), 0)) center / 2px 100% no-repeat,
              linear-gradient(90deg, rgba(var(--ink-rgb), 0), rgba(var(--ink-rgb), .95) 50%, rgba(var(--ink-rgb), 0)) center / 100% 2px no-repeat;
  filter: drop-shadow(0 0 6px rgba(var(--ink-rgb), .8)); animation: sparkle var(--d) ease-in-out infinite; }
@keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(calc(var(--z) * .4)) rotate(0deg) } 50% { opacity: 1; transform: scale(var(--z)) rotate(45deg) } }
/* ---------- thanh menu ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad) 34px; background: linear-gradient(rgba(var(--bg-rgb), .9), rgba(var(--bg-rgb), 0));
}
.logo { font: var(--tw) 19px/1 var(--title); letter-spacing: calc(-.02em * var(--tls)); }
.nav nav { display: flex; gap: clamp(14px, 3vw, 40px); }
.nav nav a { font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nav nav a i { font-style: normal; color: var(--mute); margin-right: 6px; }
.nav nav a.on { color: var(--accent); }
/* Liên hệ: nút hành động (viền màu nhấn), khác với các mục chuyển trang */
.nav nav { align-items: center; }
.nav nav a.nav-cta { padding: 9px 16px; border: 1px solid var(--accent); border-radius: 99px; color: var(--accent); transition: background .3s, color .3s; }
.nav nav a.nav-cta:hover { background: var(--accent); color: var(--bg); }

/* ---------- ẢNH TRANG TRÍ (tab "Ảnh trang trí" trong Trình chỉnh sửa) ---------- */
[data-deco] { position: relative; }
.vhero > :not(.deco), .ab-hero > :not(.deco), .about-top > :not(.deco), #contact > :not(.deco) { position: relative; z-index: 2; }
.deco { position: absolute; z-index: 3; width: clamp(84px, var(--w), 440px); margin: 0; transform: translate(-50%, -50%) rotate(var(--rot)); transition: transform .5s var(--ease); }
.deco.sau { z-index: 1; }
.deco img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.deco .crop img { aspect-ratio: auto; }
@media (hover: hover) { .deco:hover { transform: translate(-50%, -50%) rotate(0deg) scale(1.04); } }
/* polaroid: khung trắng, lề dưới dày, mẩu băng dính trên đầu */
.deco.polaroid { background: #f5f1e8; padding: max(5px, calc(var(--w) * .06)) max(5px, calc(var(--w) * .06)) 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25); }
.deco.polaroid figcaption { padding: 7% 4% 9%; text-align: center; color: #2b2622; font: 600 clamp(12px, 1.25vw, 18px)/1.1 'Dancing Script', cursive; }
.deco.polaroid:not(:has(figcaption))::after { content: ''; display: block; height: clamp(18px, 2.6vw, 38px); }
.deco.polaroid::before { content: ''; position: absolute; left: 50%; top: -9px; width: 38%; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 248, 225, .55); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
/* hoà vào nền: mép ảnh mờ dần vào màu nền */
.deco.hoa img, .deco.hoa .crop { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
.deco.hoa { filter: saturate(.9); }
/* tròn có viền màu nhấn */
.deco.tron img, .deco.tron .crop { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; }
/* khung mảnh */
.deco.khung { padding: 6px; border: 1px solid rgba(var(--ink-rgb), .35); background: rgba(var(--ink-rgb), .04); }
/* trong Trình chỉnh sửa: kéo được, ảnh đang chọn có viền */
.edit-deco .deco { cursor: grab; transition: none; }
.edit-deco .deco:active { cursor: grabbing; }
.edit-deco .deco.chon { outline: 2px dashed var(--accent); outline-offset: 6px; }
.edit-deco .deco.an-dt { opacity: .3; }

/* ---------- ĐẦU TRANG CON: một khuôn chung cho Video · Design · About ---------- */
.page-head { padding: 150px var(--pad) 40px; margin-bottom: 44px; border-bottom: 1px solid var(--line); }
.page-head .kick, .ab-hero .crumb, .cat-hero .crumb, .home-head .kick { color: var(--accent); }
.page-head h1 { font: var(--tw) var(--page-title)/.92 var(--title); letter-spacing: calc(-.055em * var(--tls)); margin: 16px 0 18px; }
.page-head h1 sup, .home-head h2 sup { font: 700 14px var(--mono); color: var(--accent); vertical-align: top; margin-left: 8px; letter-spacing: 0; }
.page-head p { max-width: 52ch; color: var(--ink2); font-size: clamp(15px, 1.3vw, 18px); }

/* ---------- TRANG CHỦ: các phần nổi bật ---------- */
.home-sec { padding: 90px 0 30px; }
.home-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 0 var(--pad) 22px; margin: 0 var(--pad) 36px; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
.home-head h2 { font: var(--tw) calc(clamp(32px, 4.4vw, 64px) * var(--ts))/1 var(--title); letter-spacing: calc(-.045em * var(--tls)); margin-top: 12px; }
.home-head .more { flex: none; padding: 10px 16px; border: 1px solid var(--line); border-radius: 99px; transition: border-color .3s, color .3s; }
.home-head .more:hover { border-color: var(--accent); color: var(--accent); }
.home-about { padding: 0 var(--pad) 40px; max-width: calc(64ch + 2 * var(--pad)); }
.home-about p { font-size: clamp(16px, 1.4vw, 20px); color: var(--ink2); margin-bottom: 14px; }
.home-about .jobs { color: var(--mute); font-size: 11px; line-height: 1.8; }

.home-contact { margin: 0 var(--pad) 40px; max-width: calc(100% - 2 * var(--pad)); }
#about .ab-nums { margin-top: 10px; }
.about-top:has(> .deco) { min-height: 440px; }
.about-top:has(> .deco) .home-about, .about-top:has(> .deco) .home-contact { max-width: min(64ch, 62%); }
#about { scroll-margin-top: 40px; }

/* About gọn trên trang chủ: kinh nghiệm 2 cột, mỗi dòng thời gian | nơi | vai trò */
.xp-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); padding: 60px var(--pad) 20px; }
.xp-h { color: var(--accent); margin-bottom: 14px; }
.xp { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.xp > .mono { color: var(--mute); padding-top: 4px; grid-row: span 2; }
.xp b { font: var(--tw) calc(clamp(17px, 1.4vw, 21px) * var(--ts))/1.25 var(--title); letter-spacing: calc(-.02em * var(--tls)); }
.xp-role { color: var(--ink2); font-size: 14px; }
.cv-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 40px var(--pad) 0; padding: 28px 0 0; border-top: 1px solid var(--line); }
.cv-cta p { color: var(--ink2); max-width: 56ch; }
.cv-cta .p-link { margin-top: 0; }
.cv-btn { border-color: var(--accent) !important; color: var(--accent); }

/* ---------- tiêu đề mỗi phần ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: end; padding: 0 var(--pad); margin-bottom: 40px; gap: 20px; }
.sec-head h2 { font: var(--tw) calc(clamp(52px, 10vw, 156px) * var(--ts))/.88 var(--title); letter-spacing: calc(-.055em * var(--tls)); }
.sec-head h2 sup { font: 700 14px var(--mono); color: var(--accent); vertical-align: top; margin-left: 8px; letter-spacing: 0; }
.sec-head p { max-width: 300px; color: var(--mute); font-size: 14px; }

/* ---------- DESIGN trên trang chủ: 4 khung phim = 4 mục ---------- */
#design-home { padding: 0 0 100px; }
.strip { position: relative; padding: 34px var(--pad); background: var(--strip); }
.strip::before, .strip::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 14px, var(--sprocket) 14px 26px); }
.strip::before { top: 11px; } .strip::after { bottom: 11px; }
[data-vien="mau"] .strip::before, [data-vien="mau"] .strip::after, [data-vien="khong"] .strip::before, [data-vien="khong"] .strip::after { display: none; }
[data-vien="mau"] .strip { padding: 18px var(--pad); }
[data-vien="khong"] .strip { background: none; padding: 0 var(--pad); }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cat { position: relative; display: block; aspect-ratio: var(--cat-ratio, 3 / 4.3); overflow: hidden; background: var(--card); }
.cat img, .cat video { position: absolute; inset: 0; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.72); transition: transform 1.4s var(--ease), filter .8s; }
.cat:hover img, .cat:hover video { transform: scale(1.06); filter: saturate(1.05) brightness(.92); }
.cat .no { position: absolute; top: 12px; left: 14px; z-index: 1; color: #fff; opacity: .8; }
.cat .meta { position: absolute; inset: auto 0 0; z-index: 1; padding: 60px 18px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .88)); }
.cat h3 { font: var(--tw) calc(clamp(24px, 2.3vw, 36px) * var(--ts))/1 var(--title); letter-spacing: calc(-.035em * var(--tls)); }
.cat p { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.cat .foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18); color: var(--mute); }
.cat .foot b { font-weight: 400; color: var(--ink); transition: transform .5s var(--ease); }
.cat:hover .foot b { transform: translateX(6px); }
.cat.empty .meta { background: none; }

/* ---------- VIDEO: lưới video tự chạy ---------- */
#video { padding: 0 0 120px; }
/* Đầu trang Video (trang đầu tiên): tên to + nghề; mục "Video (07)" nhỏ lại thành nhãn */
.vhero { position: relative; padding: 150px var(--pad) 40px; min-height: clamp(460px, 44vw, 600px); }
.vhero h1 { display: inline-flex; align-items: center; gap: .25em; font: var(--tw) calc(clamp(48px, 8.5vw, 136px) * var(--ts))/.92 var(--title); letter-spacing: calc(-.055em * var(--tls)); margin-bottom: 14px; cursor: default; }
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; padding: 0 var(--pad); }
.vcard { cursor: pointer; display: block; }
.vcard .scr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.vcard .scr video, .vcard .scr img { height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vcard:hover .scr video { transform: scale(1.035); }
.vcard .idx { position: absolute; top: 12px; left: 14px; color: #fff; display: flex; gap: 8px; align-items: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.vcard .idx::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.vcard .tc { position: absolute; right: 12px; bottom: 10px; color: #fff; background: rgba(0, 0, 0, .55); padding: 4px 8px; }
.vcard .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .25); backdrop-filter: blur(6px); opacity: 0; transform: scale(.8); transition: .5s var(--ease); }
.vcard:hover .play { opacity: 1; transform: none; }
.vcard .info { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-top: 16px; }
.vcard h3 { font: var(--tw) calc(clamp(24px, 2.6vw, 38px) * var(--ts))/1.05 var(--title); letter-spacing: calc(-.035em * var(--tls)); transition: color .4s; }
.vcard:hover h3 { color: var(--accent); }
.vcard .info p { margin-top: 8px; font-size: 14px; color: var(--mute); }
.vcard .info .role { color: var(--accent); font-size: 10.5px; margin-top: 10px; }
.vcard .kind { color: var(--mute); text-align: right; flex: none; max-width: 40%; }

/* ---------- DESIGN: lưới tất cả sản phẩm + nút lọc ---------- */
#design { padding: 0 0 120px; }
.dfilter { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--pad); margin-bottom: 40px; }
.dfilter button { padding: 11px 18px; border: 1px solid var(--line); border-radius: 99px; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: border-color .3s, background .3s, color .3s; }
.dfilter button:hover { border-color: var(--ink); }
.dfilter button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dfilter button i { font-style: normal; opacity: .55; margin-left: 6px; }
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 22px; padding: 0 var(--pad); }
.dcard { display: block; cursor: pointer; }
.dthumb { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--card); }
.dthumb img, .dthumb video { height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.92); }
.dcard:hover .dthumb img, .dcard:hover .dthumb video { transform: scale(1.04); filter: saturate(1.05); }
.dcard .info { display: flex; justify-content: space-between; align-items: start; gap: 14px; padding-top: 14px; }
.dcard h3 { font: var(--tw) calc(clamp(20px, 1.9vw, 28px) * var(--ts))/1.1 var(--title); letter-spacing: calc(-.03em * var(--tls)); transition: color .4s; }
.dcard:hover h3 { color: var(--accent); }
.dcard .role { color: var(--accent); font-size: 10.5px; margin-top: 8px; }
.dcard .kind { color: var(--mute); text-align: right; flex: none; max-width: 45%; }

/* ---------- CONTACT ---------- */
#contact { padding: 120px var(--pad) 40px; border-top: 1px solid var(--line); }
.big { font: var(--tw) calc(clamp(44px, 8.6vw, 132px) * var(--ts))/.95 var(--title); letter-spacing: calc(-.05em * var(--tls)); }
.big em { color: var(--accent); }
.mail { display: inline-block; margin-top: 44px; font: 500 clamp(24px, 3.6vw, 50px)/1.1 var(--title); letter-spacing: calc(-.03em * var(--tls)); position: relative; }
.mail::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform-origin: right; transition: transform .7s var(--ease); }
.mail:hover::after { transform: scaleX(0); }
.links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 90px; padding-top: 22px; border-top: 1px solid var(--line); }
.links a, .links span:not(.mono) { display: block; font-size: 15px; margin-top: 8px; }
.links a:hover { color: var(--accent); }
.links .mono { color: var(--mute); }
footer.site { display: flex; justify-content: space-between; margin-top: 80px; color: var(--mute); }

/* ---------- Bố cục "case study": chữ một bên, ảnh/video một bên ----------
   Dùng cho trang chi tiết video (bảng trượt lên) và từng sản phẩm trong trang Design. */
.p-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); column-gap: clamp(24px, 4vw, 64px); }
.p-m { grid-column: 1; margin-bottom: 16px; }
/* Xếp dọc: mỗi ảnh đúng tỉ lệ gốc, không đóng khung đen; ảnh nhỏ giữ đúng cỡ, không phóng to bị mờ */
.p-m > img, .p-m > video { width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.p-m > video { width: 100%; background: #000; }

/* Trình chiếu: khung cố định 16:10, lướt ← → ; ảnh khác tỉ lệ thì nền là chính ảnh đó làm mờ thay vì viền đen */
.g-frame { position: relative; overflow: hidden; background: var(--card); }
.g-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.g-track::-webkit-scrollbar { display: none; }
.g-slide { position: relative; flex: 0 0 100%; aspect-ratio: var(--ratio, 16 / 10); max-height: 82svh; scroll-snap-align: start; overflow: hidden; display: grid; place-items: center; }
.g-slide .g-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(28px) brightness(.45) saturate(1.2); }
.g-slide > img:not(.g-bg), .g-slide > video { position: relative; width: 100%; height: 100%; object-fit: contain; }
.g-arrow { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(var(--bg-rgb), .55); border: 1px solid rgba(var(--ink-rgb), .3); backdrop-filter: blur(6px); font-size: 18px; transition: background .3s, color .3s; z-index: 2; }
.g-arrow:hover { background: var(--ink); color: var(--bg); }
.g-prev { left: 14px; } .g-next { right: 14px; }
.g-count { position: absolute; right: 14px; bottom: 12px; padding: 5px 9px; background: rgba(var(--bg-rgb), .6); z-index: 2; }
.g-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.g-thumbs::-webkit-scrollbar { display: none; }
.g-thumbs button { flex: none; width: 76px; height: 52px; overflow: hidden; opacity: .45; border: 1px solid transparent; transition: opacity .3s, border-color .3s; display: grid; place-items: center; background: var(--card); }
.g-thumbs button.on, .g-thumbs button:hover { opacity: 1; border-color: var(--ink); }
.g-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* "Phủ kín": ảnh lấp đầy khung theo tỉ lệ đã chọn, cắt bớt mép; --focus = giữ phần trên / giữa / dưới */
.phu .g-slide > img:not(.g-bg), .phu .g-slide > video { object-fit: cover; object-position: 50% var(--focus, center); }
.p-m.phu > img, .p-m.phu > video, .g-grid.phu img, .g-grid.phu video { width: 100%; aspect-ratio: var(--ratio); object-fit: cover; object-position: 50% var(--focus, center); }

/* Ảnh đã cắt riêng: khung đúng tỉ lệ vùng cắt, ảnh gốc nằm bên trong được dịch/phóng (style tính sẵn trong giao-dien.js) */
.crop { position: relative; overflow: hidden; max-width: 100%; max-height: 100%; margin: 0 auto; }
.crop img, .crop video { position: absolute; max-width: none; height: auto !important; aspect-ratio: auto !important; object-fit: fill !important; transform: none !important; }

/* Lưới 2 cột: ảnh giữ tỉ lệ gốc, xếp so le như Pinterest */
.g-grid { columns: 2; column-gap: 12px; }
.g-grid figure { break-inside: avoid; margin-bottom: 12px; overflow: hidden; }
.p-m { overflow: hidden; } /* ảnh phóng to khi cắt riêng không tràn ra ngoài */
.g-grid img, .g-grid video { width: 100%; height: auto; }
.g-grid figure.full { column-span: all; margin-top: 2px; }
.yt { position: relative; aspect-ratio: 16 / 9; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.p-t { grid-column: 2; grid-row: 1 / span 60; }
.p-t .in { position: sticky; top: 90px; padding-bottom: 40px; }
.p-t .kick { color: var(--accent); }
.p-t h2 { font: var(--tw) calc(clamp(38px, 4.8vw, 74px) * var(--ts))/.98 var(--title); letter-spacing: calc(-.045em * var(--tls)); margin: 14px 0 26px; }
.p-desc p { font-size: 16px; line-height: 1.75; color: var(--ink2); margin-bottom: 14px; max-width: 52ch; }
.p-cred { margin-top: 30px; border-top: 1px solid var(--line); }
.p-cred div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.p-cred dt { color: var(--mute); }
.p-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.p-link { display: inline-flex; padding: 12px 20px; border: 1px solid var(--ink); border-radius: 99px; transition: background .3s, color .3s; }
.p-link:hover { background: var(--ink); color: var(--bg); }

/* bảng trượt lên khi bấm vào một video */
.panel { position: fixed; inset: 0; z-index: 80; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; transform: translateY(100%); visibility: hidden; transition: transform .8s var(--ease), visibility 0s .8s; }
.panel.open { transform: none; visibility: visible; transition: transform .8s var(--ease); }
.panel .p-body { padding: 0 var(--pad); }
.p-top { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--pad) 30px; background: linear-gradient(rgba(var(--bg-rgb), .95), rgba(var(--bg-rgb), 0)); }
.p-top .mono { color: var(--mute); }
.p-close { display: inline-flex; align-items: center; gap: 10px; }
.p-close b { font: 300 26px/1 var(--sans); }
.p-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 70px; border-top: 1px solid var(--line); }
.p-nav button, .p-nav a { text-align: left; padding: 30px var(--pad) 40px; transition: background .3s; }
.p-nav > * + * { text-align: right; border-left: 1px solid var(--line); }
.p-nav > *:hover { background: var(--card); }
.p-nav b { display: block; font: var(--tw) calc(clamp(22px, 3.2vw, 42px) * var(--ts))/1.05 var(--title); letter-spacing: calc(-.035em * var(--tls)); margin-top: 10px; }
.p-nav .mono { color: var(--mute); }

/* ---------- TRANG MỤC DESIGN (design.html) ---------- */
.subnav { position: sticky; top: 64px; z-index: 30; display: flex; align-items: center; gap: 8px; margin-top: 84px; padding: 14px var(--pad) 20px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(rgba(var(--bg-rgb), .94), rgba(var(--bg-rgb), .94) 75%, rgba(var(--bg-rgb), 0)); }
.subnav::-webkit-scrollbar { display: none; }
.subnav .back { flex: none; color: var(--mute); margin-right: 10px; transition: color .3s; }
.subnav .back:hover { color: var(--ink); }
.subnav .tab { flex: none; padding: 12px 20px; font-size: 12px; border: 1px solid var(--line); border-radius: 99px; transition: border-color .3s, background .3s, color .3s; }
.subnav .tab:hover { border-color: var(--ink); }
.subnav .tab.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.subnav .tab i { font-style: normal; opacity: .55; margin-left: 6px; }
.cat-hero { padding: 44px var(--pad) 40px; }
.cat-hero .crumb { color: var(--accent); }
.cat-hero h1 { font: var(--tw) var(--page-title)/.92 var(--title); letter-spacing: calc(-.055em * var(--tls)); margin: 16px 0 22px; }
.cat-hero p { max-width: 520px; color: var(--ink2); font-size: 17px; }
.work { padding: 70px var(--pad) 40px; border-top: 1px solid var(--line); scroll-margin-top: 150px; }
.work .num { color: var(--mute); display: block; margin-bottom: 26px; }
.none { padding: 80px var(--pad); color: var(--mute); border-top: 1px solid var(--line); }
.cat-next { display: block; padding: 70px var(--pad); border-top: 1px solid var(--line); transition: background .4s; }
.cat-next:hover { background: var(--card); }
.cat-next .mono { color: var(--mute); }
.cat-next b { display: block; font: var(--tw) calc(clamp(44px, 8vw, 124px) * var(--ts))/.92 var(--title); letter-spacing: calc(-.05em * var(--tls)); margin-top: 14px; }
.cat-next b span { color: var(--accent); }
.mini-contact { padding: 70px var(--pad) 40px; border-top: 1px solid var(--line); }
.mini-contact .big { font-size: clamp(40px, 6.4vw, 92px); }

/* ---------- TRANG ABOUT (about.html) ---------- */
.ab-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; padding: 150px var(--pad) 60px; }
.ab-hero .crumb { color: var(--accent); }
.ab-hero h1 { font: var(--tw) var(--page-title)/.92 var(--title); letter-spacing: calc(-.055em * var(--tls)); margin: 18px 0 14px; }
.ab-role { font: var(--tw) calc(clamp(22px, 2.6vw, 38px) * var(--ts))/1.15 var(--title); letter-spacing: calc(-.03em * var(--tls)); color: var(--accent); }
.ab-line { margin-top: 10px; max-width: 46ch; font-size: clamp(16px, 1.4vw, 20px); color: var(--ink2); }
.ab-sum { margin-top: 30px; max-width: 58ch; }
.ab-sum p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--ink2); margin-bottom: 12px; }
.ab-contact { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.ab-contact a:hover { color: var(--accent); }
.ab-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-nums div { padding: 34px var(--pad); border-left: 1px solid var(--line); }
.ab-nums div:first-child { border-left: 0; }
.ab-nums b { display: block; font: var(--tw) calc(clamp(40px, 5vw, 76px) * var(--ts))/1 var(--title); letter-spacing: calc(-.05em * var(--tls)); color: var(--accent); }
.ab-nums span { display: block; margin-top: 10px; font-size: 14px; color: var(--ink2); max-width: 24ch; }
.ab-sec { padding: 90px var(--pad) 20px; }
.ab-h { font: var(--tw) calc(clamp(36px, 5vw, 72px) * var(--ts))/1 var(--title); letter-spacing: calc(-.05em * var(--tls)); margin-bottom: 34px; }
.exp { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); }
.exp > .mono { color: var(--accent); padding-top: 6px; }
.exp h3 { font: var(--tw) calc(clamp(20px, 1.8vw, 26px) * var(--ts))/1.15 var(--title); letter-spacing: calc(-.03em * var(--tls)); }
.exp .org { margin-top: 6px; color: var(--mute); font-size: 14px; }
.exp .d ul { list-style: none; }
.exp .d li { position: relative; padding-left: 16px; font-size: 15px; color: var(--ink2); margin-bottom: 6px; }
.exp .d li::before { content: ''; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--mute); }
.exp .d .res { display: block; margin: 14px 0 6px; color: var(--accent); }
.ab-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 80px); }
.ab-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-grid .ab-h { font-size: clamp(30px, 3.4vw, 52px); }
.ab-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
.ab-skills .mono, .ab-edu .mono { color: var(--accent); }
.ab-skills ul, .ab-list { list-style: none; margin-top: 12px; }
.ab-skills li, .ab-list li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ab-tools { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-tools li { padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; }
.ab-edu h3 { font: var(--tw) calc(22px * var(--ts))/1.2 var(--title); letter-spacing: calc(-.03em * var(--tls)); margin: 10px 0 6px; }
.ab-edu p, .ab-goal p { font-size: 15px; color: var(--ink2); margin-bottom: 12px; }
@media (max-width: 900px) {
  .ab-hero, .ab-grid, .ab-grid.three { grid-template-columns: 1fr; }
  .ab-hero { padding-top: 120px; }
  .ab-nums { grid-template-columns: 1fr 1fr; }
  .ab-nums div:nth-child(3) { border-left: 0; }
  .ab-nums div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .exp { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- hiện dần khi cuộn ---------- */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }


/* ---------- con trỏ ---------- */
.cursor { position: fixed; z-index: 110; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: width .4s var(--ease), height .4s var(--ease); display: grid; place-items: center; }
.cursor b { font: 700 10px var(--mono); letter-spacing: .1em; color: #000; opacity: 0; }
.cursor.big { width: 78px; height: 78px; }
.cursor.big b { opacity: 1; }
@media (hover: none) { .cursor { display: none; } .vcard .play { opacity: 1; transform: none; width: 48px; height: 48px; margin: -24px 0 0 -24px; } }

/* ---------- máy tính bảng ---------- */
@media (max-width: 1000px) {
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- điện thoại ---------- */
@media (max-width: 760px) {
  .nav nav a i { display: none; }
  .nav nav { gap: 12px; }
  .xp-wrap { grid-template-columns: 1fr; }
  .xp { grid-template-columns: 1fr; }
  .xp > .mono { grid-row: auto; padding: 0; }
  .about-top:has(> .deco) .home-about, .about-top:has(> .deco) .home-contact { max-width: none; }
  .dgrid { grid-template-columns: 1fr; gap: 40px; }
  .dfilter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dfilter button { flex: none; }
  .page-head { padding-top: 120px; }
  .home-head { flex-direction: column; align-items: start; }
  .vhero { padding-top: 120px; }
  .vhero:has(> .deco:not(.an-dt)) { min-height: 540px; }
  .ab-hero:has(> .deco:not(.an-dt)) { padding-top: 300px; }
  .vhero { margin-bottom: 44px; }
  .g-arrow { width: 38px; height: 38px; margin-top: -19px; font-size: 15px; }
  .g-prev { left: 8px; } .g-next { right: 8px; }
  .g-thumbs button { width: 60px; height: 42px; }
  .nav nav a { font-size: 11px; letter-spacing: .05em; }
  .sec-head { flex-direction: column; align-items: start; }
  .cats { grid-template-columns: 1fr; }
  .cat { aspect-ratio: 4 / 3.4; }
  .vgrid { grid-template-columns: 1fr; gap: 44px; }
  .links { grid-template-columns: 1fr 1fr; }
  footer.site { flex-direction: column; gap: 8px; }
  .p-body { grid-template-columns: 1fr; }
  .p-t { grid-column: 1; grid-row: 2; }
  .p-t .in { position: static; padding: 18px 0 30px; }
  .p-nav b { font-size: 22px; }
  .subnav { top: 60px; }
  .work { padding-top: 50px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .line > span, [data-reveal] { transform: none; opacity: 1; } }

/* ---------- SHOWREEL đầu trang chủ ---------- */
.reel { padding: 0 var(--pad); margin-top: -10px; }
.reel-in { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel-btn { position: absolute; right: 22px; top: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 99px; color: #fff; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(6px); transition: background .3s, border-color .3s; }
.reel-btn:hover { background: var(--accent); border-color: var(--accent); }
.reel.on .reel-btn { display: none; }
.reel.on video { object-fit: contain; }

/* ---------- CASE STUDY: thẻ nhỏ ở trang chủ (xếp cạnh nhau) ---------- */
.cs-sec { padding-bottom: 0; }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 var(--pad); }
.ccard { display: block; cursor: pointer; }
.cthumb { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--card); }
.cthumb img, .cthumb video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1.2s var(--ease); }
.ccard:hover .cthumb img { transform: scale(1.035); }
.cbody { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 14px; }
.cbody h3 { font: var(--tw) calc(clamp(20px, 2vw, 28px) * var(--ts))/1.05 var(--title); letter-spacing: calc(-.03em * var(--tls)); transition: color .4s; }
.ccard:hover h3 { color: var(--accent); }
.cbody .role { color: var(--mute); font-size: 10.5px; margin-top: 8px; }
.cbody .read { flex: none; padding: 9px 14px; border: 1px solid var(--line); border-radius: 99px; transition: border-color .3s, color .3s; }
.ccard:hover .read { border-color: var(--accent); color: var(--accent); }
/* nhãn "Case study" trên thẻ video có case study */
.cs-badge { position: absolute; top: 10px; right: 12px; padding: 5px 9px; background: var(--accent); color: #fff; font-size: 10px; }

/* ---------- CASE STUDY: bài viết trong bảng chi tiết ---------- */
.case { grid-column: 1; margin: 56px 0 40px; padding-top: 40px; border-top: 1px solid var(--line); max-width: 760px; }
.case > .kick { color: var(--accent); }
.case p { font-size: 16.5px; line-height: 1.8; color: var(--ink2); margin-bottom: 14px; }
.case .cs-lede { font: var(--tw) calc(clamp(22px, 2.3vw, 32px) * var(--ts))/1.3 var(--title); letter-spacing: calc(-.02em * var(--tls)); color: var(--ink); margin: 18px 0 30px; }
.cs-h { font: var(--tw) calc(clamp(24px, 2.4vw, 34px) * var(--ts))/1.1 var(--title); letter-spacing: calc(-.03em * var(--tls)); margin: 48px 0 16px; }
.cs-facts { border-top: 1px solid var(--line); margin-bottom: 8px; }
.cs-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cs-facts dt { color: var(--mute); }
.cs-step { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 22px 0; border-top: 1px solid var(--line); }
.cs-step > .mono { color: var(--accent); padding-top: 4px; }
.cs-step h4 { font: 600 18px/1.45 var(--sans); color: var(--ink); margin-bottom: 8px; }
.cs-step p { margin-bottom: 0; }
.cs-imgs { display: grid; gap: 12px; margin: 22px 0 26px; }
.cs-imgs.n2 { grid-template-columns: 1fr 1fr; }
.cs-imgs.n3 { grid-template-columns: repeat(3, 1fr); }
.cs-imgs img, .cs-imgs video { width: 100%; height: auto; display: block; }
.cs-imgs.n2 img, .cs-imgs.n3 img { aspect-ratio: 16 / 10; object-fit: cover; }
.cs-imgs figcaption { color: var(--mute); font-size: 10.5px; margin-top: 8px; }
.cs-go { cursor: pointer; border-color: var(--accent); color: var(--accent); }
.cs-go:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

@media (max-width: 900px) {
  .case { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cs-imgs.n3 { grid-template-columns: 1fr; }
  .cases { grid-template-columns: 1fr; gap: 32px; }
  .cs-facts div { grid-template-columns: 1fr; gap: 4px; }
  .reel-btn { right: 10px; top: 10px; padding: 8px 12px; font-size: 10px; }
}

/* ---------- Nút đổi ngôn ngữ VI / EN ---------- */
.nav .lang { display: inline-flex; align-items: center; gap: 4px; padding: 9px 2px; color: var(--mute); cursor: pointer; }
.nav .lang b { font-weight: inherit; transition: color .3s; }
.nav .lang b.on { color: var(--ink); }
.nav .lang i { font-style: normal; opacity: .5; }
.nav .lang:hover b:not(.on) { color: var(--accent); }
.reel-btn em { font-style: normal; }

/* phần trang chủ bị tắt trong Trình chỉnh sửa (tab Trang chủ & chữ) */
[data-tat] { display: none !important; }