/*basic*/
/*--- CSS reset ---*/
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,pre,textarea{margin:0;}
ol,li,ul{margin:0;padding:0}
td,th,input{padding:0}
input,button,textarea,select{vertical-align:middle}
li{list-style-type:none;list-style-position:outside}
img{vertical-align:top;border:none}
ul,ol{list-style:none}
pre{white-space:pre-wrap;word-wrap:break-word;font-family:courier new}
em,i,b{font-weight:normal;font-style:normal}
table{border-collapse:collapse;border-spacing:0}
td,th{word-wrap:break-word;word-break:break-all}
section,article,aside,header,footer,nav,dialog,figure{display:block}
a { text-decoration: none;}
h1,h2,h3,h4,h5,h6 {
  font-weight: 400;
  line-height: 1.4;
}

/* ========== Box Model & Global ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-width: 320px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

/* ========== Utils ========== */
.hidden { display: none; }
.invisible { visibility: hidden; }
.pointer { cursor: pointer; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* ========== Flex ========== */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex-wrap {
  flex-wrap: wrap;
}
.align-center {
  align-items: center;
}
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end{
  justify-content: flex-end;
}
.justify-start{
  justify-content: flex-start;
}
.flex-1 {
  flex: 1;
}
.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 20px); /* 榛樿 20px锛屽鏋滅埗鍏冪礌瑕嗙洊锛屽氨鐢ㄧ埗鍏冪礌鐨勫€� */
}
[class*="col-"] {
  width: 100%; /* 榛樿灏忓睆鍏ㄥ */
  box-sizing: border-box;
}
/* 灏忓睆 / 鎵嬫満锛�100% */
@media (min-width: 768px) {
  .col-2 { width: calc(50% - var(--gap, 20px)); }
  .col-3 { width: calc((100% - 1*var(--gap, 20px)) / 2); }
  .col-4 { width: calc((100% - 1*var(--gap, 20px)) / 2); }
}

@media (min-width: 992px) {
  .col-2 { width: calc((100% - 1*var(--gap, 20px)) / 2); }
  .col-3 { width: calc((100% - 2*var(--gap, 20px)) / 3); }
  .col-4 { width: calc((100% - 2*var(--gap, 20px)) / 3); }
}

@media (min-width: 1200px) {
  .col-4 { width: calc((100% - 3*var(--gap, 20px)) / 4); }
}

/* =========================
 * 閫氱敤 Card Grid 甯冨眬
 * ========================= */
.u-grid {
  --grid-min-width: 300px;     /* 鍗曞垪鏈€灏忓搴� */
  --grid-gap: 20px;            /* 闂磋窛 */
  --grid-columns: auto;        /* 鏈€澶у垪鏁帮紝auto = 鑷€傚簲 */

  display: grid;
  gap: var(--grid-gap);

  /* 榛樿锛氳嚜閫傚簲鍒� */
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--grid-min-width), 1fr)
  );
}

