/*
Theme Name: 777DOLL Cẩm nang
Theme URI: https://777doll.com
Author: Amber (trợ lý dự án Private R)
Description: Theme cho blog Cẩm nang 777DOLL tại /cam-nang/. Đồng bộ hoàn toàn với web tĩnh
  (home.html · bup-be-tinh-duc.html · cam-nang.html) — nền tối điện ảnh, đỏ geranium, Cinzel/Cormorant/Be Vietnam Pro.
  ⚠️ CSS trong file này ĐƯỢC SINH TỰ ĐỘNG từ web_proto/cam-nang.html + cam-nang-bai-mau.html
  bằng scripts/build_theme.py. KHÔNG sửa tay ở đây — sửa 2 file kia rồi chạy lại script,
  nếu không theme và web tĩnh sẽ lệch nhau.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
License: Riêng cho 777doll.com
Text Domain: doll777
*/


/* ── PHÔNG CHỮ TỰ CHỨA (sinh bởi _font_local.py, ĐỪNG sửa tay) ──
   Bê nguyên si tờ danh mục của Google, chỉ đổi địa chỉ về /fonts/.
   Sửa gì thì sửa ở _font_local.py rồi chạy lại. */
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HScJ286Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HScJ287Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HScJ281Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw4BXoKZA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw5BXoKZA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw3BXo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW86Rb0bcw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW87Rb0bcw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW81Rb0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/8vIJ7ww63mVu7gt7-GT7LEc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/8vIJ7ww63mVu7gt7-GT7LEc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/8vIJ7ww63mVu7gt7-GT7LEc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/8vIJ7ww63mVu7gt7-GT7LEc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/8vIJ7ww63mVu7gt79mT7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ⚠️ BẢNG MÀU = Bộ D "Production Portugal" — chép nguyên từ home.html, KHÔNG thêm hệ màu mới. */
:root{
  --ink:#1B1B1B; --ink2:#141414; --ink3:#232320;
  --red:#E12C2C; --red2:#8E1111; --red-deep:#2a0e10;
  --green:#444C38; --green-d:#2C3323; --green-l:#6E7A5A;
  --gray:#989898; --line:#33332e; --white:#FFFFFF; --soft:#cfccc4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',sans-serif;background:var(--ink);color:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
html,body{overflow-x:clip}
::selection{background:var(--red);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1760px;margin:0 auto;padding:0 clamp(14px,2.2vw,36px)}
.eyebrow{font-family:'Cinzel',serif;font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--red);font-weight:600}
h2.sec{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,3.6vw,50px);font-weight:600;line-height:1.08;margin:10px 0 0}
.sec-head{margin-bottom:34px}
.sec-head::after{content:"";display:block;width:70px;height:2px;margin-top:18px;background:linear-gradient(90deg,var(--red),rgba(225,44,44,0))}
.sec-head p{color:var(--soft);max-width:620px;margin-top:12px;font-weight:300}

