/* normalize.css - Giúp chuẩn hóa giao diện giữa các trình duyệt */

/* Chuẩn hóa box-sizing giúp tính toán kích thước phần tử đồng nhất */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Chuẩn hóa cho margins và padding, thêm viewport fixes */
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Sửa độ dài tối đa cho các phần tử media */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Chuẩn hóa font cho các phần tử form */
input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Tính kế thừa font cho buttons trong Firefox */
button, input, select, textarea {
  background-color: transparent;
  border-style: solid;
  color: inherit;
}

/* Loại bỏ viền cho các phần tử đang trong focus */
button:focus, input:focus, select:focus, textarea:focus {
  outline: none;
}

/* Chuẩn hóa hiển thị cho các phần tử block */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Chuẩn hóa heading và paragraph */
h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
  margin: 0;
}

/* Đảm bảo phần tử root độc lập về stacking context */
#root, #__next {
  isolation: isolate;
}

/* Chuẩn hóa cho các color-scheme */
:root {
  color-scheme: light dark;
}

/* Chuẩn hóa cho scrollbars trên các trình duyệt */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Sửa vấn đề với các giao diện form trên iOS */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Chuẩn hóa mã màu để đảm bảo đồng nhất */
:root {
  --netflix-red: #e50914;
  --netflix-black: #141414;
  --netflix-dark-gray: #181818;
  --netflix-gray: #222222;
  --netflix-light-gray: #8c8c8c;
  --netflix-white: #f5f5f1;
}