/* ===== 闄愬埗鏈€澶у垪鏁帮紙鍙€夛級 ===== */
@media (min-width: 1024px) {
  .u-grid[data-cols-pc] {
    grid-template-columns: repeat(
      attr(data-cols-pc number),
      1fr
    );
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .u-grid[data-cols-pad] {
    grid-template-columns: repeat(
      attr(data-cols-pad number),
      1fr
    );
  }
}

@media (max-width: 767px) {
  .u-grid[data-cols-mobile] {
    grid-template-columns: repeat(
      attr(data-cols-mobile number),
      1fr
    );
  }
}

/* ========== Spacing ========== */
/* margin */
.m-0  { margin: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-20px{margin-top: 20px;}
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.ml-8 { margin-left: 8px; }
.mr-8 { margin-right: 8px; }

/* padding */
.p-8  { padding: 8px; }
.p-16 { padding: 16px; }
.pt-8 { padding-top: 8px; }
.pb-8 { padding-bottom: 8px; }
.pl-16 { padding-left: 16px; }
.pr-16 { padding-right: 16px; }


/* ========== Text ========== */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-bold   { font-weight: 600; }
.text-normal { font-weight: 400; }

.text-muted  { color: #999; }
.text-primary { color: #1677ff; }
.text-danger { color: #ff4d4f; }
.text-success { color: #52c41a; }
.text-warning { color: #faad14; }

.text-uppercase {text-transform: uppercase;}   /*澶у啓*/

.ellipsis { overflow: hidden; white-space: nowrap;text-overflow: ellipsis;} /* 鍗曡鐪佺暐 */
.ellipsis-2 { display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} /* 澶氳鐪佺暐 */

/* 鏂囧瓧娓愬彉鑹� */
.gradient-text {
  display: inline-block;
  background-image: linear-gradient(
    45deg,
    #8F68FF,
    #487BFF,
    #2CFFCC
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 防止某些机型被当成空文本 */
  color: transparent;
}
@supports not (-webkit-background-clip: text) {
  .gradient-text {
    color: #487BFF; /* 退化为纯色 */
  }
}
.gradient-text,
.gradient-text * {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 搴曢儴鏂囧瓧閬僵 */
.bottom-text-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  /* 鍙厤缃彉閲� */
  --overlay-direction: to top;
  --overlay-color: 0, 0, 0;       /* RGB */
  --overlay-alpha-start: 0.7;
  --overlay-alpha-middle: 0.4;
  --overlay-alpha-end: 0;
  --overlay-padding: 0.2rem;

  background: linear-gradient(
    var(--overlay-direction),
    rgba(var(--overlay-color), var(--overlay-alpha-start)) 0%,
    rgba(var(--overlay-color), var(--overlay-alpha-middle)) 40%,
    rgba(var(--overlay-color), var(--overlay-alpha-end)) 100%
  );

  padding: var(--overlay-padding);
}


/* ============ 鍏叡 border ================ */
.radius-sm  { border-radius: 4px; }
.radius-md  { border-radius: 8px; }
.radius-lg  { border-radius: 12px; }
.radius-xl  { border-radius: 16px; }
.radius-full { border-radius: 9999px; } /* 鍦嗗舰 / pill 鎸夐挳 */


/* ================  鍏叡鎸夐挳娓愬彉 ================ */
/* 娓愬彉甯﹀渾瑙� */
/* 鍏叡娓愬彉鎸夐挳 */
.gradient-border-btn {
  position: relative;
  display: inline-block;
  padding: 6px 96px; /* 鍙牴鎹渶瑕佽皟鏁� */
  font-size: 16px;
  color: transparent; /* 鏂囧瓧閫忔槑锛岄厤鍚堟枃瀛楁笎鍙� */
  background: transparent;
  border: var(--gradient-border-width, 2px) solid transparent; /* 鍙€氳繃鍙橀噺淇敼杈规瀹藉害 */
  border-radius: var(--gradient-border-radius, 50px);
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;
}
.gradient-border-btn::before {
  content: '';
  position: absolute;
  inset: 0; /* 瑕嗙洊鏁翠釜鎸夐挳 */
  padding: var(--gradient-border-width, 2px); /* 杈规瀹藉害 */
  border-radius: inherit;
  background: linear-gradient(
    var(--gradient-direction, 45deg), 
    var(--gradient-border-colors, #8F68FF, #487BFF, #2CFFCC)
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.gradient-border-btn span{
  z-index: 2;
  position: relative;
  /* 姝ゅ杩樼敤鍒颁簡.gradient-text */
}




/* ========== 鍏叡 Icon + 鏂囨湰 鏍峰紡 ========== */
.icon-text {
  display: flex;            /* 鐖跺鍣� flex */
  align-items: center;      /* 鍨傜洿灞呬腑 */
  gap: 10px;                 /* icon 涓庢枃瀛楅棿璺� */
  font-size: 0.4rem;        /* 榛樿瀛椾綋澶у皬锛屽彲鎸夐渶淇敼 */
  line-height: 1;           /* 琛岄珮绱ц创瀛椾綋 */
}

.icon-text a {
  display: inline-flex;     /* 鏂囧瓧涔熶綔涓� flex item */
  align-items: center;      /* 鍨傜洿灞呬腑 */
  line-height: 1;
  text-decoration: none;    /* 鍘绘帀涓嬪垝绾� */
  overflow: hidden;
  white-space: nowrap;      /* 鍗曡鏄剧ず */
  text-overflow: ellipsis;  /* 瓒呴暱鐪佺暐 */
}

.icon-text .icon {
  display: inline-flex;     
  align-items: center;      /* 鍥炬爣鍐呴儴灞呬腑 */
  justify-content: center;  
  flex-shrink: 0;           /* 淇濇寔灏哄涓嶈鍘嬬缉 */
  width: 0.4rem;            /* 榛樿灏哄锛屽彲鎸夐渶淇敼 */
  height: 0.4rem;
  background-image: url(https://res.variflight.com/news_carnoc/hot/list/2025/mhcbj/images/icon_mobile.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: currentColor;      /* 鍙户鎵挎枃瀛楅鑹� */
  line-height: 1;
  vertical-align: middle;   /* 鍏煎 inline-flex 鍩虹嚎瀵归綈 */
}



/* ========== 鍏叡 鍥剧墖鑷€傚簲 ================ */
.media-picture{
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  display: block;
}
.media-picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}