/* ---------- Announcement ---------- */
.announce{background:#0c0c0c;border-bottom:1px solid #1d1d1a;font-size:12.5px;letter-spacing:.5px;color:var(--soft)}
.announce .wrap{display:flex;justify-content:center;gap:26px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.announce span{display:flex;align-items:center;gap:8px}
.announce .dot{width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 8px rgba(225,44,44,.8);display:inline-block}

/* ===== HEADER CHUẨN 777doll (đồng bộ mọi trang) ===== */
header{position:sticky;top:0;z-index:50;background:rgba(16,16,16,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);transition:padding .25s}
header .wrap{display:flex;align-items:center;justify-content:space-between;max-width:1760px;margin:0 auto;padding:11px clamp(14px,2.2vw,36px);transition:padding .25s}
header.shrink .wrap{padding-top:7px;padding-bottom:7px}
header .logo{display:inline-flex;align-items:center}
header .logo svg,header .logo img{height:95px;width:auto;display:block}
nav.main{display:flex;gap:clamp(18px,2.4vw,34px);position:relative;align-items:center}
nav.main a{font-size:13.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--soft);font-weight:400;position:relative;padding:4px 0;white-space:nowrap}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--red);transition:width .25s}
nav.main a:hover{color:#fff}
nav.main a:hover::after{width:100%}
nav.main a.active{color:#fff}
nav.main a.active::after{width:100%}
.navi{display:flex;align-items:center;align-self:stretch}
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);padding-top:16px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s;z-index:55;width:min(1100px,calc(100vw - 40px))}
.navi:hover .mega,.navi:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-inner{background:var(--ink2);border:1px solid var(--line);border-top:2px solid var(--red);box-shadow:0 24px 50px rgba(0,0,0,.55);padding:24px 32px;display:grid;grid-template-columns:repeat(4,1fr);row-gap:20px;column-gap:30px}
.mega-col{min-width:0}
.brand-links{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(8,auto);row-gap:2px;column-gap:16px}
.mega-h{font-family:'Cinzel',serif;font-size:12.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:#F0403F;text-shadow:0 0 12px rgba(225,44,44,.4);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mega-inner .mega-col a{display:block;font-size:12.5px;color:var(--soft);padding:7px 0;white-space:nowrap;transition:color .15s}
.mega-inner .mega-col a:hover{color:#fff}
.tools{display:flex;align-items:center;gap:20px}
.tools button{background:none;border:none;color:var(--soft);cursor:pointer;display:flex;align-items:center;transition:color .2s;padding:0}
.tools button:hover{color:var(--red)}
.tools svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.burger{display:none}
/* --- "Cụm mua hàng": hàng 4 icon (Zalo·Tele·Tìm·Giỏ) + khung hotline dưới, canh giữa --- */
.hbuy{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.hbuy-row{display:flex;align-items:center;justify-content:center;gap:18px}
.hb-ic{background:none;border:none;color:var(--soft);cursor:pointer;display:flex;align-items:center;padding:0;position:relative;transition:color .2s,transform .2s}
.hb-ic:hover{color:var(--red);transform:translateY(-1px)}
.hb-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hphone{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:1px;color:#fff;white-space:nowrap;transition:.22s}
.hphone:hover{border-color:var(--red);box-shadow:0 0 0 1px rgba(225,44,44,.22),0 8px 20px -12px rgba(225,44,44,.6)}
.hphone svg{width:15px;height:15px;stroke:var(--red);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1221px) and (max-width:1440px){nav.main{gap:clamp(13px,1.25vw,30px)}nav.main a{font-size:12.5px;letter-spacing:.7px}}
/* --- Biến thể 2 cột cho CẨM NANG (đồng bộ home.html — xem chú thích gốc ở đó) --- */
.mega.guide{width:min(760px,calc(100vw - 40px))}
/* menu con "Chính sách" dưới "Về chúng tôi" — _menu_chinh_sach.py */
/* ⚠️ Rex 27/08: hộp PHẢI nằm ngay dưới chữ "Về chúng tôi".
   `.mega` neo vào `nav.main` (thẻ duy nhất có position:relative) nên mặc định rơi ra
   giữa cả thanh menu — rê chuột xuống là rời khỏi mục, hộp tắt luôn.
   Cho chính thẻ .navi bọc mục này thành khung neo thì hộp bám đúng chỗ. */
.navi-mini{position:relative}
.mega.mini{width:min(200px,calc(100vw - 40px))}
.mega.mini .mega-inner{grid-template-columns:1fr;padding:14px 18px}
.mega-inner.two{grid-template-columns:1.25fr 1fr;column-gap:38px}
.mega-inner.two .mega-col a{white-space:normal;line-height:1.45;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.mega-inner.two .mega-col a:last-child{border-bottom:none}
.mega-inner.two .mg-more{color:#F0403F;font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding-top:12px}
.mega-inner.two .mg-branch{border-bottom:none;padding:12px 14px;margin-bottom:8px;background:#1a1a17;border:1px solid var(--line);transition:border-color .2s,background .2s}
.mega-inner.two .mg-branch:hover{border-color:var(--red);background:#1f1f1b}
.mega-inner.two .mg-branch b{display:block;color:#fff;font-size:13px;font-weight:500;margin-bottom:3px}
.mega-inner.two .mg-branch span{font-size:11.5px;color:var(--gray);font-weight:300}

@media(max-width:1220px){
  .mega{display:none}
  /* Mục "Chính sách" PHẢI vào được từ điện thoại (Rex chốt 26/08).
     Luật chung ở trên ẩn mọi .mega; riêng .mega.mini mở lại và xổ thành mục con
     thụt vào trong khay ☰. Chỉ tác động đúng khối này. */
  .mega.mini{display:block;position:static;transform:none;width:auto;padding-top:0;
     opacity:1;visibility:visible;pointer-events:auto}
  .mega.mini .mega-inner{background:none;border:none;border-top:none;box-shadow:none;
     padding:0 0 0 14px;display:block;row-gap:0;column-gap:0}
  .mega.mini .mega-inner .mega-col a{min-height:44px;display:flex;align-items:center;
     font-size:13px;border-bottom:1px solid rgba(255,255,255,.055)}
  nav.main{position:fixed;inset:0 0 0 auto;width:76%;max-width:320px;background:var(--ink2);flex-direction:column;padding:90px 30px;gap:22px;transform:translateX(100%);transition:transform .3s;border-left:1px solid var(--line);z-index:60}
  nav.main.open{transform:none}
  #burger{display:flex;background:none;border:none;color:#fff;cursor:pointer}
  #burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7}
}

/* ---------- Đầu trang ---------- */
.ph-top{position:relative;padding:64px 0 10px;overflow:hidden}
.ph-top::before{content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:900px;height:420px;background:radial-gradient(ellipse at center,rgba(225,44,44,.16),transparent 68%);pointer-events:none}
.ph-top .wrap{position:relative}
.ph-top h1{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,5.2vw,68px);font-weight:600;line-height:1.05;margin:12px 0 0}
.ph-top .lead{color:var(--soft);font-weight:300;max-width:680px;margin-top:16px;font-size:16.5px}
.ph-rule{height:1px;background:linear-gradient(90deg,var(--red),rgba(225,44,44,0) 60%);margin:28px 0 0}

/* ---------- Bài nổi bật ---------- */
.ph-hero{padding:44px 0 0}
.ph-hero .inner{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--line);background:var(--ink2);overflow:hidden}
.ph-hero .cover{position:relative;min-height:360px;background:
   radial-gradient(circle at 30% 25%,rgba(225,44,44,.28),transparent 60%),
   linear-gradient(150deg,var(--red-deep),#131311 55%,var(--green-d));
   display:flex;align-items:center;justify-content:center}
.ph-hero .cover{overflow:hidden}
.ph-hero .cover img{width:100%;height:100%;object-fit:cover}
.ph-hero .body{padding:clamp(26px,3vw,52px);display:flex;flex-direction:column;justify-content:center}
.ph-hero .tag{align-self:flex-start;font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--red);border:1px solid rgba(225,44,44,.45);padding:5px 11px}
.ph-hero h2{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3.2vw,44px);font-weight:600;line-height:1.14;margin:18px 0 0}
.ph-hero p{color:var(--soft);font-weight:300;margin-top:14px;max-width:520px}
.ph-hero .go{margin-top:26px;align-self:flex-start;font-family:'Cinzel',serif;font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--red);padding-bottom:6px;transition:.25s}
.ph-hero .go:hover{color:var(--red);letter-spacing:3.2px}

/* ---------- Lọc chuyên mục ---------- */
.ph-filter{padding:52px 0 0}
.ph-filter .row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.chip{font-size:12.5px;letter-spacing:.4px;color:var(--soft);border:1px solid var(--line);padding:7px 15px;background:none;font-family:inherit;cursor:pointer;transition:.2s}
.chip:hover{color:#fff;border-color:#4a4a42}
.chip.on{color:#fff;border-color:var(--red);background:rgba(225,44,44,.1)}

/* ---------- Lưới bài ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:30px 0 90px}
.pc{border:1px solid var(--line);background:var(--ink3);display:flex;flex-direction:column;transition:transform .25s,border-color .25s,box-shadow .25s}
.pc:hover{transform:translateY(-4px);border-color:rgba(225,44,44,.5);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.pc-cover{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 70% 20%,rgba(110,122,90,.22),transparent 62%),linear-gradient(140deg,#1c1c19,#121210)}
.pc:nth-child(odd) .pc-cover{background:radial-gradient(circle at 30% 25%,rgba(225,44,44,.2),transparent 62%),linear-gradient(140deg,#1e1517,#121210)}
.pc-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pc:hover .pc-cover img{transform:scale(1.04)}
.pc-cover{overflow:hidden}
.pc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 46%);pointer-events:none}
.pc-cover .cat{z-index:2;position:absolute;left:14px;top:14px;font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--soft);background:rgba(0,0,0,.55);border:1px solid var(--line);padding:4px 9px}
.pc-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.pc-body h3{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600;line-height:1.22}
.pc-body p{color:var(--gray);font-size:13.5px;font-weight:300;margin-top:10px;flex:1}
.pc-body .go{margin-top:18px;font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--soft);transition:color .2s}
.pc:hover .pc-body .go{color:var(--red)}

/* ---------- CTA cuối ---------- */
.ph-cta{border-top:1px solid var(--line);background:linear-gradient(180deg,#121210,var(--ink));padding:68px 0 78px;text-align:center;position:relative;overflow:hidden}
.ph-cta::before{content:"";position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse at center,rgba(225,44,44,.14),transparent 66%);pointer-events:none}
.ph-cta .wrap{position:relative}
.ph-cta h2{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3.4vw,44px);font-weight:600;margin-top:10px}
.ph-cta p{color:var(--soft);font-weight:300;max-width:560px;margin:14px auto 0}
.ph-cta .btns{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.btn{font-family:'Cinzel',serif;font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;padding:14px 30px;border:1px solid var(--line);transition:.25s}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red2);border-color:var(--red2)}
.btn-ghost:hover{border-color:var(--red);color:#fff}

/* ---------- Footer (đồng bộ about.html) ---------- */
footer{background:linear-gradient(180deg,#0d0d0d 0%,#080808 100%);padding:64px 0 0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.fcol h5{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:18px}
.fcol a,.fcol p{display:block;font-size:13.5px;color:var(--gray);margin-bottom:11px;font-weight:300;transition:color .2s}
.fcol a:hover{color:var(--red)}
.fabout .logo svg,.fabout .logo img{height:180px;margin-bottom:16px}
.fabout p{max-width:280px}
.socials{display:flex;gap:14px;margin-top:6px}
.socials a{width:38px;height:38px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gray);transition:.2s}
.socials a:hover{border-color:var(--red);color:#fff;box-shadow:0 0 14px rgba(225,44,44,.25)}
.socials svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.fbar{border-top:1px solid #1d1d1a;margin-top:52px;padding:22px 0;font-size:12px;color:#6f6f6a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:1100px){
  .ph-hero .inner{grid-template-columns:1fr}
  .ph-hero .cover{min-height:220px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .pgrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
}

/* ===== MOBILE-TRANG-777DOLL =====
   Chu & nut bam tren DIEN THOAI (05/08/2026).
   ⚠️ Tat ca nam trong @media(max-width:880px) — ban may tinh KHONG DOI. */
@media(max-width:880px){
  .ph-hero .tag{font-size:12px}
  .ph-hero .go{font-size:12.5px}
  .pc-cover .cat{font-size:11px}
  .pc-body .go{font-size:12px}
  .btn{font-size:13px}
  .chip{min-height:44px;font-size:13px;padding-left:15px;padding-right:15px}
}

/* May CAM UNG: hieu ung re chuot bat roi KET LAI cho toi khi cham cho khac */
@media(hover:none){
  .card:hover{transform:none;box-shadow:none}
  .card:hover img{transform:none}
  .btile:hover{transform:none}
}
/* ===== HET MOBILE-TRANG ===== */

/* ===== DAU-CHAN-TRANG-CHUAN-777DOLL ===== */
/* ===== ĐẦU & CHÂN TRANG CHUẨN 777DOLL — BẢN DUY NHẤT CHO MỌI TRANG (22/07) =====
   ⚠️ Sửa ở đây phải sửa Y HỆT trên cả 8 trang (dùng _hdftr_apply.py).
   Logo GIỮ NGUYÊN kích thước hiển thị: file SVG có sẵn viền trong suốt bao quanh
   (header: ô 95px nhưng chữ thật chỉ 38.8px, rỗng 28.1px mỗi phía;
    footer: ô 180px nhưng chữ thật 118.8px, rỗng 30.6px mỗi phía).
   Margin âm dưới đây CHỈ cắt phần RỖNG đó khỏi phép tính bố cục — logo không nhỏ đi. */
/* --hgap = khoảng cách CHUNG: giữa các tiêu đề, logo→menu, menu→cụm thao tác (bằng nhau tuyệt đối).
   Công thức co giãn theo bề ngang màn để hàng luôn vừa khít, không tràn, không dư.
   Hằng số: logo(chữ thật) 198.1 + cụm thao tác 219.1 = 417.2 · tổng bề ngang 10 tiêu đề 885.9
   → hgap = (bề ngang dùng được − 417.2 − 885.9) / 11 khoảng cách. */
:root{--hgap:34.99px}
/* chừa sẵn chỗ thanh cuộn → trang ngắn và trang dài có cùng bề ngang, khoảng cách không lệch */
html{scrollbar-gutter:stable}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(16,16,16,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);transition:padding .25s}
header .wrap{max-width:1760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--hgap);padding:11px clamp(14px,2.2vw,36px);transition:padding .25s}
header.shrink .wrap{padding-top:7px;padding-bottom:7px}
/* margin âm đặt trên THẺ BỌC (không đặt trên <img>) — đặt trên <img> sẽ làm ảnh co nhỏ lại */
header .logo{flex:0 0 auto;display:inline-flex;align-items:center;margin:-11.8px -28.2px}
header .logo img,header .logo svg{height:95px;width:auto;max-width:none;flex:0 0 auto;display:block;margin:0}
.hbuy{flex:0 0 auto}
@media(min-width:1221px){
  nav.main{gap:var(--hgap)}
  nav.main a{font-size:13.5px;letter-spacing:1.2px}
  /* dưới 1775px: khung .wrap hết chạm trần 1760 → khoảng cách giãn theo màn */
  @media(max-width:1774px){:root{--hgap:max(0px,calc((100vw - 1375px)/11))}}
  /* dưới 1637px: lề trái/phải chuyển sang 2.2vw → bề ngang dùng được đổi công thức */
  @media(max-width:1636px){:root{--hgap:max(0px,calc((95.6vw - 1303px)/11))}}
  /* dưới 1441px: chữ menu nhỏ lại (đã có sẵn từ bản cũ) → dư chỗ hơn */
  @media(max-width:1440px){
    :root{--hgap:max(0px,calc((95.6vw - 1199px)/11))}
    nav.main a{font-size:12.5px;letter-spacing:.7px}
  }
}
/* Từ 1220px trở xuống menu thu vào nút ☰: trả logo về cách co giãn của bản cũ để
   cụm thao tác không bị đẩy ra ngoài màn (vẫn giữ nguyên phần thu gọn chiều cao). */
@media(max-width:1220px){
  :root{--hgap:14px}
  header .logo{flex:0 1 auto;margin:-11.8px 0}
  header .logo img,header .logo svg{max-width:100%}
  .hbuy{flex:0 1 auto;min-width:0}
  .hbuy .hphone{min-width:0}
}

/* ---------- FOOTER ---------- */
footer{background:linear-gradient(180deg,#0d0d0d 0%,#080808 100%);padding:36px 0 0;border-top:none}
footer .wrap{max-width:1760px;margin:0 auto;padding:0 clamp(14px,2.2vw,36px);display:block}
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
footer .fcol h5{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:18px}
footer .fcol a,footer .fcol p{display:block;font-size:13.5px;color:var(--gray);margin-bottom:11px;font-weight:300;transition:color .2s}
footer .fcol a:hover{color:var(--red)}
/* cụm logo + icon: cả cụm rộng bằng hàng icon, logo canh GIỮA cụm (không dính lề trái) */
footer .fabout{width:fit-content}
footer .fabout .logo{display:flex;justify-content:center;margin:-30.6px 0 -0.6px}
footer .fabout .logo img,footer .fabout .logo svg{height:180px;width:auto;max-width:none;display:block;margin:0}
footer .fabout p{max-width:280px;margin-top:0}
footer .socials{display:flex;gap:14px;margin-top:6px}
footer .socials a{width:38px;height:38px;border:1px solid var(--line);border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--gray);transition:.2s}
footer .socials a:hover{border-color:var(--red);color:#fff;box-shadow:0 0 14px rgba(225,44,44,.25)}
footer .socials svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
footer .fbar{border-top:1px solid #1d1d1a;margin-top:37px;padding:17px 0;font-size:12px;color:#6f6f6a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:900px){footer .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .fgrid{grid-template-columns:1fr}}

/* ============================================================================
   ĐIỆN THOẠI & MÁY BẢNG (≤1220px) — bổ sung 05/08/2026
   ⚠️ MỌI THỨ DƯỚI ĐÂY NẰM TRONG @media — BẢN MÁY TÍNH (≥1221px) KHÔNG ĐỔI 1 PIXEL.
   ============================================================================ */
@media(max-width:1220px){
  /* [1] Bỏ hiệu ứng mờ kính CHỈ ở khổ nhỏ.
     LÝ DO KỸ THUẬT: `backdrop-filter` biến <header> thành "khung neo" (containing block)
     cho mọi con đặt position:fixed. Khay menu nav.main{position:fixed;inset:0 0 0 auto}
     đáng lẽ neo vào CẢ MÀN HÌNH, nhưng bị ép chỉ cao bằng header (180px thay vì 812px)
     ⇒ 8/10 mục menu rơi ra ngoài khay, chữ đè lên ảnh hero.
     Bù lại bằng nền đặc hơn (.97) để thanh đầu trang vẫn kín, không lộ chữ phía sau. */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,14,13,.97)}

  /* [2] LOGO — sửa lỗi BỊ BÓP NGANG + trả chỗ cho thanh đầu trang.
     LỖI CŨ (đo trên live 05/08/2026): file SVG tỉ lệ gốc 876:327 = 2,679.
     Bản cũ để `height:95px` + `max-width:100%` ⇒ trình duyệt kẹp bề ngang xuống
     159px NHƯNG VẪN GIỮ chiều cao 95px ⇒ tỉ lệ hiển thị còn 1,669
     ⇒ chữ 777DOLL bị NÉN NGANG 38% trên mọi điện thoại.
     NAY: giảm CHIỀU CAO và bỏ kẹp bề ngang ⇒ logo thu nhỏ ĐỀU, đúng tỉ lệ gốc.
     Margin âm = cắt phần VIỀN TRONG SUỐT của file SVG khỏi phép tính bố cục
     (đã quy đổi theo tỉ lệ: −11,8/−28,2 ở cỡ 95px → −8,9/−21,4 ở cỡ 72px). */
  header .logo{flex:0 0 auto;margin:-8.9px -21.4px}
  header .logo img,header .logo svg{height:72px;max-width:none}
  /* [2b] SIẾT KHOẢNG TRỐNG (điểm ⑪ — 06/08).
     Chiều cao header do cụm .hbuy quyết định: nó xếp 2 tầng
     (hàng icon 20px + khe + viên hotline). Logo chỉ cao 48px, nút ☰ 24px
     ⇒ hai bên còn trống. Siết khe cụm + lề trên/dưới header:
     hbuy 57 → 50px · padding 11 → 8px ⇒ header 80 → 66px, KHÔNG bỏ thứ gì. */
  header .wrap{gap:10px;padding-top:8px;padding-bottom:8px}
  header.shrink .wrap{padding-top:6px;padding-bottom:6px}
  .hbuy{flex:0 0 auto;min-width:0;gap:6px}   /* khe 5px: tach vung bam hang icon khoi vien hotline */

  /* [3] Vùng chạm cho 4 icon (Zalo · Telegram · Tìm · Yêu thích).
     ⚠️ SỬA 06/08: bản 05/08 để hộp 44×44 nhưng khoảng cách tâm chỉ 40px
     ⇒ VÙNG BẤM CHỒNG NHAU 4px (bấm rìa icon này trúng icon kia) — đúng cảm giác
     "chèn ép" anh Rex nói. Nay hộp 40×40 + khoảng cách tâm 44px ⇒ hết chồng.
     Icon nhìn thấy vẫn 20px.
     ⚠️ SỬA 06/08 (vòng 2): padding dọc 10 → 7px. Lý do: hộp bấm cũ cao 40px trong khi
     hàng icon chỉ cao 20px ⇒ hộp thò xuống tận y=39, ĐÈ LÊN viên hotline bên dưới
     (chạm mép trên viên hotline lại trúng icon). Nay hộp 34×40, có khe 5px ⇒ hết chồng. */
  .hb-ic{padding:6px 10px;margin:-6px -10px}
  .hbuy-row{gap:24px}

  /* [3b] VIÊN HOTLINE — trả lại kích thước mảnh như bản gốc.
     ⚠️ SỬA 06/08: bản 05/08 nới padding lên 12px để lấy vùng chạm 44px
     ⇒ khung cao 44px cho chữ 11,5px, trông rỗng và kỳ cục.
     Nay: khung mảnh (~30px) như cũ, vùng chạm 44px lấy bằng LỚP TRONG SUỐT
     `::after` toả xuống dưới — khung KHÔNG phình ra.
     ⚠️ SỬA 06/08 (vòng 2): anh Rex muốn THẤP thêm 10% và SỐ TO thêm 1px.
     30px → 27px · chữ 11,5 → 12,5px. Bề ngang giữ nguyên (đang khớp đúng hàng 4 icon).
     ⛔ ĐÃ BỎ lớp `::after` nới vùng chạm 44px: nó phủ y 26→69 × x 169→315 nên
     CHẶN LUÔN nút trái tim (đo được: bấm giữa nút tim lại trúng .hphone).
     Viên hotline rộng 146px — thừa dễ bấm, không cần nới thêm. */
  .hphone{padding:4.5px 12px;margin:0;font-size:12.5px;line-height:1.25}

  /* [3c] SỐ ĐẾM trên icon trái tim — sửa lỗi bị nút ☰ che (vòng 2, 06/08).
     Số `.cartn` đặt top:-7px/right:-9px là tính cho nút 20×20 của bản gốc.
     Đợt 2 nới nút thành 40×40 để đủ vùng chạm ⇒ số văng ra x≈334, trong khi nút ☰
     chiếm 329→373 và z-index cao hơn ⇒ số CHUI XUỐNG DƯỚI nút ☰, chỉ ló vài pixel đỏ.
     Nay kéo số về đúng góc trên-phải của icon nhìn thấy, nằm gọn trong nút 40px. */
  .hb-ic .cartn{top:1px;right:2px;z-index:5}

  /* [4] Nút ☰: vùng chạm 44×44 và LUÔN NỔI TRÊN khay menu (z-index 61 > nav 60)
     ⇒ mở menu rồi bấm lại chính nút đó là đóng được. Trước đây khay menu phủ lên
     nút ☰ nên mở ra là không có cách nào đóng lại. */
  #burger,.burger{position:relative;z-index:61;padding:10px;margin:-10px}

  /* [5] Khay menu: cuộn được khi nội dung dài hơn màn; không "lây" cuộn ra trang nền.
     ⚠️ SỬA 06/08 (vòng 2) — 2 lỗi anh Rex chỉ ra:
     ① CANH LỀ LỘN XỘN: `nav.main` ở 4/8 trang có sẵn `align-items:center`
        (index · cam-nang · cam-nang-bai-mau · guide-features), 4 trang kia không có.
        Ở khay DỌC, `center` làm mỗi mục co lại đúng bề ngang chữ rồi canh giữa, riêng
        "Bộ sưu tập"/"Cẩm nang" (có menu con, width:100%) thì bám trái ⇒ so le.
        Toạ độ trái đo được: 186·115·202·213·171·164·189·115·176·202.
        ⇒ ÉP `stretch` ở đây để cả 8 trang canh trái đều như nhau.
     ② KHAY QUÁ RỘNG: khay 285px trong khi mục dài nhất "AI - Robot Doll" chỉ 138px chữ.
        ⇒ 138 + 2×20 lề + 22 dư = 200px. `max-width:62vw` để máy 320px vẫn chừa lối thoát. */
  nav.main{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:76px 20px 40px;gap:0;align-items:stretch;width:200px;max-width:62vw}

  /* [5b] MÀN MỜ PHÍA SAU KHAY (điểm ① — 06/08).
     Khay rộng 285px nên còn chừa ~90px trang lộ ra bên trái. Ở trang chủ chỗ đó là
     ảnh hero tối màu nên nhìn gọn; ở Bộ sưu tập nó lộ nút ⚙ Lọc + ô Sắp xếp + ảnh
     sản phẩm nên rối mắt ⇒ cảm giác "menu mỗi trang một kiểu".
     Nay phủ màn mờ ⇒ mọi trang nhìn y như nhau. Bấm vào màn mờ là đóng khay. */
  .navmask{position:fixed;inset:0;z-index:55;background:rgba(6,6,6,.62);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
  /* touch-action:none = chặn vuốt làm trang nền trượt.
     ⛔ KHÔNG khoá bằng `overflow` trên <html>: đặt overflow-y:hidden thì trình duyệt
     đổi luôn overflow-x từ `clip` sang `hidden` (đã đo) ⇒ <html> thành khung cuộn
     ⇒ VỠ position:sticky — đúng bẫy đã ghi ở GOTCHA CHUNG. */
  .navmask.on{opacity:1;visibility:visible;touch-action:none}
  /* Khay mở thì nâng header lên TRÊN màn mờ (62 > 55) để nút ☰ vẫn bấm được —
     nó chính là nút đóng khay. */
  html.nav-open header{z-index:62}
  nav.main>a,nav.main .navi>a{display:flex;align-items:center;min-height:48px;
    font-size:14px;letter-spacing:1.1px;border-bottom:1px solid rgba(255,255,255,.055)}
  nav.main .navi{width:100%;display:block}
  nav.main>a:last-child,nav.main .navi:last-child>a{border-bottom:none}

  /* [6] Nút cờ ngôn ngữ được i18n.js chuyển VÀO khay menu ở khổ nhỏ.
     (Trả lại 85px cho thanh đầu trang — chính là chỗ gây đè nút ☰.) */
  nav.main .lang{align-self:flex-start;margin:0 0 18px}
  nav.main .lang-btn{padding:11px 14px;gap:8px;min-height:44px}
  nav.main .lang-menu{right:auto;left:0}
  .lang-menu button{min-height:44px}

  /* [7] Chân trang: link cao 40px cho dễ bấm; icon mạng xã hội 44×44.
     `:not(.logo)` để KHÔNG đụng vào logo chân trang (nó dùng margin âm riêng). */
  footer .fcol a:not(.logo){min-height:40px;display:flex;align-items:center;margin-bottom:0}
  footer .fcol .socials a{width:44px;height:44px;min-height:0}
  footer .fbar{font-size:12.5px}

  /* [7b] CHÂN TRANG GỌN LẠI (vòng 2, 06/08 — anh Rex duyệt).
     Trước: cao 1.266px = 1,6 màn hình, riêng logo đã 180px.
     Cách thu: logo 180 → 90px (margin âm quy đổi đúng tỉ lệ) · 3 cột link xếp 2 CỘT
     (khối logo/giới thiệu vẫn chiếm trọn hàng) · siết mọi khoảng cách. */
  footer{padding-top:24px}
  footer .fgrid{grid-template-columns:1fr 1fr;gap:20px 18px}
  footer .fabout{grid-column:1 / -1;width:auto}
  /* anh Rex chot 06/08: logo chan trang canh CHINH GIUA man hinh.
     .fabout dang chiem tron hang (grid-column 1/-1) nen canh giua trong no
     = canh giua man hinh. */
  footer .fabout .logo{margin:-15.3px 0 -0.3px;justify-content:center}
  footer .fabout .logo img,footer .fabout .logo svg{height:90px}
  footer .fabout p{max-width:none;font-size:13px;line-height:1.55}
  footer .socials{gap:8px;margin-top:2px;flex-wrap:wrap}
  footer .fcol h5{margin-bottom:8px;font-size:11.5px}
  footer .fcol a:not(.logo){min-height:34px;font-size:13px}
  footer .fcol p{margin-bottom:2px;font-size:13px}
  footer .fbar{margin-top:14px;padding:10px 0;gap:6px}
  /* Cột "Liên hệ" có tới 6 dòng nên cao gấp đôi 2 cột kia (298px).
     Cho nó chiếm TRỌN hàng rồi xếp 6 dòng thành 2 cột ⇒ 298 → ~145px.
     Dòng cuối ("Tư vấn 9:00–21:00…") dài nên vẫn để trọn hàng. */
  footer .fgrid > .fcol:last-child{grid-column:1 / -1;display:grid;
    grid-template-columns:1fr 1fr;column-gap:14px;align-content:start}
  footer .fgrid > .fcol:last-child h5{grid-column:1 / -1}
  footer .fgrid > .fcol:last-child > p:last-of-type{grid-column:1 / -1}
}

/* Điện thoại phổ thông (≤380px): logo nhỏ thêm một bậc, siết khoảng cách.
   Logo LUÔN thu nhỏ ĐỀU — margin âm quy đổi đúng tỉ lệ theo từng cỡ. */
@media(max-width:380px){
  header .logo{margin:-8px -19px}
  header .logo img,header .logo svg{height:64px}
  .hbuy-row{gap:22px}
  /* ⚠️ khối này đè lên [3b] ở trên nên PHẢI ghi lại đủ cỡ chữ + padding mới */
  .hphone{padding:4.5px 9px;font-size:12.5px;line-height:1.25;letter-spacing:.4px}
  header .wrap{gap:8px;padding-left:12px;padding-right:12px}
}

/* Máy rất nhỏ (≤340px) */
@media(max-width:340px){
  header .logo{margin:-6.5px -15.5px}
  header .logo img,header .logo svg{height:52px}
  .hbuy-row{gap:16px}
}
/* Điện thoại (≤440px): 8 icon không đủ chỗ 1 hàng, tự xuống thành 6+2 nhìn lệch.
   Ép 4 cột cho cân — KHÔNG thu nhỏ khung 44×44 (anh Rex chốt 26/08). */
@media(max-width:440px){
  footer .socials{display:grid;grid-template-columns:repeat(4,44px);justify-content:start}
}

/* ===== HẾT KHỐI CHUẨN ===== */

/* ================= BÀI VIẾT — chuẩn trình bày cho theme WordPress 777DOLL =================
   Bề rộng đọc 760px canh giữa. ⚠️ 18/07: đã thử nới ra 1760px cho khớp lề trang danh sách,
   anh Rex xem rồi CHỐT quay lại bản 760px này — rộng quá thì rối và mất đẹp. Đừng nới lại. */
.article{padding:44px 0 0}
.art-wrap{max-width:760px;margin:0 auto;padding:0 clamp(14px,2.2vw,36px)}
.crumb{font-size:12.5px;color:var(--gray);margin-bottom:22px}
.crumb a:hover{color:var(--red)}
.art-kicker{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--red)}
.article h1{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,4.4vw,54px);font-weight:600;line-height:1.1;margin:14px 0 0}
.art-by{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--gray);margin-top:16px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.article figure{margin:30px 0}
.article figure.cover{margin:26px 0 0}
.article figure img{width:100%;height:auto;border:1px solid var(--line)}
.capsule{background:linear-gradient(135deg,var(--red-deep),#141412);border:1px solid var(--line);border-left:3px solid var(--red);padding:22px 26px;margin:30px 0}
.capsule p{font-size:17px;font-weight:400;color:#fff;margin:0}
.article h2{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,2.8vw,34px);font-weight:600;line-height:1.18;margin:46px 0 0;padding-top:6px}
.article h2::before{content:"";display:block;width:44px;height:2px;background:linear-gradient(90deg,var(--red),transparent);margin-bottom:16px}
.article h3{font-family:'Be Vietnam Pro',sans-serif;font-size:18px;font-weight:600;margin:30px 0 0;color:#fff}
.article p{margin-top:15px;color:#ddd9d1;font-weight:300;font-size:16.5px;line-height:1.78}
.article strong{color:#fff;font-weight:500}
.article a{color:#F0403F;border-bottom:1px solid rgba(240,64,63,.35)}
.article a:hover{border-bottom-color:#F0403F}
.article ul,.article ol{margin:15px 0 0 20px;color:#ddd9d1;font-weight:300}
.article li{margin-top:8px;line-height:1.7}
.article hr{border:none;border-top:1px solid var(--line);margin:38px 0}
.article blockquote{border-left:2px solid var(--red);padding:4px 0 4px 18px;margin:24px 0;color:var(--soft);font-style:italic}
.tbl{overflow-x:auto;margin:26px 0;border:1px solid var(--line)}
.article table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
.article th{background:#1a1a17;font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#F0403F;text-align:left;padding:12px 14px;font-weight:600}
.article td{padding:12px 14px;border-top:1px solid var(--line);color:#ddd9d1;font-weight:300;vertical-align:top}
.article tbody tr:nth-child(even){background:rgba(255,255,255,.017)}
/* Khối Sản phẩm liên quan — bê nguyên từ bup-be-tinh-duc.html, chỉ nới rộng hơn cột chữ */
.rel-wrap{max-width:1180px;margin:56px auto 0;padding:0 clamp(14px,2.2vw,36px)}
.related{margin:0;border-top:1px solid var(--line);padding-top:26px}
.sech{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;color:var(--gray);margin:16px 0 14px;position:relative;padding-bottom:11px}
.sech::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:2px;background:linear-gradient(90deg,var(--red),transparent)}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{cursor:pointer;background:linear-gradient(180deg,#24241f 0%,#1a1a16 100%);border:1px solid var(--line);overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(225,44,44,.5);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.card .ci{position:relative;aspect-ratio:3/4;background:#000;overflow:hidden}
.card .ci img{width:100%;height:100%;object-fit:cover;transition:transform .6s;border:none}
.card:hover .ci img{transform:scale(1.05)}
.card .ci::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,transparent,rgba(8,8,8,.5));pointer-events:none}
.card .tb{position:absolute;top:11px;left:11px;z-index:2}
.card .tier{font-family:'Cinzel',serif;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:#fff;padding:4px 9px;display:inline-block}
.card .meta{padding:14px 14px 17px}
.card .caps{display:flex;gap:7px;margin-bottom:6px;color:var(--red);font-size:14px}
.card .nm{font-family:'Cormorant Garamond',serif;font-size:22px;color:#fff;line-height:1.1;font-weight:600}
.card .ns{font-family:'Cinzel',serif;font-size:10px;color:var(--gray);letter-spacing:1.5px;text-transform:uppercase;margin-top:4px}
.card .pr{margin-top:9px;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--red);font-size:20px;font-weight:600;letter-spacing:.2px}
.art-cta{max-width:760px;margin:52px auto 0;padding:30px clamp(18px,2.2vw,36px);border:1px solid var(--line);background:linear-gradient(135deg,#16160f,var(--ink2));text-align:center}
.art-cta p{color:var(--soft);font-weight:300;margin:0 0 18px}
.art-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.article-end{padding-bottom:86px}
@media(max-width:760px){.rgrid{grid-template-columns:repeat(2,1fr)}.article p{font-size:16px}}

/* ===== MOBILE-TRANG-777DOLL =====
   Chu & nut bam tren DIEN THOAI (05/08/2026).
   ⚠️ Tat ca nam trong @media(max-width:880px) — ban may tinh KHONG DOI. */
@media(max-width:880px){
  .article th{font-size:12.5px}
  .sech{font-size:12.5px}
  .card .tier{font-size:11px}
  .card .ns{font-size:11.5px}
  .btn{font-size:13px}
}

/* May CAM UNG: hieu ung re chuot bat roi KET LAI cho toi khi cham cho khac */
@media(hover:none){
  .card:hover{transform:none;box-shadow:none}
  .card:hover img{transform:none}
  .btile:hover{transform:none}
}
/* ===== HET MOBILE-TRANG ===== */

/* ===== DAU-CHAN-TRANG-CHUAN-777DOLL ===== */
/* ===== ĐẦU & CHÂN TRANG CHUẨN 777DOLL — BẢN DUY NHẤT CHO MỌI TRANG (22/07) =====
   ⚠️ Sửa ở đây phải sửa Y HỆT trên cả 8 trang (dùng _hdftr_apply.py).
   Logo GIỮ NGUYÊN kích thước hiển thị: file SVG có sẵn viền trong suốt bao quanh
   (header: ô 95px nhưng chữ thật chỉ 38.8px, rỗng 28.1px mỗi phía;
    footer: ô 180px nhưng chữ thật 118.8px, rỗng 30.6px mỗi phía).
   Margin âm dưới đây CHỈ cắt phần RỖNG đó khỏi phép tính bố cục — logo không nhỏ đi. */
/* --hgap = khoảng cách CHUNG: giữa các tiêu đề, logo→menu, menu→cụm thao tác (bằng nhau tuyệt đối).
   Công thức co giãn theo bề ngang màn để hàng luôn vừa khít, không tràn, không dư.
   Hằng số: logo(chữ thật) 198.1 + cụm thao tác 219.1 = 417.2 · tổng bề ngang 10 tiêu đề 885.9
   → hgap = (bề ngang dùng được − 417.2 − 885.9) / 11 khoảng cách. */
:root{--hgap:34.99px}
/* chừa sẵn chỗ thanh cuộn → trang ngắn và trang dài có cùng bề ngang, khoảng cách không lệch */
html{scrollbar-gutter:stable}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(16,16,16,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);transition:padding .25s}
header .wrap{max-width:1760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--hgap);padding:11px clamp(14px,2.2vw,36px);transition:padding .25s}
header.shrink .wrap{padding-top:7px;padding-bottom:7px}
/* margin âm đặt trên THẺ BỌC (không đặt trên <img>) — đặt trên <img> sẽ làm ảnh co nhỏ lại */
header .logo{flex:0 0 auto;display:inline-flex;align-items:center;margin:-11.8px -28.2px}
header .logo img,header .logo svg{height:95px;width:auto;max-width:none;flex:0 0 auto;display:block;margin:0}
.hbuy{flex:0 0 auto}
@media(min-width:1221px){
  nav.main{gap:var(--hgap)}
  nav.main a{font-size:13.5px;letter-spacing:1.2px}
  /* dưới 1775px: khung .wrap hết chạm trần 1760 → khoảng cách giãn theo màn */
  @media(max-width:1774px){:root{--hgap:max(0px,calc((100vw - 1375px)/11))}}
  /* dưới 1637px: lề trái/phải chuyển sang 2.2vw → bề ngang dùng được đổi công thức */
  @media(max-width:1636px){:root{--hgap:max(0px,calc((95.6vw - 1303px)/11))}}
  /* dưới 1441px: chữ menu nhỏ lại (đã có sẵn từ bản cũ) → dư chỗ hơn */
  @media(max-width:1440px){
    :root{--hgap:max(0px,calc((95.6vw - 1199px)/11))}
    nav.main a{font-size:12.5px;letter-spacing:.7px}
  }
}
/* Từ 1220px trở xuống menu thu vào nút ☰: trả logo về cách co giãn của bản cũ để
   cụm thao tác không bị đẩy ra ngoài màn (vẫn giữ nguyên phần thu gọn chiều cao). */
@media(max-width:1220px){
  :root{--hgap:14px}
  header .logo{flex:0 1 auto;margin:-11.8px 0}
  header .logo img,header .logo svg{max-width:100%}
  .hbuy{flex:0 1 auto;min-width:0}
  .hbuy .hphone{min-width:0}
}

/* ---------- FOOTER ---------- */
footer{background:linear-gradient(180deg,#0d0d0d 0%,#080808 100%);padding:36px 0 0;border-top:none}
footer .wrap{max-width:1760px;margin:0 auto;padding:0 clamp(14px,2.2vw,36px);display:block}
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
footer .fcol h5{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:18px}
footer .fcol a,footer .fcol p{display:block;font-size:13.5px;color:var(--gray);margin-bottom:11px;font-weight:300;transition:color .2s}
footer .fcol a:hover{color:var(--red)}
/* cụm logo + icon: cả cụm rộng bằng hàng icon, logo canh GIỮA cụm (không dính lề trái) */
footer .fabout{width:fit-content}
footer .fabout .logo{display:flex;justify-content:center;margin:-30.6px 0 -0.6px}
footer .fabout .logo img,footer .fabout .logo svg{height:180px;width:auto;max-width:none;display:block;margin:0}
footer .fabout p{max-width:280px;margin-top:0}
footer .socials{display:flex;gap:14px;margin-top:6px}
footer .socials a{width:38px;height:38px;border:1px solid var(--line);border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--gray);transition:.2s}
footer .socials a:hover{border-color:var(--red);color:#fff;box-shadow:0 0 14px rgba(225,44,44,.25)}
footer .socials svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
footer .fbar{border-top:1px solid #1d1d1a;margin-top:37px;padding:17px 0;font-size:12px;color:#6f6f6a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:900px){footer .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .fgrid{grid-template-columns:1fr}}

/* ============================================================================
   ĐIỆN THOẠI & MÁY BẢNG (≤1220px) — bổ sung 05/08/2026
   ⚠️ MỌI THỨ DƯỚI ĐÂY NẰM TRONG @media — BẢN MÁY TÍNH (≥1221px) KHÔNG ĐỔI 1 PIXEL.
   ============================================================================ */
@media(max-width:1220px){
  /* [1] Bỏ hiệu ứng mờ kính CHỈ ở khổ nhỏ.
     LÝ DO KỸ THUẬT: `backdrop-filter` biến <header> thành "khung neo" (containing block)
     cho mọi con đặt position:fixed. Khay menu nav.main{position:fixed;inset:0 0 0 auto}
     đáng lẽ neo vào CẢ MÀN HÌNH, nhưng bị ép chỉ cao bằng header (180px thay vì 812px)
     ⇒ 8/10 mục menu rơi ra ngoài khay, chữ đè lên ảnh hero.
     Bù lại bằng nền đặc hơn (.97) để thanh đầu trang vẫn kín, không lộ chữ phía sau. */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,14,13,.97)}

  /* [2] LOGO — sửa lỗi BỊ BÓP NGANG + trả chỗ cho thanh đầu trang.
     LỖI CŨ (đo trên live 05/08/2026): file SVG tỉ lệ gốc 876:327 = 2,679.
     Bản cũ để `height:95px` + `max-width:100%` ⇒ trình duyệt kẹp bề ngang xuống
     159px NHƯNG VẪN GIỮ chiều cao 95px ⇒ tỉ lệ hiển thị còn 1,669
     ⇒ chữ 777DOLL bị NÉN NGANG 38% trên mọi điện thoại.
     NAY: giảm CHIỀU CAO và bỏ kẹp bề ngang ⇒ logo thu nhỏ ĐỀU, đúng tỉ lệ gốc.
     Margin âm = cắt phần VIỀN TRONG SUỐT của file SVG khỏi phép tính bố cục
     (đã quy đổi theo tỉ lệ: −11,8/−28,2 ở cỡ 95px → −8,9/−21,4 ở cỡ 72px). */
  header .logo{flex:0 0 auto;margin:-8.9px -21.4px}
  header .logo img,header .logo svg{height:72px;max-width:none}
  /* [2b] SIẾT KHOẢNG TRỐNG (điểm ⑪ — 06/08).
     Chiều cao header do cụm .hbuy quyết định: nó xếp 2 tầng
     (hàng icon 20px + khe + viên hotline). Logo chỉ cao 48px, nút ☰ 24px
     ⇒ hai bên còn trống. Siết khe cụm + lề trên/dưới header:
     hbuy 57 → 50px · padding 11 → 8px ⇒ header 80 → 66px, KHÔNG bỏ thứ gì. */
  header .wrap{gap:10px;padding-top:8px;padding-bottom:8px}
  header.shrink .wrap{padding-top:6px;padding-bottom:6px}
  .hbuy{flex:0 0 auto;min-width:0;gap:6px}   /* khe 5px: tach vung bam hang icon khoi vien hotline */

  /* [3] Vùng chạm cho 4 icon (Zalo · Telegram · Tìm · Yêu thích).
     ⚠️ SỬA 06/08: bản 05/08 để hộp 44×44 nhưng khoảng cách tâm chỉ 40px
     ⇒ VÙNG BẤM CHỒNG NHAU 4px (bấm rìa icon này trúng icon kia) — đúng cảm giác
     "chèn ép" anh Rex nói. Nay hộp 40×40 + khoảng cách tâm 44px ⇒ hết chồng.
     Icon nhìn thấy vẫn 20px.
     ⚠️ SỬA 06/08 (vòng 2): padding dọc 10 → 7px. Lý do: hộp bấm cũ cao 40px trong khi
     hàng icon chỉ cao 20px ⇒ hộp thò xuống tận y=39, ĐÈ LÊN viên hotline bên dưới
     (chạm mép trên viên hotline lại trúng icon). Nay hộp 34×40, có khe 5px ⇒ hết chồng. */
  .hb-ic{padding:6px 10px;margin:-6px -10px}
  .hbuy-row{gap:24px}

  /* [3b] VIÊN HOTLINE — trả lại kích thước mảnh như bản gốc.
     ⚠️ SỬA 06/08: bản 05/08 nới padding lên 12px để lấy vùng chạm 44px
     ⇒ khung cao 44px cho chữ 11,5px, trông rỗng và kỳ cục.
     Nay: khung mảnh (~30px) như cũ, vùng chạm 44px lấy bằng LỚP TRONG SUỐT
     `::after` toả xuống dưới — khung KHÔNG phình ra.
     ⚠️ SỬA 06/08 (vòng 2): anh Rex muốn THẤP thêm 10% và SỐ TO thêm 1px.
     30px → 27px · chữ 11,5 → 12,5px. Bề ngang giữ nguyên (đang khớp đúng hàng 4 icon).
     ⛔ ĐÃ BỎ lớp `::after` nới vùng chạm 44px: nó phủ y 26→69 × x 169→315 nên
     CHẶN LUÔN nút trái tim (đo được: bấm giữa nút tim lại trúng .hphone).
     Viên hotline rộng 146px — thừa dễ bấm, không cần nới thêm. */
  .hphone{padding:4.5px 12px;margin:0;font-size:12.5px;line-height:1.25}

  /* [3c] SỐ ĐẾM trên icon trái tim — sửa lỗi bị nút ☰ che (vòng 2, 06/08).
     Số `.cartn` đặt top:-7px/right:-9px là tính cho nút 20×20 của bản gốc.
     Đợt 2 nới nút thành 40×40 để đủ vùng chạm ⇒ số văng ra x≈334, trong khi nút ☰
     chiếm 329→373 và z-index cao hơn ⇒ số CHUI XUỐNG DƯỚI nút ☰, chỉ ló vài pixel đỏ.
     Nay kéo số về đúng góc trên-phải của icon nhìn thấy, nằm gọn trong nút 40px. */
  .hb-ic .cartn{top:1px;right:2px;z-index:5}

  /* [4] Nút ☰: vùng chạm 44×44 và LUÔN NỔI TRÊN khay menu (z-index 61 > nav 60)
     ⇒ mở menu rồi bấm lại chính nút đó là đóng được. Trước đây khay menu phủ lên
     nút ☰ nên mở ra là không có cách nào đóng lại. */
  #burger,.burger{position:relative;z-index:61;padding:10px;margin:-10px}

  /* [5] Khay menu: cuộn được khi nội dung dài hơn màn; không "lây" cuộn ra trang nền.
     ⚠️ SỬA 06/08 (vòng 2) — 2 lỗi anh Rex chỉ ra:
     ① CANH LỀ LỘN XỘN: `nav.main` ở 4/8 trang có sẵn `align-items:center`
        (index · cam-nang · cam-nang-bai-mau · guide-features), 4 trang kia không có.
        Ở khay DỌC, `center` làm mỗi mục co lại đúng bề ngang chữ rồi canh giữa, riêng
        "Bộ sưu tập"/"Cẩm nang" (có menu con, width:100%) thì bám trái ⇒ so le.
        Toạ độ trái đo được: 186·115·202·213·171·164·189·115·176·202.
        ⇒ ÉP `stretch` ở đây để cả 8 trang canh trái đều như nhau.
     ② KHAY QUÁ RỘNG: khay 285px trong khi mục dài nhất "AI - Robot Doll" chỉ 138px chữ.
        ⇒ 138 + 2×20 lề + 22 dư = 200px. `max-width:62vw` để máy 320px vẫn chừa lối thoát. */
  nav.main{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:76px 20px 40px;gap:0;align-items:stretch;width:200px;max-width:62vw}

  /* [5b] MÀN MỜ PHÍA SAU KHAY (điểm ① — 06/08).
     Khay rộng 285px nên còn chừa ~90px trang lộ ra bên trái. Ở trang chủ chỗ đó là
     ảnh hero tối màu nên nhìn gọn; ở Bộ sưu tập nó lộ nút ⚙ Lọc + ô Sắp xếp + ảnh
     sản phẩm nên rối mắt ⇒ cảm giác "menu mỗi trang một kiểu".
     Nay phủ màn mờ ⇒ mọi trang nhìn y như nhau. Bấm vào màn mờ là đóng khay. */
  .navmask{position:fixed;inset:0;z-index:55;background:rgba(6,6,6,.62);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
  /* touch-action:none = chặn vuốt làm trang nền trượt.
     ⛔ KHÔNG khoá bằng `overflow` trên <html>: đặt overflow-y:hidden thì trình duyệt
     đổi luôn overflow-x từ `clip` sang `hidden` (đã đo) ⇒ <html> thành khung cuộn
     ⇒ VỠ position:sticky — đúng bẫy đã ghi ở GOTCHA CHUNG. */
  .navmask.on{opacity:1;visibility:visible;touch-action:none}
  /* Khay mở thì nâng header lên TRÊN màn mờ (62 > 55) để nút ☰ vẫn bấm được —
     nó chính là nút đóng khay. */
  html.nav-open header{z-index:62}
  nav.main>a,nav.main .navi>a{display:flex;align-items:center;min-height:48px;
    font-size:14px;letter-spacing:1.1px;border-bottom:1px solid rgba(255,255,255,.055)}
  nav.main .navi{width:100%;display:block}
  nav.main>a:last-child,nav.main .navi:last-child>a{border-bottom:none}

  /* [6] Nút cờ ngôn ngữ được i18n.js chuyển VÀO khay menu ở khổ nhỏ.
     (Trả lại 85px cho thanh đầu trang — chính là chỗ gây đè nút ☰.) */
  nav.main .lang{align-self:flex-start;margin:0 0 18px}
  nav.main .lang-btn{padding:11px 14px;gap:8px;min-height:44px}
  nav.main .lang-menu{right:auto;left:0}
  .lang-menu button{min-height:44px}

  /* [7] Chân trang: link cao 40px cho dễ bấm; icon mạng xã hội 44×44.
     `:not(.logo)` để KHÔNG đụng vào logo chân trang (nó dùng margin âm riêng). */
  footer .fcol a:not(.logo){min-height:40px;display:flex;align-items:center;margin-bottom:0}
  footer .fcol .socials a{width:44px;height:44px;min-height:0}
  footer .fbar{font-size:12.5px}

  /* [7b] CHÂN TRANG GỌN LẠI (vòng 2, 06/08 — anh Rex duyệt).
     Trước: cao 1.266px = 1,6 màn hình, riêng logo đã 180px.
     Cách thu: logo 180 → 90px (margin âm quy đổi đúng tỉ lệ) · 3 cột link xếp 2 CỘT
     (khối logo/giới thiệu vẫn chiếm trọn hàng) · siết mọi khoảng cách. */
  footer{padding-top:24px}
  footer .fgrid{grid-template-columns:1fr 1fr;gap:20px 18px}
  footer .fabout{grid-column:1 / -1;width:auto}
  /* anh Rex chot 06/08: logo chan trang canh CHINH GIUA man hinh.
     .fabout dang chiem tron hang (grid-column 1/-1) nen canh giua trong no
     = canh giua man hinh. */
  footer .fabout .logo{margin:-15.3px 0 -0.3px;justify-content:center}
  footer .fabout .logo img,footer .fabout .logo svg{height:90px}
  footer .fabout p{max-width:none;font-size:13px;line-height:1.55}
  footer .socials{gap:8px;margin-top:2px;flex-wrap:wrap}
  footer .fcol h5{margin-bottom:8px;font-size:11.5px}
  footer .fcol a:not(.logo){min-height:34px;font-size:13px}
  footer .fcol p{margin-bottom:2px;font-size:13px}
  footer .fbar{margin-top:14px;padding:10px 0;gap:6px}
  /* Cột "Liên hệ" có tới 6 dòng nên cao gấp đôi 2 cột kia (298px).
     Cho nó chiếm TRỌN hàng rồi xếp 6 dòng thành 2 cột ⇒ 298 → ~145px.
     Dòng cuối ("Tư vấn 9:00–21:00…") dài nên vẫn để trọn hàng. */
  footer .fgrid > .fcol:last-child{grid-column:1 / -1;display:grid;
    grid-template-columns:1fr 1fr;column-gap:14px;align-content:start}
  footer .fgrid > .fcol:last-child h5{grid-column:1 / -1}
  footer .fgrid > .fcol:last-child > p:last-of-type{grid-column:1 / -1}
}

/* Điện thoại phổ thông (≤380px): logo nhỏ thêm một bậc, siết khoảng cách.
   Logo LUÔN thu nhỏ ĐỀU — margin âm quy đổi đúng tỉ lệ theo từng cỡ. */
@media(max-width:380px){
  header .logo{margin:-8px -19px}
  header .logo img,header .logo svg{height:64px}
  .hbuy-row{gap:22px}
  /* ⚠️ khối này đè lên [3b] ở trên nên PHẢI ghi lại đủ cỡ chữ + padding mới */
  .hphone{padding:4.5px 9px;font-size:12.5px;line-height:1.25;letter-spacing:.4px}
  header .wrap{gap:8px;padding-left:12px;padding-right:12px}
}

/* Máy rất nhỏ (≤340px) */
@media(max-width:340px){
  header .logo{margin:-6.5px -15.5px}
  header .logo img,header .logo svg{height:52px}
  .hbuy-row{gap:16px}
}
/* Điện thoại (≤440px): 8 icon không đủ chỗ 1 hàng, tự xuống thành 6+2 nhìn lệch.
   Ép 4 cột cho cân — KHÔNG thu nhỏ khung 44×44 (anh Rex chốt 26/08). */
@media(max-width:440px){
  footer .socials{display:grid;grid-template-columns:repeat(4,44px);justify-content:start}
}

/* ===== HẾT KHỐI CHUẨN ===== */


/* ---- phần chỉ WordPress mới cần ---- */
.wp-block-image img,.article img{max-width:100%;height:auto}
.alignwide{max-width:1180px;margin-left:auto;margin-right:auto}
.alignfull{width:100vw;margin-left:calc(50% - 50vw)}
.article .wp-block-table{overflow-x:auto}
.pager{display:flex;justify-content:center;gap:12px;padding:0 0 80px}
.pager a,.pager span{font-family:'Cinzel',serif;font-size:12px;letter-spacing:1.6px;padding:10px 16px;border:1px solid var(--line);color:var(--soft)}
.pager a:hover{border-color:var(--red);color:#fff}
.pager .current{background:var(--red);border-color:var(--red);color:#fff}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- thẻ sản phẩm trong bài (khối "Sản phẩm liên quan") ---- *
 * 13/08/2026: WordPress LƯỢC BỎ `onclick` khi lưu bài (bộ lọc kses) ⇒ thẻ bấm không đi đâu.
 * `gen_related.py` nay sinh <a class="card" href> thay <div onclick>. */
a.card{display:block;color:inherit;text-decoration:none}
a.card:hover{color:inherit;text-decoration:none}

/* ================= BÀI HÃNG (Zelex 13/08/2026) =================
 * Bố cục riêng cho bài giới thiệu dòng sản phẩm — khung rộng 1280px, trùng lề trang Bộ sưu tập.
 * ⚠️ PHẢI nằm ở theme: WordPress lược bỏ thẻ <style> khi lưu bài, để trong bài là vỡ bố cục.
 * ⚠️ `.doi`/`.luoi` dùng grid ⇒ bài đăng lên WordPress phải TẮT wpautop, kẻo <p> rỗng
 *    chen vào làm lệch ô (đã dính 13/08: mỗi khối .doi có 3 con thay vì 2). */
/* Bố cục bài Zelex — khung rộng 1280px, trùng lề trang Bộ sưu tập */
/* 1280px + đệm trong 22px = ĐÚNG khai báo .wrap của trang Bộ sưu tập,
   nhờ vậy lề trái phải của bài blog trùng khít trang Bộ sưu tập và trang hãng. */
.zxbai{width:min(1280px,94vw);box-sizing:border-box;padding:0 22px;
  margin-left:50%;transform:translateX(-50%)}
/* Ảnh lẻ canh GIỮA — Zelex bọc <div style="text-align:center"> quanh từng ảnh */
.zxbai img,.zxbai video{max-width:100%;height:auto;display:block;margin:22px auto}
/* Lưới ảnh ĐÚNG 2 CỘT — trang nguồn khai `my-image-grid sm:1 md:2 lg:2`.
   ⚠️ Bản trước em để auto-fit 250px ⇒ ra 5 cột, ảnh bé tí, không giống nguồn. */
.zxbai .luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:22px 0}
.zxbai .luoi img{margin:0;width:100%}
/* Ảnh TRÊN — chữ DƯỚI (Rex chốt 13/08: để ảnh trái/chữ phải thì ảnh bé quá, khó nhìn).
   Ảnh rộng hết khung .zxbai (~1145px) thay vì 556px như bản 2 cột. */
.zxbai .doi{display:block;margin:30px 0}
.zxbai .doi img{margin:0 0 14px;width:100%}
.zxbai .doi p{margin:0}
.zxbai .cot2{columns:2;column-gap:46px}
.zxbai .cot2 p,.zxbai .cot2 ul,.zxbai .cot2 ol{break-inside:avoid}
.zxbai table{width:100%;border-collapse:collapse}
@media(max-width:900px){
  .zxbai{width:auto;margin-left:0;transform:none}
  .zxbai .luoi{grid-template-columns:1fr}
  .zxbai .doi{grid-template-columns:1fr;gap:14px}
  .zxbai .cot2{columns:1}
}

/* Khối "Đọc thêm" — nối 4 địa chỉ Zelex với nhau */
.zxbai .docthem{margin:38px 0 12px;padding:18px 22px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03)}
.zxbai .docthem b{display:block;font-family:'Cinzel',serif;font-size:12px;letter-spacing:1.6px;
  text-transform:uppercase;margin-bottom:10px}
.zxbai .docthem ul{margin:0;padding-left:19px}
.zxbai .docthem li{margin:7px 0}

/* ── Bài hãng MMX — bộ lớp .mx* ─────────────────────────────────────────────
 * Nguồn: khối <style> trong content_blog/mmx-why-choose.html (đừng sửa ở đây). */
).
-->

<style>
/* ===== Bố cục riêng bài MMX — các lớp .mx* =====
   Khung .zxbai · .docthem · bảng .tbl dùng lại của theme (đã có từ đợt Zelex).
   ⚠️ Khối này là NGUỒN DUY NHẤT: build_theme.py đọc thẳng vào style.css của theme,
   còn script đăng bài thì CẮT BỎ nó khỏi post_content (WordPress lược thẻ <style>). */

/* logo hãng đầu bài — cùng cỡ với logo trên 2 trang hãng (Rex chốt 13/08: to gấp đôi) */
.zxbai .mxlogo{text-align:center;margin:0 0 26px}
.zxbai .mxlogo img{max-width:480px;max-height:144px;width:auto;height:auto;
  object-fit:contain;margin:0 auto;display:block}

/* chữ chạy hết ngang, ảnh xếp thành DẢI NGANG bên dưới — đúng mẫu lặp của trang MMX */
.zxbai .mx3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}
.zxbai .mx2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0}
.zxbai .mx5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0}
.zxbai .mx3 img,.zxbai .mx2 img,.zxbai .mx5 img,
.zxbai .mx3 video,.zxbai .mx2 video{margin:0;width:100%}

/* băng chuyền bảng thông số — kéo ngang, đúng như trang gốc */
.zxbai .mxcuon{display:flex;gap:12px;overflow-x:auto;margin:22px 0;padding-bottom:10px}
.zxbai .mxcuon img{margin:0;flex:0 0 384px;width:384px}

/* Bối cảnh: chữ nửa trái — 3 video nửa phải */
.zxbai .mxbg{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;margin:22px 0}
.zxbai .mxvid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.zxbai .mxvid3 video{margin:0;width:100%}

@media(max-width:900px){
  .zxbai .mx3,.zxbai .mx2,.zxbai .mx5,.zxbai .mxbg{grid-template-columns:1fr}
  .zxbai .mxcuon img{flex:0 0 280px;width:280px}
}